Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Express Basics

Well done!

You have completed Express Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Modular Routes

6:17 with Andrew Chalkley and Joel Kraft

Make 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