Nest, Axios, React, React-Native Architecture Speedrun

welcome to the first blue color coder architecture speed run and on this one we're going to be using nest as our api layer we're going to be using axios to go and access that api layer and then we're going to be using react and react native on top of that let's get actually we're not going to get into it just yet i do have an announcement i am joining the react roundup podcast as one of the co-hosts and so there'll be a link to that in the description if you're here from that podcast and checking out blue collar coder thank you so much for showing up and if you're a blue collar coder viewer well go check out react roundup podcast it's awesome stuff okay let's get into our first architecture speed run let's get after it okay so i'm going to go into my temp directory and then i'm going to use nx this is going to be what we're going to use to kind of bring this all together is the nx dev system and i will call this multi-platform to do's because it uses a bunch of platforms in particular react and react native and we're going to be building a simple to do app we use and just start off as empty so here's the rules of a speed run i'm not going to concentrate on ui i'm not going to concentrate on the completeness of a to do application i totally leave that to you all we're going to be doing is effectively a what they would call in agile a spike all the way from react and react native all the way down to the api layer in this case nest all right let's bring up our project okay i'm going to go back to the terminal i'm going to take a look at all the extensions that nx gives us because we're going to want a bunch of these we're going to want nest that's going to be our api layer we are going to want react and react native and i think that should about do it okay good go let's go and generate our nest application so we do that using nx and then g for generate and then the pattern is going to be narwhal nest and the app is the what we want from it and we'll call that one api and that's going to go build an api project over here in apps now let's go take a look at our main so that's going to go and set up our nest factory which was really this app over here and the important parts are the controller and then the service so currently it's going to do this welcome to api service all right all we need to do is go down here and do mx and then serve on our api and that's going to launch that api service for us and that's on localhost 33.33 cool very nice make it big so you can see it all right great okay so what do we need for some to do is we're going to go and first create a interface for our to-do so we'll call that to do and it's going to have an id number it's going to have text which is a string it's kind of done which is boolean and in our app service we're going to have an array of those private to-do's which can be a an array of to-do's and starts off at nothing and you know what we're just going to return that let's get data and we will change that to a to-do array and while we're here let's go and add on the mutations that we want to be able to do under this so let's do add and we'll give it text which is a string that's going to return a void and then we'll just push on a new to do the id would be the current length and then text and then done we'll start it at false and there you go there's our adder and then we'll have one for setting and toggling the done states we'll call that set done and given an id which would be a number we want to set that done value which would be boolean and again we're going to return a void and so in this case we're going to do a map so we're going to say this to do's equals this dot to do's and so we'll run over every to do and then we'll return a new to do with it but we'll take a look at the done field and if the to do id equals the id that we got coming in as a request then we'll use whatever the done is that they gave us otherwise we'll just keep whatever was there already there so there you go fixing my syntax a little bit okay so that's all we need for our service that has set up our to-do's and kept our data going this would obviously go to a database if you wanted that's fine but now we need to expose that to the external api and the way that we do that is through this controller and these really cool decorators in here so the first one is get data that's that's working right now it's a get request and what we want to do is also route a post request to add one so we just create a new host here and we'll call this create and you also get to declare a body and then you get to define the payload which in this case would be a text blob then i can even destructure that if i want so now i just have text cool and in this case we're just going to route that to add give it to add like that and then i'll add one more post to do set done and all you do is add set done in there so this is going to give us any post to http let's see what is it this api is going to do this route right here and then let's do set done so this is going to give us a post on api set done you can do id mapping all that kind of stuff as well i'm just going to do something very simple here so in this case we're going to have an id to be that number and then done which would be that boolean and then we'll do id in here and done and we'll just route those to set done awesome okay and then the last thing i need to do in here is set up cores so i'm going to go up here to app and i'm going to say app and enable cores so cores is just how you enable the ability for anybody from any domain to call our api service normally you would only be able to call it from the api where your pages are served to talk about pages let's go into our next thing so with that done let's go and generate our react app that's going to call this so let's do so let's do nx and then g for generate and then narwhal again and react in this case then we again want an app and we'll call this one web app he's asking me for the style sheets react router blah blah all right looking good so let's go over to our app and get our web app over here and again we'll do nx serve and then web app just to see what we've got all right looking pretty good okay so the next thing we need to do is add axios because that's what we're going to use to access the data so we'll do yarn add axios right at the top level and then anything that uses that we'll have that as dependency okay great let's take a look over in source at app.tsx and just start removing most of the spoiler plate in fact all of this bye bye bye bye bye don't need that but what we do need is we need use effect and use state from react and then we need axios from axios great perfect okay let's start up this app by using a use effect and we'll use an empty dependency array because we want that to start on page load effectively or component load and we'll also create a spot for our use date our to do's okay now what are we going to do because we want an array of to do's we need that to do definition and it is stuck over here in the app in the api app so it's stuck here and we don't want it there we want it in a shared location so the next thing we want to do is create a shared types library so i'm going to do nxg and then do narwhal node because the basic node library and call it shared types perfect okay now we can go over to libs and we got shared types awesome and then over here in index or over here and share types there we go and we'll just paste in the interface for to do export that this guy just exports anything in there so that's going to show up nicely awesome so let's go back over here to our app.tsx and now we can import to do from and now we even get hinted about it so let's do mp to do's shared types and there we've got our to do definition awesome but let's also make sure that it's synchronized with our api so we'll go back over here and grab this literally and just paste it into the service and now that one also has the same definition of to do which is awesome it's great those are absolutely synchronized between those two things so now we want to do axios and then get off of that route so let's see 33 api awesome but we want to do this asynchronously so you know we would create a use callback for this and we'll call that git to do's because we're going to want to do that multiple times give it a use callback and this is going to be an async callback because we want to use a weight and we're not going to have any dependencies on that and this one is just going to call that axios get and await that and that's going to have our response and we can even type it we can say that this is going to get a an array of to do's and then from there we're going to be optimistic and say that's always going to work and we're going to pay back our data and put it in there and so now all we need to do on our use effect is just call get to do's all right let's go take a look at the to-do's data by just json stringifying it in here and let's see nice comes in as an empty array we don't obviously know if that works or not yet so let's go and add a an uncontrolled input to allow us to add a new to do create a new div down here it'll have an input field and then it's uncontrolled because we'll just have a reference to it so we'll say ref equals and then text input ref and we'll bring in user app up here i'll say use ref and it wants to know what kind of ref we've got so we've got an html input element we're looking at and we'll start off at null and that should be enough let's see oh yeah we've got ourselves an input awesome uncontrolled means that you don't have to worry about setting state and all that it's very good if you don't need validation obviously you want to add that later if you want to build on this example but for right now this is fine all right let's go and add a button called add with an on click handler it's going to on add to do make another callback call on add to do use callback and in that case we're going to do another axios thing in this case we're going to do axios post same location as before but we just give it a body so this is text and then that's going to be text input ref.current.value now typescript is going to appropriately tell us that that could be empty so let's do if around that just to make sure that it's not undefined and then once that's done we'll set that to an empty string and there you go okay and we need to go get the new to do's so do that as well get to dues and away we go so let's see what is it giving us grief what's giving us grief about get to do is there and get to do's here and off also we should do an async to make sure that we wait until this is done which means we need to add in a weight here so we're going to wait this post and then we're going to set the current value to an empty string once it's done and then we'll get the new to do's so let's give it a try and see if it works wow so fast speed run okay here we go so the next thing we want to do is put a nice little ui on this and allow us to toggle the done state so let's go and go back up here to our to-do's and replace that with a map of the to do and that's going to have a div in it for each to do that's going to have their ids and then an input field of a type checkbox and the current text let's take a look see how that looks no perfect great okay doesn't do anything though so let's do an on change here and with that we're going to say on toggle and give it the to-do id i'll take a number in this case we want the value to change based on the to-do's because we're going to toggle stuff right so we need to know what the current value is and in order to do that we need to keep that callback up to date so we're going to bring in to-do's here as well and make sure that we change anytime this this callback anytime that to-do's are changed so again it's going to be async because we're going to call that post method and then we're going to call get to do's but we're not going to call api like that we are going to call set done because that's what we created to do the the done flipping and that one takes an id which is the current id coming in and then done which would be the inverse of whatever that to do done is so we'll do uh to do's and it'll find that id so we'll take that to do and we'll say that if it matches the to-do id of that then we want the done value from that cool yeah that'll work okay a couple more things we need to add get to do's to our dependency list because it may change and then i also need to set the checked here to be to do done all right looking good let's toggle it on and then refresh and looks like it's persisted that's great okay cool all right let's go on now and create our react native app it's going to look at exactly the same data source how cool is this going to be i'm loving it okay for this one i'm going to actually go and create a new terminal so we're going to nxg narwhal react native ask for an app and then say that we want this one to be called rn app okay now really important it actually took a little while for me to get react native set up on my machine it'll probably be the same for you react native is extremely particular about the setup that it wants on your on your machine so my recommendation to you is to go through a react native starter kit first before trying this so you make sure that you have a setup that is capable of doing react native you got to get ruby set up and a whole bunch of stuff so it's it's kind of a pain and it's but it's worth doing okay so with that done let's get rid of that now we're going to need not one but two terminals for this one the first is going to run the metro bundler so we'll call that mx start and then we'll say rnap and that's going to run the metro bundler that will keep the javascript up to date that's already running so we're going to do nx run ios so we're going to run the the ios instance of our react native app rn app okay now we finally got to the point where we're actually going to run the app but we're still doing this bundling we're bringing in the bundle for the app and there we go awesome good starting point for our application let's go take a look at the code so now we've got rn app over here and we'll take a look at source and then app and you can see this big old boiler plate down here this is the whole welcome to rn app all that stuff so we're just going to get rid of all that all right let's save and there we go empty app great okay so now we want to go bring in that data but we want to go and share the business logic between these two applications that's part of the point of this we want to make sure that we can share business logic between our react native and our react app so the next thing we need to do is build a react library that has a custom hook that does the exact same things that we were doing in the react app but in that custom hook then we can reuse that custom hook between both so let's do a new window and we'll do nx generate and then narwhal react in this case we're going to use a library and we'll call this one data access that's what's going to do is access the data okay let's go back over to our web app and go and grab the code essentially for all of this probably down to about here with the toggle there we go great and take that over to the libs and we'll just put that in our tsx file and we're going to call this one instead of that we're going to call this one use to do's all right that all looks pretty good so far so we got our state we got our getter we got our effect that's going to get it first we don't have the text input ref and we'll call this one add to do and that'll take a text which is a string i'll just drop that in there we don't need this conditional we're not going to do that or that but everything else looks great so that's add to do and then toggle to do that's pretty good actually that that looks just fine so what we want to do is return a bunch of stuff out of this custom hook so this custom hook is going to return to do's as well as the get to do's function as well as add to do and toggle to do so that's going to be the stuff coming out of this this data access now let's see okay that looks good so we have an exported used to do's hook okay let's go back over and actually consume that on our react side so now we're going to import use to do's from our project mp to do's and then now we've got data access perfect great and we'll do to do's and add to do and toggle to do from use to do's just like that so let's get rid of a lot of this code okay we only need the text input ref there in this case we're going to add to do with the current value and that's already going to do a get to do's for us so we don't have to worry about that and we don't have to worry about this but we should add on there add to do since we're using that now and then toggle to do oh this i don't even think we need this so let's get rid of all of this and now i just go over here and toggle to do to do id man that is that is slick now we don't even need axios or any of this stuff cool let's go take a look and see how it works all right let's go and restart the web server which i think is this one great awesome perfect cool all right so let's go copy this one out of here and then paste it into our react nativity app over here awesome like that and then we'll do to do's equals used to do's like that okay so let's map through all those to-do's and take each to-do and create a view with a key of the to-do id and then text with the to-do text and then in order to see it i need to add make it a little bigger make the font size 36 and then the padding is five let's make it nice and big like that and there you go boom same data source but let's actually try it out so another thing we need to do is create a touchable opacity like that we'll create a refresh button for this and then inside of that we're gonna have a text that says refresh take a look that works okay cool it's small but it's there and then we'll have an on press and that's gonna do a on refresh now we need to define on refresh so we need to bring in a use callback and we'll create it construct equals use callback and all i'm going to do in this one is this called get to do's that's just going to do our refresh for us so we'll just call that all right so that's going to go back to the service anytime we ask for it and we'll do another one add it go back to our react native app hit refresh and boom okay there you go speed run done you've got a react native app and a react app both of which talk through a shared custom hook which represents our business logic to a shared backend with nest js all of which uses shared types and sitting of course on the monorepos structure of nx okay well i hope you enjoyed the first speed run if you have questions or comments be sure to put those in the comments section down below youtube really loves comments and so i'd really appreciate it if you had any questions or just want to say hey this is a great video just put that down in the comment section below of course feel free to hit that like button if you like the video and hit the subscribe button if you really like the video and you want to see more of it

Channel: Jack Herrington

Views: 6,614

Keywords: nestjs, nestjs tutorial, axios js tutorial, axios js, react js, react-native tutorial, architecture speedrun, Nest, Axios, React, React-Native Architecture Speedrun, Building Shared Types library, Building the Data Access Library, React with Nest backend, React Native with NestJS backend, blue collar coder

Id: _WpzQTHBRLE

Length: 25min 26sec (1526 seconds)

Published: Wed Jun 23 2021