MERN Stack Tutorial #2 - Express App Setup

so then my friends the first thing we're going to do is start work on the back end of the application to make an api so that means we'll be setting up an express app using nodejs and this express app is going to allow us to easily create an api for us to reach from the front-end reactor application later on and it's also going to be able to communicate with our database mongodb to fetch any data it needs to send back to the browser as well okay then so i've got open a brand new project in vs code called man stack and inside this project ultimately we're going to have two folders a folder for the back end code and a folder for the front end code which is the react app we're going to start with the back end code which is the express app so let's create a new folder and i'm going to call this back end but you can call it server or something else entirely if you wish it really doesn't matter and inside here we're going to create a new file called server.js and this is kind of like the entry file for the backend application it's where we're going to register the express app now the next thing we need to do is create a package.json file inside the backend folder and that package.json file is going to allow us to keep track of dependencies and also register our own custom scripts so i'm going to open up a terminal by pressing ctrl t or you can go to terminal and new terminal and then i'm going to cd first of all into this backend folder so let me do that cd and then back end make sure you do that before you try to create this package dot json file otherwise it's going to create it in the root mern stack folder all right so now i'm going to clear this to give me some room and i'll say npm init and then space and then hyphen y and when i do this hyphen y flag right here it's going to automatically fill out all the answers to the questions for me so i don't have to run through them in the terminal so once i do that we should see this package.json file right here cool so the next step is to install the express package so that we can use that to create an express app so again open up the terminal i'm going to clear this and i will say npm install and it's called express and by the way before you try using npm you definitely need node installed on your computer otherwise none of these things are gonna work so press enter to install express now when that's installed we can now create the express application inside this server.js file so the first thing we need to do is we need to require the express package and the way we do that in node applications is by saying const and then whatever we want so express is equal to require and then in parentheses whatever package we're requiring and that's the express package we just installed and incidentally you'll notice we have this node modules folder as well now that's where the express package and all its dependencies were installed into we don't need to go in there all right so now we've required that we need to now start up the express app and the way we do this is by saying const and i'm going to call this app call it what you want doesn't matter and i'm going to set this equal to express which we required right here so this constant and it's actually a function that we just invoke and that creates an express app for us let me just do a comment right here express app and it's been stored now in this app constant all right so the next thing we want to do is listen for requests we want to basically listen to a certain port number so the way we do that is first of all let me do a comment listen if i can spell listen for requests we're going to say app which is this thing right here then use a method called dot listen and then in parentheses we want to listen to a specific port number we'll just say 4000 and then when it's done this we're going to fire a function and inside here we can console.log message which is going to be displayed in the terminal down here and that message is going to be listening on port 4000 all right so i'm going to save this and now i'm going to run this file now to run a file i could just say node and then the name of the file which is server.js and that is going to run a file it's going to be absolutely fine we can see now listening on port 4000 so it's working but if i make a change to the file now for example if i just add some exclamations here and save it then in order for this to work we'd have to cancel out of this process and then run node server again and now we can see the updated string right here okay let me just change this because i've spelt it incorrectly and save that again so an alternative is to use something called nodebond so let me cancel out of this process and clear down here and the first thing you want to do is make sure you have this nodemon package installed globally and to do that you can say npm install hyphen g and then nodemon and press enter that's going to install the package globally on your computer so you can use anywhere i've already done it so i'm not going to do it again but once you've done that you can then say nodemon and then the name of the file server.js and press enter and now it does the same thing it logs this to the console down here but now if i make a change to the file let me get rid of those and press save we can see that it detected that change and it re-ran the file and we see that new log down here so that's good it watches our files for us and it reruns the application whenever it detects a change so that's cool but i'm going to cancel out the process again by pressing ctrl c and clearing this and what i'm going to do is go to the package.json file to create a new script and this is going to be a dev script so this is what i like to do sometimes create a script inside the package.json file and then in here i can say whatever script i want to run when i run the dev command so it's going to be node 1 and then server dot js so now we can run this dev script right here down here i can say npm run dev and that's going to do exactly the same thing for us okay so now it's listening on port 4000 and now whenever we make a change to the file it's going to re-run the script for us all right cool so now we have our express app right here we're listening to port 4004 requests now we also want to react to requests so to do that we need to set up a route handler so i can say app dot gets and then this is going to respond to a get request coming in and then we can specify a specific route for this get request so i'll just say forward slash and that means if i go to local host port 4000 just forward slash the root of the domain if you like then it's going to fire a function which is the second argument right here to handle that request and inside here we can take in the request object which has information about the request and also a response object which we use to send a response back to the browser or the clients so what i'm going to do is use that response object to say response.json and this sends back a json string for us and inside here i'm going to say we have a property called message and then we'll just say welcome to the app like so let me just do a comment right here to say routes like so now if all of this goes over your head then you probably should check out my node.js and express course first of all remember the link to that course is going to be down below the video but anyway now we have this route up and running and let's try it out in a browser so if we go to localhost port 4000 right here and press enter that sends a get request to this url to the server the server responds with this json right here with the message property so this is all working so this is all working but at the moment we're hard coding the port number right here in the server.js file which is fine but what i want to do is store any constants like this in an environment variable and the benefit of doing this is that when you eventually push your projects to repositories like on github the environment variables can remain hidden and they're not visible in the code now that might not be a big deal when it comes to the port number for now but when it comes to more sensitive information like a database connection string or an authentication secret you don't want those things visible so they're better off going in environment variables which will remain hidden so the way we're going to do this is by making a dot env file in the back end folder and this is going to store all environment variables the only one that we want at the minute is the port number so let's call this port all in capitals and let's set it equal to 4000 no spaces between the environment name or the environment variable name rather and the value so the idea is that when you're pushing your code up to something like github you add the dot env file to your git ignore file and then this file won't be pushed up so everything in here remains private so say we want to access now these environment variables in our code how do we do that well we need to do it with the help of a node package called dot env and we need to install that into our project down in the terminal and you'll need to cancel out of the node 1 process first of all to do this and you can do that by hitting control c and then typing y and then install dot env by typing npm install dot env and then hitting enter so dot env is a package that loads environment variables from a dot env file into the process.env object available to us globally in a node.js environment and once this package is installed we can then go ahead and use it in the server.js file to do that for us all we have to do is require the package at the top and directly invoke the config method on it once it's been required and this is the method that's going to attach those environment variables for us to the process object so now what we can do is come down here and instead of just saying 4000 we can say process which is a global object available to us in node applications and then say dot env and then another dot and then whatever the environment variable was called that we want to use in our case that's port all uppercase and this is going to still be port 4000 but now it's being pulled from the dot env file cool so now we can preview this again by running the script down in the terminal so let's do that we'll say npm run dev and this should run in turn nodemon and spin up our express application all right so in the browser everything is still working the same way which it should awesome so at the minute when we send a request in the browser this is a get request and since we've set up a get request handler it's handling that request fine but if we wanted to test out a post request or a delete request which we will need for this application then we're not going to be able to do that directly from the browser by entering the address up here because like i said when we press enter up here it sends a get request and if we want to send post requests or delete requests we're going to have to create some javascript on the front end to send those requests or before we have that front end we could use a tool called postman to try out those different routes and requests so you can get that from postman.com forward slash downloads and download it right here and what this allows us to do is kind of simulate different types of requests to our server so get request post request delete request patch request etc so this is what we're going to be using for the next few videos to test out any routes that we create for our api so after you've downloaded and installed postman when you first fire it up it might ask you to sign up or sign in or something like that but when you get inside it's gonna look something like this it might look a bit different if you've got a slightly different version but generally speaking something like this and to start a new request we can click on this plus icon right here we can select the type of request right here so i'm going to stick with get and then we want to enter in the address so localhost in our case port 4000 and then just forward slash so if i send this get request right now we can see we get this json response down here now what i'm going to do as well is save all of our requests so that we can try them out later on as well so to do that we can just hit ctrl s to save it or you can click on this save button right here and you can call it something if you wish i just keep it as the address right here and then you can save it to a folder now i'm going to save it to a new folder on new collection so i'm going to click on that and i'll call this mern app like so create it so now we want to save it inside the monap and when we do that we can see this folder over here moonapp and we can see this request so it saved it and i can cross it off here and if i want to use it again in the future i can click on this and send the request and voila we get the response so as we go through the rest of this course and we try out different types of requests like post requests or delete requests to different endpoints we're going to send all of those requests in this folder so we can come back to them if we need them so there's one last thing i want to do in this video and that's to just register a little piece of middleware now middleware is a fancy name for any code that executes between us getting a request on the server and us sending a response so this right here this is technically middleware this function now we can register some kind of global middleware in our express app by saying app and then using the use method to use some middleware and in here we pass a function which is going to fire and this function will fire for every request that comes in now inside here we get access to three arguments the request object the response object and also a function called next which we have to run at the end of this middleware in order to move on to the next piece of middleware for example if we sent in a request to forward slash then this would run first of all this middleware and then if we don't use the next function it would never go on to the next piece of middleware this right here so we have to invoke this when we're finished now all i want to do is set up some kind of logger so that every time we get a request in the console we can log out the path and we can also log out the request method like get post or put etc so let me do that i'm going to say here console.log and then we'll use the request object to get the path and then after that we'll output the request dot method as well all right so let me just do a comment up here to say middleware and also we need to run the next function at the end so dead simple middleware just so we can log out the requests that are coming in so now if off screen i start to make a few requests and then i open up my terminal we can see that down here we have a get request to forward slash we have a get request to forward slash hello and a post request to forward slash hello so it's just logging those requests as they come in and that might help us later on so that's the express app pretty much set up now in the next lesson what we're going to do is register a lot of routes for the api a bit like this

Channel: Net Ninja

Views: 134,805

Keywords: mern, mern tutorial, mern crash course, mern tutorials, react, mongodb, node.js, express, node.js api, express api, express tutorial, node tutorial, node and react, mern vs mevn, full stack tutorial, full stack, full-stack, fullstack, mern stack, mern stack tutorial, mern stack crash course, node api, express node, express.js, express js, express vs node

Id: 8DploTqLstE

Length: 15min 30sec (930 seconds)

Published: Wed Jun 15 2022