In this video you'll be wrapping up the section by exploring how you can refactor index dot J S this
file currently contains every single root our API supports.
We start off with all of the roots related to users then down below we have the roots related to tasks
and if we were to add more roots which we will be doing later in the class those would just make this
file longer and longer.
When we find ourselves in a situation with a single file that always just gets longer and longer as
we add more features it's typically best to break that up into many small files.
So for example we could have one file which contains all of the routes for users and then another file
which contains all of the routes for tasks.
And that's exactly what we're going to get done in this lesson.
So at a high level here's what's going to happen.
We'll be setting up multiple express routers and we'll be combining them together to create the complete
application.
Now you can have as many routers as you need but typically it makes sense to categorize them by the
resource.
So in our case we'll have one new router for the user related routes and we'll have a separate new router
for the task related routes as we add more functionality to the application.
We could create more routes to stay organized.
Now yes we will be creating separate files for all of this.
That's the whole point.
But before we get to that let's explore the basic syntax with maybe four lines of code right here in
index dot J.
Yes.
Once we have that down it'll be easy to take what we learned and just pull it into another file.
That this file requires.
So to start the goal is to create a new router and express gives us a way to get that done right here.
Let's first create a variable to store it.
I'll call this router and we create a new router by using the new operator with the following function.
It is express docked uppercase R router.
Now this doesn't take any arguments similar to how we don't pass any arguments in when creating our
Express application.
What we do instead is we use methods on router to customize it and router is gonna have access to the
same methods we've worked with so far we have router dot post router dot get router dot patch and router
dot delete.
So right here let's go ahead and start off with a little example router dot get we will set up the following
route forward slash test and we will set up a very simple handler function.
All I'm gonna do is use response dot send to send back some text.
This is from my other router.
Perfect.
Now the goal is to actually get this showing up by default.
This router is not being used at all.
Yes we've created it but we haven't registered it to work with our Express application.
That means we can head over to the browser but we'll see an error.
So over here we're going to go over to a local host on port three thousand and we'll go to forward slash
test.
When we do that we see the following can not get forward slash test.
So to fix that we have to register our new little router with our existing app.
We do that via app dot use and we pass the router in.
With this in place we'll be able to save the file and visit the exact same page we had before but this
time it's going to work.
I'll go ahead and refresh the browser in Chrome and right here I get my message.
This is from my other router so here's the basic structure.
Create a new router set up those routes and register it with the express application.
The only thing we're going to do to stay organized is do all of this in a separate file.
So let's go ahead and get to that inside of these source directory.
I'm gonna create a brand new folder and we're going to call this folder routers and this is going to
store our routers and for the moment we'll create just a single file for the user related routers right
here.
Let's go ahead and call that user dot J S in here.
We're going to do exactly what we did in the other file.
Now we did use something unexpressed.
So let's make sure to load it in const express equals and I'll require the Express library.
Then in this new router file we'll create a new router.
I'll call this router and once again we will create a new instance of express dot router with an upper
case.
Ah perfect now with the new router in place we can setup all over the routes we want to support and
we will stick with one sample route for the moment.
So router dot get right here forward slash test and once again just setting up a simple response.
Message response dot send.
We're sending back some text from a new file and now what we're going to do is just export that router
from this file so module dot exports equals the router we just created.
So here we're defining the new router.
We're setting up the routes and we're exporting it in order for this router to be used.
We have to require it over here and then use it with app dot use.
So I'm gonna delete this little example we had in place that's no longer necessary.
This brings us back to the index dot J.S. file we had at the start of the lesson and up top we're going
to load in the new router we've created so const i can call this something like user router and right
here I'll require the following file dot forward slash routers forward slash user.
Now with the user router variable in place we can register it so down below that would be app dot use
not user excuse me.
And right here to app dot use we pass user router exactly like we had before.
The only difference is now the router is defined in that separate file.
So once again we should be able to visit forward slash test to see our text right here.
I'm getting from a new file which is fantastic.
We have a router being defined in a separate file with roots it being set up but it's still being loaded
into the application allowing someone to actually use it.
So from here what we want to do is take everything else related to the user from index dot J S and bring
it over to user dot J Yes.
Now we're not going to rewrite all of those routes that would be a bit ridiculous.
Instead we're just going to copy and paste them over.
So I'm going to highlight all the way from up here where we create a user.
We're going to go through all five of the routes we have four users at the end.
We will stop.
We're gonna cut all of that out leaving just the task routs in place and we're going to bring all of
that over to the new file.
Right here I'll remove that dummy round we set up and I'll paste in the new routes.
I just copy it over now.
We're not quite ready to save the file just yet we are still using app dot post instead of router dot
post and we're trying to work with user inside of these functions but we don't have it loaded in so
it's not going to work as expected.
You want to make sure to fix all of that first right here.
Let's start by loading in the user model const user equals.
I'm going to require that file.
That'll be dot dot to get out of the routers directory then forward slash models forward slash user.
And then we're gonna switch up the method calls.
So that would be router dot post router dot get router dot get one more time and then down below we
have router dot patch and router dot delete.
So we want to make sure we're removing all references to app because app no longer exists in this file.
Now with this in place the user dot in J.S. file is looking really good and in index dot J Yes we can
now save the file since we have indeed registered that router.
So what have we really done.
All we've done is we've taken the existing routes and we've moved them somewhere else.
Our application should still work exactly the same.
Let's go ahead and test things out in post man over here.
I'm gonna use the read user's request to fetch my users and what do I get I get my two users back as
expected and this is fantastic.
I'm still able to use this route even though it's no longer defined in index dot J S now that we've
refactor it away the user routes together it's gonna be your challenge for the video to refactor away
the task routs into their own file and I have some challenge comments right here.
So a big picture goal.
Create the new task router and step one is to create a new file that creates and exports a new router.
So we already have one router in the user dot J.S. file you'll be creating a new file with a similar
structure.
Step 2 You're gonna take all of the task routes all five of them from this file and you're gonna bring
them over to that new router file you've created.
And once again make sure to import anything that's necessary and adjust the name that you've used.
For example I'm using app here but I'm using router in user dot J S you'll have to take these same things
into consideration.
Step 3 you want to load in that new router to this file.
So I want to require it and register it like I did here.
And finally you're gonna test your work.
The end result is that everything should still work the same in this video.
We haven't changed the functionality of the app at all.
All we've done is done a bit of refactoring and restructuring to improve our ability to write more code
and build out the application.
So take some time to knock all of this out test your work when you're done come back and click play
how'd that go.
I'm gonna kick things off by creating the new file in there we'll create and export the new router so
I'll create that new file in the routers directory and I'll call it task dot J S now in here we'll start
by loading express in so const express equals.
I'll then go ahead and require the Express library.
And from there we can go ahead and create the new router console router equals new with Express Dot.
Capital R router and last up will export it.
So module dot exports.
Exporting the new router.
We've just created so it's the same barebones structure as the other file we define now.
Next up we want to go ahead and move all of the task routes to that new location.
So I'll start right here with app and Dot post.
Then I'll go all the way down to the app dot delete call.
I'll copy all of that and cut it out of the file.
Now I have a 26 line file and most of that is the challenge comment so we can take everything that we
just copied to the clipboard and I can bring that over to task not J S I'll paste it all right here
and all we have to do is make a few small adjustments.
First up I am going to need to load the task model in since I'm making heavy use of that.
So const task equals will call require requiring the following file dot dot forward slash models forward
slash task and the only other thing we need to do is change app calls over to Router calls app no longer
exists router does.
So I'll change it in all five locations one for each route we have defined in this file.
Now once that's done this file is complete it creates the new router it sets up all of the task routes
and it exports the router over an index not J.
Yes we can move on to Step number three which is to load it in and actually use it.
Now here we're loading in user and task our models.
Those are no longer used in this file so we can actually delete them as they're unnecessary.
Right here we can go ahead and grab that task router so const task router equals I'll use require once
again dot forward slash routers forward slash task.
And with that in place we can call app dot use app dot use passing in the following the task router.
Perfect.
Last up let's go ahead and delete the challenge comments and we're gonna go ahead and save the file.
We've done all of those steps up to testing our work with the files saved.
We can now make sure that everything works as expected over here in post man.
I'll navigate over to read tasks and fire that off and what do I get right here.
I get a two hundred status code and I have my one task showing up.
I could go ahead and copy that I.D. to the clipboard and bring it over to another request like the read
task request.
Right here I'll swap out the old I.D. with the new one I'll fire that off and I'm getting the correct
data down below.
So now what do we have.
We have an index J.S. file which doesn't do a whole lot.
And that's a good thing.
Instead of having one big file that tries to create the application and define all of the routes we
now have three files index dot J.S. creates the Express app and gets it up and running.
But what the Express app actually does is defined in those router files.
We have two so far.
And if we needed more we could easily add them into the mix allowing us to create a more complex application
without running into a situation where we have everything in a single huge file.
That's where we're gonna stop for this video and that's also where we're gonna stop for this section.
The goal of this section was to get us comfortable with the basics of the rest api.
Now that we have the basics in place we're going to continue on in the next section talking about more
advanced topics and techniques.
I'm excited to get to it.
So let's go ahead and jump right into the section introduction which is coming up now.