Express JS - Router and Routes

today we're gonna talk about routing with Express so I've built a very basic starter file here we've got our Express object imported so we're running that to create our application I've got a default port setup is 4 4 4 4 we've got our basic route for just the route of our API or web server whatever it is that we're building and we're listening on that port so that's about as minimal as we can get what I want to talk about is all the different ways that we can do routing and how we can make our routing a little bit better organized so when our application grows when we start doing things like talking to a database or dealing with a whole bunch of different middleware that it's going to be easier to manage because we're gonna have different folders and files for different purposes so let's get started inside of here we've got the basic route and when a request for the method get you're using the method get' comes in for this endpoint this is the function that's going to handle it now if I were to create other endpoints let's say that things slash cars was a possible endpoint and we're going to have our request and our response object care function is or code is still pretty simple what if we're also doing a post to that endpoint so things slash cars and again we'll add our function that's going to handle that res still not a big deal but now I realize ok well what if somebody's passing in an ID here and I want to do a put or a delete so now I've got another one we'll say app dot get four slash things smashing cars slash car ID our request and response objects there's our function now our put and there could be also a delete we'll just leave it at put because this is getting to be a lot of you watching me type and that's always a lot of fun I know but we're gonna try and keep that a little bit shorter so we have these different functions that we can work with great but as you can see very quickly this becomes a lot of code to kind of keep track of in key and manage so we want to simplify this process one thing that we can do is whenever we have routes that are the same we can combine the two of these things and say you know what I'm gonna use the wrote method I'm gonna take this string and put it inside of here and now I can chain these things together like this and so app dot route for this route we're gonna do get and we're going to do post here's my two functions great that's a little bit more organized same thing down here we'll say let's do a route we'll take our route here paste it in remove it from here remove it from here get rid of this extra app get rid of this semicolon there there we go so we've simplified a little bit we've organized our code a little bit better by using the route method that's available on the app object but we can still simplify this even further by using the rotor object that exists in Express now just before I get into doing that one side note is with these routes that we're creating with these endpoints that we're defining I've just been hard coding strings and I've been using the params wreck dot params dot car ID would be one but we can't also use regular expressions within these strings so if you insert a question mark that means zero or more of the character that comes before it so we can write this ABCD with or without the B so either of these two endpoints would match with a B+ CD it's one or more so any number of bees can be used with an asterisk that's like saying I've got a wild-card character I can put anything I want as long as it starts with a B and ends with C D or we can even just use the regular expression syntax so here's something that ends with man so it has to end with ma n we can put anything we want at pardon me ahead of that but this is the ending character or if you want the beginning character it is in regular expressions that means starts with okay so that's just a side note for what you can do inside these routes instead of just hard coding a full path now routes the route object I want to organize my code I'm gonna take everything that has to do with things and I'm gonna put that into its own file so we're going to come in here and create a folder called routes this is where I'm going to put all my different routing things so my routes for things is gonna go in one file my routes for animals will go on another one and just or break up my url into some way that makes sense to me but things is where we're gonna start and I'm going to come up here I'm gonna say Const things equals require and you have to spell require right there we go require and inside of the folder routes there is a thing zas file that's the one that I'm getting in and I'm gonna say I'm gonna app dot use so I'm gonna treat it like middleware and I'll say anything that begins with things let's go to that things file so use the things J's file to handle endpoints there we go so now let's take all of this code and we're gonna move it into that other file so let's open up the other file I started it off this is the new import right here so we have to bring in Express because we're gonna use that that's where the router object is but I'm gonna bring in Express router and put it into a variable called router and that is what I'm going to export this is what we're calling things right here that's my router object if I mouse over that you can see Const things router so it is it does recognize that it is a router object okay now let's take all of this code that has to do with things so forget the get for the route one we're gonna leave that here but all these other bits I'm gonna remove those from our file there we go so we're back to saying anything that starts with things use this file but wrote for the route that's gonna stay here okay now back into here now I'm no longer dealing with an app object what I'm dealing with is sort of a mini application it's this router thing there we go router and for router we want to say not quite this things if you remember back in here this was the base this was the route so anything starting with this we're using this file and that means inside of things we don't need this part because that is now considered the beginning part of any path that we deal with here booth any endpoint that we're dealing with so this is actually dealing with things / curse so let's do a res don't send I get / things / cars this one is going to be a high post things curse down here we're getting the car ID so res send + wreck params car ID that's on the end of there and this is a put things cars + that car ID okay so those are our routes that we've defined we stripped off that first part because that's what we told the router it was going to be dealing with we're using the router object instead of the app object here the router object now has all of its things defined all of its endpoints defined that's what we're exporting is this router object that we created so back over here here's that router object and we're gonna be using that middleware well we used middleware back in the original file the app don't use we define this we could have put other middleware inside of here let's say if we knew that we were going to be dealing with JSON for everything we could say I'm gonna use the express dot JSON method to handle all incoming requests looking to see if there's JSON and converting them into actual objects we can have that there great I'm not doing that right now but this is another example of middleware that we could put inside of there back in here if we wanted to create middleware we can do it as well but we're not putting it on the app object we're putting it on the router object the one that we've just created here so router dot use just like that and we can make up our own function if we wanted with the request response the next object just like all middleware gets at the end of all middleware we got to make sure we call next maybe inside of here we'll say whatever the wreck dot URL is plus we're gonna write out at and then a timestamp will stay area so every request that comes in that goes through this router this middleware only applies to requests that are handled by this file not ones that are handled by a piace s so back in here the ones that are handled by this middleware we'll get that middleware writing out the timestamp this one will not and we can test this out we want to open this up and start off our server there we go listening on four four four four and I will use curl to make a request for the root of our web server local host there we go four four four four asking for the root okay nothing's happening here because we didn't actually do anything right here we got to put a send so we'll save that kill this and start it up again run the request again hello root there we go and we're not seeing the middleware that wrote out the timestamp but if I make a request for one of the ones dealing with things localhost one four four four four slash things slash car now I'm going to deal with the get that's inside of there hi get things cars and over here slash cars at there's the timestamp and if we do one that has a number inside there there we go there's the number and there's the road with that middleware being used all right so I hope that helps you out I will leave a copy of the finished up J s and a finished copy of the things G is in that coches that I'm linking to down in the description as well as a link to the rest of the Express playlists that I've got so far if you have any questions feel free to leave those in the comments and as always thanks for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 61,502

Rating: 4.9409332 out of 5

Keywords: MAD9014, MAD9022, web development, JavaScript, JS, steve flix, steveflix, web dev, mad9124, express, express js, express tutorial, starting with express js, introduction to express js, express routes, express routing, express Router, express Router object, how to route with express

Id: iM_S4RczozU

Length: 12min 53sec (773 seconds)

Published: Mon Jan 27 2020