MERN Stack Tutorial #3 - Express Router & API Routes

all right then gang so in this lesson we're going to focus on setting up the different routes or api endpoints for our express api and what we want to eventually do is interact with the database using this api to do things like get workouts from the database and send them back to the clients or add new workouts or delete them or update them etc so we're going to set up various endpoints to do this and i just wanted to run through these first of all in a slide so we're going to have a get request handler to forward slash workouts and this handler would get all of the workout documents from the database and send them all back in json format to the browser the post request to forward slash workouts that handler would create a new workout document in the database then we'd have a get request handler to forward slash workouts forward slash sum id where this id is a route parameter and would represent the id of a particular workout and that would get us a single workout document from the database and send it back to the browser so this would be the workout we get with this id and then we have a delete request to forward slash workouts forward slash id again where this is the id of the document that we want to delete and that would delete a single workout from the database and finally a patch request which would be used to update certain fields inside a workout and that would be to forward slash workouts forward slash id again where this is the id of the workout that we want to update okay so they're the different routes that we need to set up in our application all right so we want to set up all of these different routes and route handler functions where do we do that in our code well we could do it inside the server.js file like we did with this right here but what i want to do is not bloat out this particular file and keep this quite clean and instead what i'd like to do is create a different file to keep all of our routes in so what i'm going to do inside the back end folder is create a new folder first of all called routes and then inside here creates a new file called workouts and all of our different workout routes are going to go inside this file now the way we created a route over here is by using this app right here and then saying dot gets and if we wanted a post request handle out we would say app dot post and if we wanted a delete request handler app.delete and so forth but we don't have access to the app inside this file right here so how do we create those routes well the way that we do it is by using the express router so first of all we need to require express up here at the top of the file so we say const express equals require the express package and then below that we can say const router and we set that equal to the express dot router with the capital r and invoke that and that creates an instance of the router for us and then we would attach a handler to dot this so example and then that could be to just forward slash and we'd have some kind of function that fires when that request comes in and then at the end of the file once we've created all of our routes we can export the router and the way we do that is by saying module that exports is equal to the router like so so we'd set up all of these different routes so we might have four or five of them right here on this express router and then we export the router at the end then what we could do inside the server.js file is require that particular router right here that we export with all of these different routes attached to it so let's do that i could say const workouts routes and you can call this what you want it doesn't really matter i'm going to name it workout routes since that's what they are and we set it equal to require and then we want to go into the routes folder so dot forward slash into the routes folder and then forward slash workouts we don't need to put the extension it figures that out so we have to work out routes and then all we need to do is use those routes on our app and the way we do that is come down here i'm going to get rid of this one because we don't need this route anymore that was just to test the api so instead i can say app dot use this time and we're going to use the workout routes so we grab them and we paste them in here and basically what that does is it grabs all of the different routes that we attach to the router right here and it basically uses them on the app so if we have a get handler right here it would be the same as saying app.get right here and then whatever the url is or the path and then the function okay so it just attaches all of those routes to the app now what i want to do as well is i want to only fire these routes when we come to a specific path so for example i could place in another argument right here before workout routes to specify a path and that's going to be forward slash api forward slash workouts so what that means is when we fire a request to this route right here then i want you to use these routes and they become relative now so if this is just forward slash it would mean when a user goes to forward slash api forward slash workouts forward slash then we fire this function now down here if i was to do another one let me just copy that and paste it right here to say hello or something like that then this would fire this function when we went to forward slash api forward slash workouts forward slash hello does that make sense okay so we have that set up right here now that's all we need to do so now we can go ahead and start creating these different routes so we have this one for just forward slash and this is going to be to get all of the workouts because remember we're going to go to forward slash api forward slash workouts and that should give us all of the workouts this one right here so what i'm going to do for now is just taking the response or the request rather and the response object and then inside here i'm going to say response.json to send some json back and the json is just going to have a message on it to say get all workouts so this is just a dummy response for now so that when we're sending requests from postman we can see a response all right so let me do a comment above that to say this is to get all workouts all right and then let's come down here now we need one to get a single workout cannot spell single all right so let's say now router.get and this is going to be to forward slash and then colon id this colon represents a route parameter whereby this can change and then we fire a function we get the response and the request object like so and inside here we'll send a response so response.json and i'm gonna add a message property to this to say get single workout all right so i'm going to show you how we can access this route parameter later on for now we're just sending this simple response back the next one we want to do is post a new workout so post a new workout to create one so we say this time router.post so we're handling a post request this time not a get request and this is going to be to just forward slash because again we have this stuff in front of it so when we send a post request to this it's going to fire this function in a second so request and response and then inside here for now we'll just send a json response so response.json and we'll have the message property which will say post a new workout and you know what i'm going to do i'm going to just copy this now a couple of times and paste it down here so the next one is going to be to delete a workout and right here we need to change this to a delete request instead of post so delete and this needs to go to forward slash colon id where this is the id of the thing that we want to delete and then right here we can say delete a workout like so and then the last one is to update a workout so let's say update a workout like so this needs to be a patch request to update something and that's going to be to forward slash colon id as well and then right here we say update a workout like so and that's pretty much done they're all the routes that we need for now so we're creating the router then we're adding all of these different request handlers onto that router and we export the router at the end then we use that router right here for this particular path so if we just go to forward slash then it's not going to fire this thing right here because it doesn't have this in front of it it's only when we go to this route right here these routes are added on to the end of it okay cool so that's pretty much done i think and yeah okay there's one more thing i think we should do so you know when you're handling a post request like this or even a patch request where we're sending data to the server because if we want to add a new workout to the database we have to send the data for that workout document we can access that from the request object right but we can only access that if we use a bit of middleware in an express app and that middleware is express.json so what i'm going to do is come above this middleware and say app.use and it's built into express so we can just say express dot json like so and what that does is any request that comes in it looks if it has some body to the request so some data that we're sending to the server and if it does then it passes it and attaches it to the request object so that we can access it in the request handler so if i save this now i could if i wanted to get access to the request body by saying request dot body now in a post request all right now i'm not going to do that for now but we will need that later on so i just thought i'd add in this middleware to prepare us for that but now we have all of these different routes i'm going to open up the terminal to make sure everything's still running it is we're going to try these routes out now in postman but before we do that i've just noticed an error right here these are the wrong way around it should be request first and then response all right so now let's try this out all right then so in postman i'm inside the moon app folder we've got open this request that we created earlier now i'm going to change this back to get and this time if it goes to just localhost port 4000 forward slash if we click send then we get an error back because now the end point is not just forward slash it should be forward slash api forward slash workouts like so and if we send a get request to this then we should get a response which we do so i'm going to save that now okay so now that's done and in fact let's edit this i'm going to say this should be api forward slash workouts as well all right so now that's saved let's create the next one so we'll do now a get request to a specific um document so that needs to be to the same end point so let's paste that in here but also now with some kind of id on the end so if we send this now then we should see get a single workout back which we do cool so now i'm going to save this one as well inside the mirn app folder save that so we can use it later okay let's cross those off the next one i want to do is a post request and this is going to be to the same end point and normally we would add a request body because we want to create a new workout in the database and we need to send that data to the server to do that but we're not going to do that just yet i just want to make sure that the endpoint works so let's send this and see yep post a new workout that works i'm going to save this for later inside the mern app folder all right let's cross that off next let's do the delete request so select deletes paste this in and there should be an id on the end of this as well send it and yeah we get this back which is correct so let's save this like so inside the main app folder and then finally we want to create a patch request so let's select patch paste in this endpoint and add some kind of id send that and we can see update a workout comes back awesome so these are all working and now we have these different requests saved so we can test them out later on when we're actually working with data next up we're going to create a database and we're going to also talk about mongoose which is a package we can install into our application to help us work with the database as well

Channel: Net Ninja

Views: 97,204

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

Id: Ll6knx7sFis

Length: 13min 37sec (817 seconds)

Published: Thu Jun 16 2022