Preview
Video Player
00:00
00:00
Modular Routes
6:17Make the app more maintainable by moving the routes into their own file.
[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