Full Stack NestJS + Next.js Tutorial

hello everyone in this tutorial we are going to learn how to build a simple to-do list application this is the api contract that we will implement on the backend and this is the ui mockup that we will implement on the front end we're going to build the back end with nest js first we'll have to install the nest js command line tool next we will generate the starter app all right let's cd into the directory and then install some dependencies so we're going to need nest js config nsjs type orm type rmnpg all right and then let's do an npm run start dev alright so we see the hello world let's check out the code so this was what was generated for us we have our source and our tests and other files so the first thing that we'll want to do is set up the configuration so i'm going to create a emv file here and i'm going to paste in these environment variables database credentials and the app name and then we'll want to make some tweaks to the entry point so that's going to look like this and i'm enabling cores using global exception handler and also changing the port to 8000 and so let's create this file for the http exception filter and that's going to look like this so we can handle our exceptions here and as you can see sjs is using express under the hood all right so we're going to have to make a couple of changes to the module folder so that we can use our configuration so i'm going to say config module and that does the auto import and uh let's see down here uh i think what i need to do is a config module dot for root and then end file path and document so that tells it to load the dot env file in its configuration okay so how do we actually access that configuration let's go to app service and let's create a logger here so private read only logger equals new logger app service dot name and then we'll do the dependency injection with a constructor config service config service all right so let's log out that environment variable so it's a config service dot get app name and let's start our server again all right so uh we went back to localhost 8000 and we should see a log here with that configuration value so for the next step we're going to want to set up the database migrations so first i'm going to go to package.json and i'm going to add this command here type orm and paste this in uh so we can run this typo rm command line tool uh and use this data source which we will define right now so this is datasource.ts and the data source should look like this so this is the data source file and we have a dot env import here and that'll load in the environment variables for us to use as our data source all right so let's run a command to generate our first migration so i'll control c out of that and then run uh well first let's create the database so create db full stack book to do sjs all right let's create the first migration so i'm going to run npx type orm migration create source slash create uh source migration slash create to-do's table and if i go back to the code it should have created a migration folder here with this file all right so uh we're going to want to do a query runner dot query and i'm gonna say create table to do's id big serial primary key name text completed boolean not null default false and for the down migration i will do a query runner dot query and i'll say drop table to do's okay so to run the migration i will do a npm run type orm migration run and that should have created the tables so let's confirm that by going into the database all right so our tables were created let's generate the 2d resource so nest generate resource to do and we'll want rest api just generate the crud entry points and let's check out what it gave us so we have a folder here for to do dto entity controller spec controller to do module to do service spec and the service spec and if we take a look at app module you'll see that it has also import automatically imported this to do module for us all right so let's populate this with our code so i'm going to replace it with this so this has a name and a completed update to do is extending create to do so nothing needs to change here and then entity uh i will add this and so our to-do entity has a primary generated column and then a name column and a completed column that defaults to false and then i'll go ahead and add our controller spec here and then our controller and then our to do module so we have to import this type or module for feature to do and then for the service spec and our to do service all right so let's just go over what we just added so we have this dto here these are our request objects and then update to do dto or entity um let's take a look at the controller so we have all of our rest endpoints defined here so create find all find one update and remove and so this is how you can set a request body this is for the query string parameter so our completed flag and then these are path parameters so we're reading id off the path and uh yeah that's basically it and so we're just passing our parameters to the to-do service um and then this is our module where we define our you know controllers and our providers and then this is our this is our to do service spec so uh we can talk about this after we go over our service um so in here we're injecting the to do uh entity and we're saying hey we we want the you know our typo rm repository methods for this entity and so now we can use this repository here like this we have you know create function find all find one uh update and then you know if it's not found we can simply throw a not found exception and so this automatically maps to the 404 uh and then remove um yeah and so let's quickly go over the specs so you can see this is how we are accomplishing the uh marks so we want to mock out certain methods like uh save and find right on our to do provider so this is how we can do that and then also uh i think this locks out the repository call inside of our service so uh here this is how i can say hey you know anytime you call this you know return this these mock data and then for the service spec it's essentially the the same concept we're just mocking out um certain methods um on on this this component or this uh this module all right so now that we have all our code set here let's try and run this run start dev oh uh this can't resolve dependencies of the 2d repository make sure the argument data source at index 0 is available in the type or module context ah yes there's one thing i forgot so if we go to to do module or uh it's the app module there's something we forgot to do here all right so this part is uh kind of tricky to set up because there's a lot of syntax and nested objects and stuff so let's see if i can get this right uh so i'm gonna add an entry into this import here i'm gonna call it type or a module um i can import that so import type or module dot for root async comma there and so we're passing the config object to this and we're going to say imports config module comma use factory config service and then pass in this function and paste in this configuration here so uh let me import the 2d entity and right below here the used factory i also want to have inject config service okay i think that looks okay let me save that and all right our nest application restarted so looks like this should um should work so let me make a request to localhost 8000 it says hello world and it's logging full stack of to do all right that's good let me fetch to do's that gives me an empty array um all right let's post and i'm gonna say name equals foo completed equals false all right so return that uh let's get to use again all right that looks like it worked let's do a put you should be put uh localhost 8000 completed equals true i cannot put well uh i forgot the path so twos oh uh forgot the id all right there we go so that looks like it worked um all right let's do a delete delete and 200 okay and then empty right all right and let's run our test two and see if we pass so npm run test all right looks like there's a couple of failures here so nest can't resolve dependencies of the app service config service industry is available in the root test module context okay so i think what we're forgetting is config service here let's try again all right looks like everything is passing now so uh yeah that is how you can create a simple to do api with an sjs we're going to build the front end with next js first we'll want to generate the app and we're going to call this full step book to do next js and then we'll cd into the directory and do npm run dev all right so it started a server on localhost 3000 so i'll open that up and this is what the generator gave us all right let's take a look at the code so the command line tool generated this all this for us and you know this is where we have our styles and our pages and this is the index page so let's go ahead and get rid of everything in here and also well actually first let's create the dot env file which will hold our configuration and uh we need the api url which is localhost 8000 and this is the next convention so anything with next public will be available in the uh the client side so let's go back here and add our own home page uh so this is the uh home or the index page and it has a layout which we haven't created yet and a to-do list component which we also haven't created yet so we're using composition here so the layout is something that we can reuse on any page to to give us the same look and feel and then this is uh the component which has all of our to-do list functionality so let's create these components so i'm going to create a folder uh components and i'll call this layout.js and this is going to look like this and so this is where we are using composition to render the inner elements here so this is the wrapper template and then this is where the to-do list will be rendered then next is the to-do list so i'm going to copy this code in here so if you're already familiar with react this should be pretty straightforward i'm not using any of the next js advanced features like server-side rendering this is just a very simple demo so i'm only using just pure react stuff so just to very quickly go over what this code is doing we have some state here to do's the main input filters and then we have a did fetch ref here to use as a way to ensure that this fetch to dose is only run one time right so when this component is uh mounted this use effect will run and we'll fetch the to-do's okay so we have this function for fetching to do's it takes a completed parameter um if it's undefined then we just get everything but if we get a true or false then we will filter it by true or false we also have a debounced update to do function so the debounce is um something that we we're using uh from lowdash so we're actually going to have to install lowdash so let's do that so let's go back to the terminal and do an npm install save low dash okay and we have a to-do change uh function so we're uh completing the to do or uh making changes to the name of the to do then this function will handle that and then this is the update to do function um the actual request that we're sending to our api uh and then this is for adding to-do's and so we have to pass it a name uh this function is for handling deleting of to-do's and so it takes a parameter of id this function handles the main input for adding the to do's and then this handles the enter key so you know when we're done typing the to do then we want to hit enter to add the to do and then this is for handling the filters so active to do's and completed to do's and uh yeah so those are functions and this is the markup so we have the main input up here it's got a placeholder and uh our event listeners and our callbacks and then we have a loading so before the 2ds are available it will show this loading text when the twos are available then we want to render them like this and so we have this to do component which we haven't created yet and we're passing the to do and the delete handler and the change handlers and then we have our filters down here so they have a filter style and then they have conditional style of filter active so whichever one is active we want to give it that style to give it that little underline and then these are the event listeners and text all right so let's add that 2d component and i'm going to go ahead and paste this in here so it's taking the to do as the prop with an on change and on delete callback and then our markup is down here and yeah these are the event listeners so events are being sent back up to the parent component for handling and then we also have this delete with the little trashcan image um yeah so those are the components and uh we'll since we're importing all these styles uh we're gonna have to create the files for those so let's go ahead and create the styles so we have a layout.module.css we also have a to-do list dot module dot css and we have a module.css and uh we'll fill this in later but uh right now we can still run the app without having any styles and let's just get rid of all those global styles that came with the uh generated code and probably get rid of this too okay let's go ahead and run this and see what happens so npm run dev okay click on localhost 3000 all right so here is our app and let's open up the dev tools so we can see exactly what is happening when we interact with this ui so right full step book enter alright so you can see that a post request was made and we got the to do back and it was added to here we can complete the to-do so i checked it and then it created it sent a put request now if i want to filter it by active then you can see that it's passing a completed query string parameter uh and then uh since nothing's completed nothing's showing if i say completed then it's making that request and returning with r1 to do that's completed and then filter by all so now the complete flag is gone if i hit the delete then it should remove it so this is the delete request and all right so all the functionality is there let's go ahead and add all of our styles so um so these are our layout styles our to-do list styles and our to-do styles all right so that should have reloaded and yeah here it is so uh finish full stack book all right and that is how you build uh the front end for a simple to-do list app so there was a couple of things that i forgot to do so the first one is there is this warning here that says each child in a list should have a unique key prop and to fix that if i go back to the code and i go to to-do list and i scroll down to the loop if i add a key here then a unique key then that should get rid of that warning so just say key equals so if i clear this and refresh all right so that warning is gone and the second problem is the the icon the delete icon so we're getting that for here i just have to add that icon in so let me go and grab that icon all right i saved the icon into the public folder i'm going to refresh okay so now i have the delete icon alright that's all thank you for watching if you found this tutorial helpful like and subscribe for free resources on full stack development check out fullstackbook.com i'll see you next time

Channel: Full Stack Book

Views: 17,110

Keywords:

Id: 9jUh0Y2A3X4

Length: 32min 10sec (1930 seconds)

Published: Mon Aug 15 2022