1 00:00:00,240 --> 00:00:06,750 In this video you'll be wrapping up the section by exploring how you can refactor index dot J S this 2 00:00:06,750 --> 00:00:11,480 file currently contains every single root our API supports. 3 00:00:11,490 --> 00:00:17,940 We start off with all of the roots related to users then down below we have the roots related to tasks 4 00:00:18,240 --> 00:00:23,370 and if we were to add more roots which we will be doing later in the class those would just make this 5 00:00:23,370 --> 00:00:25,530 file longer and longer. 6 00:00:25,530 --> 00:00:31,440 When we find ourselves in a situation with a single file that always just gets longer and longer as 7 00:00:31,440 --> 00:00:37,620 we add more features it's typically best to break that up into many small files. 8 00:00:37,620 --> 00:00:43,620 So for example we could have one file which contains all of the routes for users and then another file 9 00:00:43,620 --> 00:00:46,400 which contains all of the routes for tasks. 10 00:00:46,470 --> 00:00:49,430 And that's exactly what we're going to get done in this lesson. 11 00:00:49,440 --> 00:00:51,900 So at a high level here's what's going to happen. 12 00:00:51,900 --> 00:00:57,660 We'll be setting up multiple express routers and we'll be combining them together to create the complete 13 00:00:57,690 --> 00:00:58,890 application. 14 00:00:58,890 --> 00:01:04,620 Now you can have as many routers as you need but typically it makes sense to categorize them by the 15 00:01:04,620 --> 00:01:05,680 resource. 16 00:01:05,730 --> 00:01:13,020 So in our case we'll have one new router for the user related routes and we'll have a separate new router 17 00:01:13,230 --> 00:01:18,670 for the task related routes as we add more functionality to the application. 18 00:01:18,690 --> 00:01:21,610 We could create more routes to stay organized. 19 00:01:21,690 --> 00:01:25,110 Now yes we will be creating separate files for all of this. 20 00:01:25,110 --> 00:01:26,350 That's the whole point. 21 00:01:26,400 --> 00:01:33,000 But before we get to that let's explore the basic syntax with maybe four lines of code right here in 22 00:01:33,000 --> 00:01:34,080 index dot J. 23 00:01:34,080 --> 00:01:34,760 Yes. 24 00:01:34,920 --> 00:01:40,350 Once we have that down it'll be easy to take what we learned and just pull it into another file. 25 00:01:40,350 --> 00:01:42,440 That this file requires. 26 00:01:42,750 --> 00:01:49,650 So to start the goal is to create a new router and express gives us a way to get that done right here. 27 00:01:49,650 --> 00:01:52,270 Let's first create a variable to store it. 28 00:01:52,290 --> 00:01:59,270 I'll call this router and we create a new router by using the new operator with the following function. 29 00:01:59,280 --> 00:02:03,460 It is express docked uppercase R router. 30 00:02:03,510 --> 00:02:09,600 Now this doesn't take any arguments similar to how we don't pass any arguments in when creating our 31 00:02:09,600 --> 00:02:11,370 Express application. 32 00:02:11,370 --> 00:02:18,030 What we do instead is we use methods on router to customize it and router is gonna have access to the 33 00:02:18,030 --> 00:02:25,710 same methods we've worked with so far we have router dot post router dot get router dot patch and router 34 00:02:25,770 --> 00:02:27,120 dot delete. 35 00:02:27,120 --> 00:02:33,630 So right here let's go ahead and start off with a little example router dot get we will set up the following 36 00:02:33,630 --> 00:02:39,520 route forward slash test and we will set up a very simple handler function. 37 00:02:39,570 --> 00:02:44,400 All I'm gonna do is use response dot send to send back some text. 38 00:02:44,400 --> 00:02:48,050 This is from my other router. 39 00:02:48,060 --> 00:02:49,150 Perfect. 40 00:02:49,170 --> 00:02:52,890 Now the goal is to actually get this showing up by default. 41 00:02:52,890 --> 00:02:55,670 This router is not being used at all. 42 00:02:55,680 --> 00:03:01,070 Yes we've created it but we haven't registered it to work with our Express application. 43 00:03:01,140 --> 00:03:04,650 That means we can head over to the browser but we'll see an error. 44 00:03:04,650 --> 00:03:12,090 So over here we're going to go over to a local host on port three thousand and we'll go to forward slash 45 00:03:12,150 --> 00:03:12,780 test. 46 00:03:12,780 --> 00:03:18,150 When we do that we see the following can not get forward slash test. 47 00:03:18,150 --> 00:03:23,940 So to fix that we have to register our new little router with our existing app. 48 00:03:23,940 --> 00:03:28,820 We do that via app dot use and we pass the router in. 49 00:03:29,070 --> 00:03:35,190 With this in place we'll be able to save the file and visit the exact same page we had before but this 50 00:03:35,190 --> 00:03:36,660 time it's going to work. 51 00:03:36,660 --> 00:03:41,670 I'll go ahead and refresh the browser in Chrome and right here I get my message. 52 00:03:41,710 --> 00:03:46,320 This is from my other router so here's the basic structure. 53 00:03:46,350 --> 00:03:52,020 Create a new router set up those routes and register it with the express application. 54 00:03:52,020 --> 00:03:57,690 The only thing we're going to do to stay organized is do all of this in a separate file. 55 00:03:57,690 --> 00:04:02,160 So let's go ahead and get to that inside of these source directory. 56 00:04:02,160 --> 00:04:07,950 I'm gonna create a brand new folder and we're going to call this folder routers and this is going to 57 00:04:07,950 --> 00:04:15,420 store our routers and for the moment we'll create just a single file for the user related routers right 58 00:04:15,420 --> 00:04:16,080 here. 59 00:04:16,080 --> 00:04:20,280 Let's go ahead and call that user dot J S in here. 60 00:04:20,280 --> 00:04:23,300 We're going to do exactly what we did in the other file. 61 00:04:23,310 --> 00:04:25,400 Now we did use something unexpressed. 62 00:04:25,410 --> 00:04:32,100 So let's make sure to load it in const express equals and I'll require the Express library. 63 00:04:32,100 --> 00:04:36,070 Then in this new router file we'll create a new router. 64 00:04:36,120 --> 00:04:43,140 I'll call this router and once again we will create a new instance of express dot router with an upper 65 00:04:43,140 --> 00:04:43,700 case. 66 00:04:43,720 --> 00:04:50,150 Ah perfect now with the new router in place we can setup all over the routes we want to support and 67 00:04:50,150 --> 00:04:52,970 we will stick with one sample route for the moment. 68 00:04:53,060 --> 00:05:00,740 So router dot get right here forward slash test and once again just setting up a simple response. 69 00:05:00,740 --> 00:05:03,750 Message response dot send. 70 00:05:03,860 --> 00:05:11,930 We're sending back some text from a new file and now what we're going to do is just export that router 71 00:05:12,050 --> 00:05:18,650 from this file so module dot exports equals the router we just created. 72 00:05:18,650 --> 00:05:20,510 So here we're defining the new router. 73 00:05:20,510 --> 00:05:25,580 We're setting up the routes and we're exporting it in order for this router to be used. 74 00:05:25,610 --> 00:05:30,470 We have to require it over here and then use it with app dot use. 75 00:05:30,470 --> 00:05:35,000 So I'm gonna delete this little example we had in place that's no longer necessary. 76 00:05:35,000 --> 00:05:41,030 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 77 00:05:41,030 --> 00:05:49,040 to load in the new router we've created so const i can call this something like user router and right 78 00:05:49,040 --> 00:05:56,310 here I'll require the following file dot forward slash routers forward slash user. 79 00:05:56,330 --> 00:06:04,490 Now with the user router variable in place we can register it so down below that would be app dot use 80 00:06:04,790 --> 00:06:06,720 not user excuse me. 81 00:06:06,860 --> 00:06:13,380 And right here to app dot use we pass user router exactly like we had before. 82 00:06:13,400 --> 00:06:18,110 The only difference is now the router is defined in that separate file. 83 00:06:18,200 --> 00:06:24,170 So once again we should be able to visit forward slash test to see our text right here. 84 00:06:24,170 --> 00:06:27,440 I'm getting from a new file which is fantastic. 85 00:06:27,440 --> 00:06:33,590 We have a router being defined in a separate file with roots it being set up but it's still being loaded 86 00:06:33,650 --> 00:06:37,760 into the application allowing someone to actually use it. 87 00:06:37,760 --> 00:06:45,410 So from here what we want to do is take everything else related to the user from index dot J S and bring 88 00:06:45,410 --> 00:06:47,940 it over to user dot J Yes. 89 00:06:47,960 --> 00:06:52,070 Now we're not going to rewrite all of those routes that would be a bit ridiculous. 90 00:06:52,070 --> 00:06:55,350 Instead we're just going to copy and paste them over. 91 00:06:55,430 --> 00:06:59,560 So I'm going to highlight all the way from up here where we create a user. 92 00:06:59,630 --> 00:07:05,030 We're going to go through all five of the routes we have four users at the end. 93 00:07:05,030 --> 00:07:06,440 We will stop. 94 00:07:06,440 --> 00:07:12,530 We're gonna cut all of that out leaving just the task routs in place and we're going to bring all of 95 00:07:12,530 --> 00:07:14,320 that over to the new file. 96 00:07:14,480 --> 00:07:19,240 Right here I'll remove that dummy round we set up and I'll paste in the new routes. 97 00:07:19,250 --> 00:07:21,110 I just copy it over now. 98 00:07:21,140 --> 00:07:28,090 We're not quite ready to save the file just yet we are still using app dot post instead of router dot 99 00:07:28,100 --> 00:07:34,430 post and we're trying to work with user inside of these functions but we don't have it loaded in so 100 00:07:34,430 --> 00:07:36,380 it's not going to work as expected. 101 00:07:36,380 --> 00:07:39,710 You want to make sure to fix all of that first right here. 102 00:07:39,710 --> 00:07:45,190 Let's start by loading in the user model const user equals. 103 00:07:45,450 --> 00:07:47,690 I'm going to require that file. 104 00:07:47,690 --> 00:07:55,150 That'll be dot dot to get out of the routers directory then forward slash models forward slash user. 105 00:07:55,320 --> 00:07:58,200 And then we're gonna switch up the method calls. 106 00:07:58,200 --> 00:08:07,370 So that would be router dot post router dot get router dot get one more time and then down below we 107 00:08:07,370 --> 00:08:10,280 have router dot patch and router dot delete. 108 00:08:10,640 --> 00:08:18,030 So we want to make sure we're removing all references to app because app no longer exists in this file. 109 00:08:18,050 --> 00:08:24,800 Now with this in place the user dot in J.S. file is looking really good and in index dot J Yes we can 110 00:08:24,800 --> 00:08:29,720 now save the file since we have indeed registered that router. 111 00:08:29,720 --> 00:08:31,280 So what have we really done. 112 00:08:31,310 --> 00:08:36,250 All we've done is we've taken the existing routes and we've moved them somewhere else. 113 00:08:36,260 --> 00:08:39,710 Our application should still work exactly the same. 114 00:08:39,740 --> 00:08:43,530 Let's go ahead and test things out in post man over here. 115 00:08:43,580 --> 00:08:50,420 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 116 00:08:50,420 --> 00:08:53,000 expected and this is fantastic. 117 00:08:53,000 --> 00:08:59,510 I'm still able to use this route even though it's no longer defined in index dot J S now that we've 118 00:08:59,510 --> 00:09:05,830 refactor it away the user routes together it's gonna be your challenge for the video to refactor away 119 00:09:05,890 --> 00:09:11,150 the task routs into their own file and I have some challenge comments right here. 120 00:09:11,150 --> 00:09:12,580 So a big picture goal. 121 00:09:12,680 --> 00:09:20,060 Create the new task router and step one is to create a new file that creates and exports a new router. 122 00:09:20,060 --> 00:09:26,660 So we already have one router in the user dot J.S. file you'll be creating a new file with a similar 123 00:09:26,690 --> 00:09:27,860 structure. 124 00:09:27,860 --> 00:09:33,590 Step 2 You're gonna take all of the task routes all five of them from this file and you're gonna bring 125 00:09:33,590 --> 00:09:37,010 them over to that new router file you've created. 126 00:09:37,130 --> 00:09:43,370 And once again make sure to import anything that's necessary and adjust the name that you've used. 127 00:09:43,370 --> 00:09:49,940 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 128 00:09:49,940 --> 00:09:51,280 into consideration. 129 00:09:51,320 --> 00:09:55,720 Step 3 you want to load in that new router to this file. 130 00:09:55,730 --> 00:09:59,460 So I want to require it and register it like I did here. 131 00:09:59,510 --> 00:10:01,850 And finally you're gonna test your work. 132 00:10:01,850 --> 00:10:06,590 The end result is that everything should still work the same in this video. 133 00:10:06,590 --> 00:10:10,220 We haven't changed the functionality of the app at all. 134 00:10:10,220 --> 00:10:16,910 All we've done is done a bit of refactoring and restructuring to improve our ability to write more code 135 00:10:17,120 --> 00:10:19,080 and build out the application. 136 00:10:19,250 --> 00:10:24,760 So take some time to knock all of this out test your work when you're done come back and click play 137 00:10:28,790 --> 00:10:29,780 how'd that go. 138 00:10:29,780 --> 00:10:35,900 I'm gonna kick things off by creating the new file in there we'll create and export the new router so 139 00:10:35,930 --> 00:10:43,370 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 140 00:10:43,370 --> 00:10:47,540 by loading express in so const express equals. 141 00:10:47,540 --> 00:10:51,130 I'll then go ahead and require the Express library. 142 00:10:51,230 --> 00:10:58,460 And from there we can go ahead and create the new router console router equals new with Express Dot. 143 00:10:58,460 --> 00:11:01,940 Capital R router and last up will export it. 144 00:11:02,090 --> 00:11:05,680 So module dot exports. 145 00:11:05,730 --> 00:11:07,100 Exporting the new router. 146 00:11:07,110 --> 00:11:12,990 We've just created so it's the same barebones structure as the other file we define now. 147 00:11:12,990 --> 00:11:18,120 Next up we want to go ahead and move all of the task routes to that new location. 148 00:11:18,120 --> 00:11:21,450 So I'll start right here with app and Dot post. 149 00:11:21,450 --> 00:11:24,670 Then I'll go all the way down to the app dot delete call. 150 00:11:24,750 --> 00:11:27,890 I'll copy all of that and cut it out of the file. 151 00:11:27,900 --> 00:11:34,560 Now I have a 26 line file and most of that is the challenge comment so we can take everything that we 152 00:11:34,560 --> 00:11:41,730 just copied to the clipboard and I can bring that over to task not J S I'll paste it all right here 153 00:11:41,930 --> 00:11:45,290 and all we have to do is make a few small adjustments. 154 00:11:45,300 --> 00:11:51,190 First up I am going to need to load the task model in since I'm making heavy use of that. 155 00:11:51,270 --> 00:11:59,460 So const task equals will call require requiring the following file dot dot forward slash models forward 156 00:11:59,460 --> 00:12:07,860 slash task and the only other thing we need to do is change app calls over to Router calls app no longer 157 00:12:07,860 --> 00:12:09,780 exists router does. 158 00:12:09,780 --> 00:12:16,040 So I'll change it in all five locations one for each route we have defined in this file. 159 00:12:16,080 --> 00:12:22,350 Now once that's done this file is complete it creates the new router it sets up all of the task routes 160 00:12:22,530 --> 00:12:25,800 and it exports the router over an index not J. 161 00:12:25,810 --> 00:12:31,880 Yes we can move on to Step number three which is to load it in and actually use it. 162 00:12:31,890 --> 00:12:35,100 Now here we're loading in user and task our models. 163 00:12:35,190 --> 00:12:40,640 Those are no longer used in this file so we can actually delete them as they're unnecessary. 164 00:12:40,680 --> 00:12:49,560 Right here we can go ahead and grab that task router so const task router equals I'll use require once 165 00:12:49,560 --> 00:12:54,270 again dot forward slash routers forward slash task. 166 00:12:54,270 --> 00:13:02,790 And with that in place we can call app dot use app dot use passing in the following the task router. 167 00:13:02,850 --> 00:13:03,510 Perfect. 168 00:13:03,570 --> 00:13:09,620 Last up let's go ahead and delete the challenge comments and we're gonna go ahead and save the file. 169 00:13:09,630 --> 00:13:15,090 We've done all of those steps up to testing our work with the files saved. 170 00:13:15,090 --> 00:13:19,830 We can now make sure that everything works as expected over here in post man. 171 00:13:19,860 --> 00:13:25,110 I'll navigate over to read tasks and fire that off and what do I get right here. 172 00:13:25,110 --> 00:13:29,550 I get a two hundred status code and I have my one task showing up. 173 00:13:29,670 --> 00:13:36,360 I could go ahead and copy that I.D. to the clipboard and bring it over to another request like the read 174 00:13:36,420 --> 00:13:37,790 task request. 175 00:13:37,980 --> 00:13:44,310 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 176 00:13:44,370 --> 00:13:46,250 data down below. 177 00:13:46,260 --> 00:13:47,880 So now what do we have. 178 00:13:47,880 --> 00:13:51,390 We have an index J.S. file which doesn't do a whole lot. 179 00:13:51,420 --> 00:13:52,880 And that's a good thing. 180 00:13:52,980 --> 00:13:59,100 Instead of having one big file that tries to create the application and define all of the routes we 181 00:13:59,100 --> 00:14:04,670 now have three files index dot J.S. creates the Express app and gets it up and running. 182 00:14:04,860 --> 00:14:10,020 But what the Express app actually does is defined in those router files. 183 00:14:10,020 --> 00:14:11,580 We have two so far. 184 00:14:11,580 --> 00:14:18,090 And if we needed more we could easily add them into the mix allowing us to create a more complex application 185 00:14:18,360 --> 00:14:23,100 without running into a situation where we have everything in a single huge file. 186 00:14:23,100 --> 00:14:28,680 That's where we're gonna stop for this video and that's also where we're gonna stop for this section. 187 00:14:28,680 --> 00:14:34,020 The goal of this section was to get us comfortable with the basics of the rest api. 188 00:14:34,020 --> 00:14:39,780 Now that we have the basics in place we're going to continue on in the next section talking about more 189 00:14:39,780 --> 00:14:42,170 advanced topics and techniques. 190 00:14:42,180 --> 00:14:43,680 I'm excited to get to it. 191 00:14:43,710 --> 00:14:48,030 So let's go ahead and jump right into the section introduction which is coming up now.