Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Express Basics!
You have completed Express Basics!
Preview
Make the app more maintainable by moving the routes into their own file.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Let's take what we've
learned about Express and
0:04
build out the rest of our
flash card application.
0:07
Before I dig in,
0:10
I just want to show you quickly how to
move your routes into a separate file.
0:11
Knowing how to modularize your app
will keep your code well organized and
0:16
easy to maintain over time.
0:21
This is how most professionals
structure their code.
0:23
So, you'll often see routes in a separate
file in Production Express apps.
0:26
First, I'll create a folder
to hold my routes file.
0:31
I'll call it routes.
0:35
Inside, I'll create a new file.
0:39
I'll call this index.js.
0:43
Remember when requiring a file in Node JSm
I can just refer to the folder name and
0:48
if there's a file named index JS
that will be loaded by default.
0:54
Relying on this convention will make my
code a little simpler and easier to read.
1:00
At the top of the new index.js file,
I'll require Express,
1:05
And with Express I'll use the router
constructor to create a new router.
1:16
A router is kind of like
a mini app in Express.
1:26
You can add middleware and routes to it.
1:30
Now I will cut all the routes
from the app.js file and
1:36
drop them into the new index file.
1:40
I want to declare all of these routes
with the router instead of the app.
1:52
So I'll just do a find and
replace all to change app to router.
2:01
Finally, I'll export this router so
I can reference it in the app JS file.
2:15
The router file is done.
2:25
To let the app access these routes,
I need to input it into
2:32
the app.js file,
just below the other middleware.
2:36
I will import it.
2:42
And again because this folder has
a index js file we don't need
2:53
to refer to that when we require it.
2:58
I can use the routes variable I
declared to make middleware now.
3:02
I'll call app.use,
3:06
And pass in the routes variable where
all those other routes were, and
3:14
we're all set up.
3:18
I'm going to test it out
to see if it works still.
3:21
I hit the hello route, which it renders.
3:24
So the route's file is
now connected correctly.
3:30
Note that apps will often have
more than one routes file.
3:33
You can add a path as a first
argument to mount those routes to.
3:36
In fact, let's create another routes file
now we'll use for the flash card routes.
3:41
I'll just add a line under this one, and
this time, I'll add a path name of cards.
3:48
I'll refer to these routes
as the card routes variable.
3:56
While I'm here,
I'm going to rename the other
4:03
routes constant to differentiate
them now with this new one,
4:06
CardRoutes hasn't been declared yet,
so I'll go up and
4:16
require it underneath
the other routes reference.
4:20
I'll point directly to the cards file now.
4:36
We'll create that in a moment.
4:41
Now I'll create the other
cards route file.
4:43
I'll just copy the top two
lines from index.js file and
4:54
paste it into my cards file.
4:59
Then I'll cut this cards route, and
5:06
paste it into the dedicated
cards route file.
5:10
Because we're directing
traffic into this file,
5:20
from the cards path in the app js file,
5:24
every route in this file
would start with cards.
5:28
So, I can just cut out cards for now.
5:32
Finally, I need to export the router.
5:40
I'll save the file and
test out the cards route.
5:50
And as you can see, it renders.
5:59
Now that we've got a well-organized
directory structure,
6:03
we're in a great position to
start building out the app.
6:07
Let's start by developing
the card template and
6:12
bringing some data into our app.
6:15
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up