ExpressJS Routes Tutorial - Separating Routes into Different Files

hey guys how's it going i'm back here with another video and today i decided to bring a video which i'll it will basically be an overview on routes using express.js framework and in this video i'm going to be explaining you guys how to use it how to organize your project and why they are important so like why do we actually need to divide our application our api endpoints into different routes so before we get into the video if you guys could subscribe leave a like and comment down below i would really appreciate it because it will really help the channel grow and i'm posting every single day so i would really really appreciate it so yeah let's get into the video you can see right here i have a very very simple api created with express you can see on my application the only thing i have is my index.js file which is where my application starts and inside of it i create my express server i define my port i'm telling my app to listen and it says server running when i run my server and i created four routes very simply right here you can see like everyone does it's a crud application meaning that i'm showing you guys uh the app has a get request a post request a put request and a delete request you can see if the if we make a get request it's trying to reach a route called users so imagine that in this application we want to have an api endpoint with the route slash users so we can even imagine like what does it do well maybe it is everything related to the user so when we say app.getusers it's supposed to make a request the database which i'm not doing here because this isn't the point of the video but imagine that we're making a request the database inside of this brackets over here and we're just sending the data back like the data about the users then we have a post request to create the user you can see i'm not doing anything with any database however i'm just saying user created same for the put request which says user updated and the delete request which says user deleted however this this looks fine right it looks fine it works if i come here to my browser you can see that if i try to reach the local host slash users um it will say data here user data because we're making a get request to the slash users obviously i'm not going to test i'm not going to test any post requests put requests and delete requests because that would involve like uh using either postman or insomnia which are external applications i don't want to deal with that but you just just get it that like um we made four different endpoints with the route slash users but imagine that in our application we want to make a route for comments right so imagine this is youtube right and you want to have a table just for comments and you want to organize your application so that the endpoint now is slash comments so normally we would come over here and say app.get and i'll just actually copy all of this just so you guys can see i'll copy all of this and i'll put them over here right and then i just change oh this gets confusing but i would just i'll just put a a comment over here so so you guys can just like uh i kind of like realize that this is the division right so this is comments right slash comments this is everything related to comments then slash comments here as well then i can make a pro request to comments and i delete request the comments this looks fine right actually it doesn't because it looks horrible in my opinion i'll even zoom out as you can see like it's just a bunch of routes with nowhere like not non-organized at all and i'll tell you something my first application using express and node i did exactly this i didn't use routes i made the whole app in a single file the file was like 500 to 600 lines of code and it was horrible i cringe every time i look at that application again and don't do that because it's super unorganized i spent hours trying to debug the application while i could have just resolved it in minutes if i had divided my application properly not to mention that this is horrible practice and it is extremely important that you organize your your application toward like according to the standards of the industry right so what would we do in this situation well we could create a separate file one for comments and one for users and we can also separate for different routes one for comments and one for users and i'll show you guys exactly how to do that in order to actually divide our application into routes let's come over here and create a folder called routes you can call it pages you can call it whatever you want i usually call it routes i'll just make it lowercase but it's this folder right here and inside of it i will store all the different routes that we have in our application for example the user route and i'll call it user.js because it is going to be a javascript file and i want one for comments as well so i'll create a comments.js and i will have two separate files inside of my routes folder now what do i do well i want to copy all the logic related to users into the users file and the logic related to comments into the comments file right so let's copy this over here and delete it from here paste it into the users and let's do the same thing for the the comments and you see that like immediately it's a lot better because now our our initial file index.js literally just has less than 10 lines of code and let's paste it on our comments however this isn't done the reason why it isn't done is because we we still have to do a lot of stuff to fix it and make it work the main thing we have to do is on both user user.js and comments.js we need to import express which is going to be const express equals to require express so we're going to import the express library here and the express library has a a variable which which we can create an instance of called router and this is what usually we do we come over here and say router equals to express dot router and basically what it does is it this variable right here just defines that this is a router this is a router object and it's going to serve for everything we need and let's just instead of using app let's just use router and let's do the same thing for the other one for the comments and let's paste it over here and just again uh switch this to router instead of app and let's just save this and let's come over here to our index.js we aren't done yet because we're not like telling our application that both of them are routes we're not doing anything so what we can do is we can actually first of all require those pages those files so if you want to import a file from your application you can easily create a variable for example let's call it user route equals to require so we're just importing the file um user.js and we can say dot slash user actually we need to dot slash routes um is it this yeah dot slash routes slash user and this is the path from index.js to the user file over here and we can do the same thing for the for the comments route however there is something important what we're doing over here is we're trying to have access to the router variable that we created over here but we are currently not having access why because we're not exporting from this file anywhere in application we need to export it so that we can have access over here so to export it very simply and always do this at the bottom of the application like right at the bottom you say module dot exports and whatever you set this equal to will be a variable that you can send right so if i send for example router and i try to import the user.js file over here this variable user route which is we're setting it equal to the import will basically be replaced by the value of router because we set it to be exported as you can see i'm trying to explain it very simply but this is the best that i can do um we're just exporting the router from each of the routes so that we have access in the index.js and now that we have access to this what we can do and also i forgot to change this to comments um comments and i think yeah that's it so now that we have those two routes what we can do is we can apply those routes and to do this very simply grab your app variable that you set it equal to express here when you created your express server and just say app.use and over here you pass two arguments the first one is the route that you want like the actual route that you want this to be for example users i want it to be slash user and i want to pass the user route and for the comments i want to be comments um route so as you can see right here so what does this mean exactly so why are we passing this over here well this means that we don't actually need to pass users inside of here we just pass a slash and it knows automatically that it is the user if we put user over here like we had before users it would we would have to reach for user slash users if you get what i mean like this already done does the deal for every one of this route so we don't actually need to put users anywhere here same thing with um comments or else it would be comments slash comments in the route so we just have to delete all of this and now what we can do is this is probably done let's refresh the server let me come over here and say node index.js to run the server or i need to close my old server so node index.js it says server running which means it's running let's open up your application and you can see that despite not having app.yet we can say slash user and it will say here is your data if i go to slash comments it will say here's your data as well so both routes work and you can see that they are different like they're different because if i change this to comments um and i come over here and i go to comments i refresh oh i need to restart my server again just for example like i'll just explain to you guys if you come over here to my comments it will say comments meaning we have both routes perfectly separated and it means it's working you can see it's different right so this is the basic idea of using routes in express you would like you would you would actually have what i do is i usually have a separate file where i define all the different routes like this and i just create a different file for each of the routes so if i have a user if i have a comment if i have like like a table for for likes um i want logic for like adding friends to each other all that kind of stuff that you have in your application like adding a profile picture all that kind of stuff well you got to understand how to divide your application so users and comments go in separate files but for example if you want to have a profile picture usually goes with the user as well but if we want to make an application a part where um we want to basically sell stuff or buy stuff or add products to an e-commerce website we might want to create a different file this is a basic idea right and yeah that's basically it if you want to check out i have a tutorial on the mvc pattern which is a really common pattern to be designing your backend express application you can check that out um it's a little bit more intermediate however i believe it is also really really valuable to learn how to dis design your backend so i really hope you guys enjoyed this video if you enjoyed it please leave a like and comment down below what you want to see next um this video was suggested by a subscriber so i i read every single comment i respond every single comment and by the way i don't know if i'm going to be posting in the next few days i really hope so because i'm in the midst of final seasons and it's really rough i have a i have a multivariable calculus exam tomorrow and i just took like 10 minutes off to record this video but yeah i really hope you guys enjoyed this video subscribe because i'm posting every single day and i see you guys next time [Music]

Channel: PedroTech

Views: 3,969

Rating: 5 out of 5

Keywords: crud, databases, javascript, mysql, nodejs, typescript, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, expressjs, express router, express routers, nodejs routing, nodejs routers, nodejs separating into different files, how to route with express, express router object, expressjs tutorial, expressjs beginner, nodejs routes, nodejs router, express routing, web development, express router middleware, router express js

Id: 0Hu27PoloYw

Length: 12min 27sec (747 seconds)

Published: Mon Dec 14 2020