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
You need to sign up for Treehouse in order to download course files.Sign up