1 00:00:00,530 --> 00:00:05,220 Now that we've hit a milestone with our application I think that this is probably a good place where 2 00:00:05,220 --> 00:00:09,340 we can start to refactor the code inside of our index file. 3 00:00:09,360 --> 00:00:13,860 So remember we had said that we were going to stuff all of our passport stuff in here right now and 4 00:00:13,860 --> 00:00:17,210 then later refactor it out to a couple of different files and folders. 5 00:00:17,280 --> 00:00:20,140 And so that's what we're going to be doing inside this section. 6 00:00:20,190 --> 00:00:25,860 Now before we do this I want to mention that there's really not a great convention in the Express community 7 00:00:26,070 --> 00:00:27,910 on how to structure projects. 8 00:00:28,140 --> 00:00:30,930 So I want to show you one possible way of doing this. 9 00:00:30,960 --> 00:00:32,960 I'm not going to claim that it's the best way. 10 00:00:32,970 --> 00:00:36,600 I'm just going to say that it's a way that's going to work very well for us. 11 00:00:36,990 --> 00:00:42,030 So let's take a look at a diagram that can help us understand how we're going to organize our project. 12 00:00:42,030 --> 00:00:44,220 So we've got our overall server directory. 13 00:00:44,370 --> 00:00:50,130 We already have a config a whole folder which is going to hold all of our API keys and maybe any other 14 00:00:50,130 --> 00:00:53,700 settings or configuration information that we might need. 15 00:00:53,700 --> 00:00:56,450 We're then going to add in two additional folders. 16 00:00:56,610 --> 00:01:03,000 The first one will be the route's folder which will have one file for each gen set or a group of routes 17 00:01:03,000 --> 00:01:04,040 that we have. 18 00:01:04,440 --> 00:01:10,320 Right now we have two handlers inside of our index jazz file and they both have something to do with 19 00:01:10,320 --> 00:01:11,490 authentication. 20 00:01:11,490 --> 00:01:17,310 And so I think that we probably have a single file inside of our routes folder to handle both of these 21 00:01:17,520 --> 00:01:22,310 handlers because they are very similar in function. 22 00:01:22,320 --> 00:01:28,340 Next we will also create a services directory which will house a bunch of logic that just kind of helps 23 00:01:28,350 --> 00:01:32,550 out our express application or kind of configures it to work the way we expect. 24 00:01:32,550 --> 00:01:37,030 And so in the services directory I would expect to probably have a passport. 25 00:01:37,050 --> 00:01:43,050 JS file where we're going to put in all of our passport configuration like the passport used statement 26 00:01:43,050 --> 00:01:45,920 right here that configures the Google strategy. 27 00:01:46,050 --> 00:01:51,990 Do note that even though this seems like it's very closely related to our route handlers down here really 28 00:01:52,080 --> 00:01:55,970 this block of code is about setting up or configuring passport. 29 00:01:56,130 --> 00:02:00,180 And I kind of view passport as like a service to our application. 30 00:02:00,210 --> 00:02:03,630 Now we're going to have several other folders that we will add over time. 31 00:02:03,690 --> 00:02:09,030 But right now I think that these additional two will help to break up our index not just file it a little 32 00:02:09,030 --> 00:02:09,900 bit. 33 00:02:10,020 --> 00:02:11,040 So let's get to it. 34 00:02:11,070 --> 00:02:13,240 Let's do this refactor. 35 00:02:13,380 --> 00:02:17,750 I'll start off by first creating the controllers are indeed the routes directory. 36 00:02:17,940 --> 00:02:24,570 So make a new folder called routes and then inside of there I'm going to make a file called off routes 37 00:02:24,640 --> 00:02:27,690 that Giants. 38 00:02:27,750 --> 00:02:33,930 So here is auth routes then inside if you're going to find are two route handlers inside of the index 39 00:02:34,410 --> 00:02:35,210 file. 40 00:02:35,490 --> 00:02:41,790 So here's the first one in the second one I'm going to highlight them both and I'm going to cut them 41 00:02:42,480 --> 00:02:48,560 then change over to the new Auth. routes file and paste both of them. 42 00:02:48,590 --> 00:02:53,840 Now we do have to do a couple of require statements in here for stuff like passport and whatnot. 43 00:02:53,840 --> 00:03:00,080 But we will move all of our code around first and then handle all of the updated require statements. 44 00:03:00,080 --> 00:03:05,990 Next we're going to make our services directory so your services and inside of there are going to make 45 00:03:05,990 --> 00:03:12,890 a file called Passport JMS which will Halas all the configuration for passport inside of our application 46 00:03:13,860 --> 00:03:18,940 so I can go back over to our index dot G-S file or find the passport statement. 47 00:03:19,140 --> 00:03:20,640 I'll highlight the whole thing. 48 00:03:20,900 --> 00:03:24,570 I'm going to cut it and then paste it inside of passport. 49 00:03:24,600 --> 00:03:27,190 Yes OK. 50 00:03:27,210 --> 00:03:30,480 So now we'll take care of some of the different require statements. 51 00:03:30,480 --> 00:03:33,510 First off we'll start with the index not file. 52 00:03:33,630 --> 00:03:39,530 Now inside of here really the only require statement that we need at this point is for the express library. 53 00:03:39,690 --> 00:03:44,900 This file no longer makes use of passport or to the real strategy or the keys file. 54 00:03:44,940 --> 00:03:47,810 So I'm going to take all three of these require statements. 55 00:03:47,880 --> 00:03:52,780 I'm going to cut all three of them and I will move all three over to the passport. 56 00:03:52,820 --> 00:03:55,150 J.S. file at the very top. 57 00:03:55,770 --> 00:03:59,090 So here is Passport passports being used right there. 58 00:03:59,250 --> 00:04:04,230 Here's the Google strategy which is being used right there and then Archy's file which has been used 59 00:04:04,230 --> 00:04:05,810 here and here. 60 00:04:06,180 --> 00:04:08,710 Now one more thing to take care of inside this file. 61 00:04:08,790 --> 00:04:14,610 Notice that we have the require statement for keys which looks in the same directory as the current 62 00:04:14,610 --> 00:04:15,690 file. 63 00:04:15,690 --> 00:04:22,410 So now that we've moved this passport file into the services directory that the require statement right 64 00:04:22,410 --> 00:04:29,310 here the path no longer will correctly point to the config file because dot slash right here means look 65 00:04:29,400 --> 00:04:32,970 in the current directory which would be in the services folder. 66 00:04:32,970 --> 00:04:37,050 So to fix that up we're going to add on one more dot like so. 67 00:04:37,050 --> 00:04:43,500 So this is now interpreted as go up one directory into the server folder then into the config folder 68 00:04:43,920 --> 00:04:48,560 and then find the keys G-S file inside of there OK. 69 00:04:49,010 --> 00:04:51,120 So this philes looking pretty good. 70 00:04:51,170 --> 00:04:57,380 There's one last thing to take care of regarding the passport not file though just because we have that 71 00:04:57,380 --> 00:05:03,500 passport taught yes file inside of our server directory does not mean that the file is going to be automatically 72 00:05:03,500 --> 00:05:05,300 loaded up and executed. 73 00:05:05,360 --> 00:05:10,940 So if we ran our server right now nothing inside of the passport file would be executed because we are 74 00:05:10,940 --> 00:05:15,230 not requiring it anywhere into our project structure. 75 00:05:15,230 --> 00:05:21,980 So to make sure that all the configuration inside of that file gets executed and actually ran at by 76 00:05:21,980 --> 00:05:28,550 our server we have to make sure that we require it to at least one location inside of our project. 77 00:05:28,610 --> 00:05:37,000 So in the index file right underneath the require express statement we'll say Konst passport config 78 00:05:37,700 --> 00:05:41,600 equals require go into the services directory. 79 00:05:41,660 --> 00:05:46,970 So dot slash services and then get the passport file. 80 00:05:48,920 --> 00:05:49,280 OK. 81 00:05:49,300 --> 00:05:50,790 Now just one more thing. 82 00:05:51,220 --> 00:05:56,230 Inside the passport file We're not actually exporting any code out of here. 83 00:05:56,260 --> 00:06:01,450 There's nothing in here that says hey make this little function or this object available to some other 84 00:06:01,450 --> 00:06:03,460 location inside of our project. 85 00:06:03,610 --> 00:06:09,820 So we don't really care about requiring the passport dodgiest file and pulling any code out of it. 86 00:06:09,820 --> 00:06:12,910 We just want to make sure that this file is executed. 87 00:06:12,910 --> 00:06:14,590 That's all we care about. 88 00:06:14,630 --> 00:06:18,800 And so the reason this is relevant is that you can see with the required statement right here. 89 00:06:19,060 --> 00:06:25,600 I'm saying require the passport file and then sign anything out of that file to the passport config 90 00:06:25,600 --> 00:06:27,070 variable right here. 91 00:06:27,070 --> 00:06:29,130 But this is not returning anything. 92 00:06:29,140 --> 00:06:32,500 So there is nothing to assign to passport config. 93 00:06:32,800 --> 00:06:37,900 So because we are not actually assigning anything to it we can just condense it down to be a require 94 00:06:37,900 --> 00:06:38,830 statement like so 95 00:06:41,670 --> 00:06:42,090 OK. 96 00:06:42,230 --> 00:06:44,830 So that's it for the passport file. 97 00:06:44,840 --> 00:06:49,630 Now we're going to make sure we take care of the routes not just file as well. 98 00:06:49,640 --> 00:06:52,220 So going to close the passport dodgiest one. 99 00:06:52,400 --> 00:06:54,820 Take a look at the author routes. 100 00:06:55,430 --> 00:06:56,340 Now inside of here. 101 00:06:56,390 --> 00:07:02,160 We're making use of the passport library so we'll make sure that we import passport at the top will 102 00:07:02,180 --> 00:07:11,770 say Khan's passport equals require passport like so so do note that the passport requires it right here. 103 00:07:11,800 --> 00:07:14,970 It has nothing to do with the actual passport. 104 00:07:15,010 --> 00:07:21,940 J.S. config file that we put together in this case we are requiring in the original passport NPM module 105 00:07:21,940 --> 00:07:23,280 right here. 106 00:07:24,160 --> 00:07:24,490 OK. 107 00:07:24,490 --> 00:07:27,300 So one other big change that we need to make inside of here. 108 00:07:27,370 --> 00:07:30,790 If you look at these two route handlers so we set up. 109 00:07:30,910 --> 00:07:35,230 You'll notice that both of them are working on the Express app object. 110 00:07:35,230 --> 00:07:38,580 So here is apt get an apt get. 111 00:07:38,630 --> 00:07:43,540 However we do not define the app object inside of this file. 112 00:07:43,540 --> 00:07:48,150 Instead the app object is defined over here inside of index. 113 00:07:48,250 --> 00:07:49,090 Yes. 114 00:07:49,540 --> 00:07:53,020 So we're going to use a little trick to get this thing to work correctly. 115 00:07:53,050 --> 00:08:00,340 We need to make sure that this app object somehow makes its way into the Author outs file and gets these 116 00:08:00,340 --> 00:08:01,820 routes attached to it. 117 00:08:01,830 --> 00:08:03,390 So that's the challenge here. 118 00:08:03,520 --> 00:08:06,200 So here's here's the trick Here's what we're going to do. 119 00:08:06,310 --> 00:08:12,120 The first thing we're going to do is create a new Arrow function and export it from this file. 120 00:08:12,190 --> 00:08:13,990 So I will say module. 121 00:08:14,050 --> 00:08:17,930 Exports equals an arrow function. 122 00:08:18,280 --> 00:08:23,760 And then as the body of the function I'm going to wrap both of our route handlers. 123 00:08:24,070 --> 00:08:28,340 So here's the opening curly brace and a closing down here at the bottom. 124 00:08:28,660 --> 00:08:33,580 And then I will indent the entire function body like so. 125 00:08:33,710 --> 00:08:39,420 So now we are exporting a function from this file. 126 00:08:39,740 --> 00:08:45,300 We are going to assume that we will call this function with our express app object. 127 00:08:45,300 --> 00:08:50,990 So I'm going to add the app as an argument to the function that I need to save this thing and then for 128 00:08:50,980 --> 00:08:56,410 the last step I'm going to change back over to the index js file at the top. 129 00:08:56,500 --> 00:09:02,330 I will import that all routes file so will say. 130 00:09:02,430 --> 00:09:10,580 Our throats equals require routes auth routes. 131 00:09:10,700 --> 00:09:16,550 So now auth routes right here is a function that takes our app object and attaches these two routes 132 00:09:16,550 --> 00:09:17,510 to it. 133 00:09:17,630 --> 00:09:25,160 So as a last step will make sure that we call auth routes with the app object like so. 134 00:09:25,830 --> 00:09:27,550 OK so this is looking good right here. 135 00:09:27,650 --> 00:09:31,360 And we certainly could just leave it here and say that's it we're all done. 136 00:09:31,610 --> 00:09:36,680 But there's one Lassally factor we could do to make this even a little bit more concise. 137 00:09:36,680 --> 00:09:42,890 Notice how we are requiring that function from the author routes file assigning it to the author it's 138 00:09:42,920 --> 00:09:47,030 variable and then immediately calling that function right here. 139 00:09:47,510 --> 00:09:53,150 Well it kind of feels like this author route's function this variable right here is a little bit superfluous. 140 00:09:53,150 --> 00:09:54,670 In other words we don't really need it. 141 00:09:54,680 --> 00:09:56,930 It's really not necessary. 142 00:09:56,960 --> 00:10:00,510 Instead we'll delete that author route's variable. 143 00:10:00,790 --> 00:10:02,010 So going to delete it. 144 00:10:02,390 --> 00:10:04,140 I'm going to delete it down here as well. 145 00:10:04,350 --> 00:10:05,500 And then here's the real trick. 146 00:10:05,510 --> 00:10:07,080 Here's the interesting thing. 147 00:10:07,220 --> 00:10:09,410 I'm going to take the required statement. 148 00:10:09,410 --> 00:10:14,840 I'm going to delete the semi-colon and then I'm going to put the require statement in front of that 149 00:10:14,870 --> 00:10:16,330 app like so. 150 00:10:16,830 --> 00:10:18,190 OK so let's talk about this. 151 00:10:18,260 --> 00:10:20,040 We've got all require statements. 152 00:10:20,180 --> 00:10:25,040 We've got one set of parentheses and then a second set with the app.. 153 00:10:25,310 --> 00:10:31,400 So this is completely valid javascript triger completely valid no problem with it whatsoever when we 154 00:10:31,400 --> 00:10:35,610 require the author route's file it returns a function. 155 00:10:35,720 --> 00:10:40,450 Right because that's what we returned or that's what we exported from that file. 156 00:10:40,460 --> 00:10:42,120 So this requires Steven right here. 157 00:10:42,140 --> 00:10:48,120 Returns a function with an immediately call that function with the AB object. 158 00:10:48,200 --> 00:10:54,890 So the second set of parentheses immediately invokes or immediately calls the function that we just 159 00:10:54,890 --> 00:10:56,310 required in. 160 00:10:56,660 --> 00:11:00,500 So and just the same way the app is passed into that arrow function. 161 00:11:00,500 --> 00:11:06,410 We attach the two handlers to it and the OP is all happy because it got two new routes. 162 00:11:06,410 --> 00:11:07,450 So that's pretty much it. 163 00:11:07,460 --> 00:11:10,380 That's our whole refactor now. 164 00:11:10,400 --> 00:11:13,620 One last thing I want to do to make sure that everything is working correctly. 165 00:11:13,790 --> 00:11:17,760 We're going to change on over to our terminal and make sure that we don't have any errors over there 166 00:11:18,140 --> 00:11:22,160 so we're going to make sure we don't have didn't make any typos or any mistakes. 167 00:11:22,160 --> 00:11:28,370 So over at my server directory or in my server folder I need to start up my server with NPM run Dev 168 00:11:29,660 --> 00:11:31,430 and chances are yours was already running. 169 00:11:31,430 --> 00:11:33,710 I ended mine so whatever. 170 00:11:34,160 --> 00:11:37,320 So at this point I'm able to successfully start up my server. 171 00:11:37,340 --> 00:11:43,100 If you made any typos during that refactor you'll probably see an error message here so it'll say like 172 00:11:43,370 --> 00:11:45,320 hey unknown variables so and so. 173 00:11:45,380 --> 00:11:48,360 So if you see that that means you probably made a typo somewhere. 174 00:11:48,410 --> 00:11:54,000 I really encourage you to read the error message very closely and see if you can't debug the issue. 175 00:11:54,080 --> 00:11:59,000 Now if you tried debugging yourself and you can't figure it out feel free to go over to the discussion 176 00:11:59,000 --> 00:12:04,900 boards and just post and let me know how I can help but remember if you put a thread over there you've 177 00:12:04,970 --> 00:12:11,330 gotta tell me what the areas is so please attach your statement or attach whatever debug information 178 00:12:11,330 --> 00:12:16,010 you're getting over here and then ideally make sure you upload your project to get job as well so I 179 00:12:16,010 --> 00:12:17,490 can look at your code. 180 00:12:18,100 --> 00:12:20,800 OK so that's pretty much it for refactor again. 181 00:12:20,810 --> 00:12:25,790 Over time we will add in a bunch more folders inside of here and we're going to add in a lot more files 182 00:12:25,790 --> 00:12:27,600 to these existing folders as well. 183 00:12:27,800 --> 00:12:34,310 But we've now got a pretty concise indexed J.S. file that we can easily expand over time and keep this 184 00:12:34,310 --> 00:12:37,540 thing nice and light and still legible. 185 00:12:37,880 --> 00:12:40,360 So let's continue in the next section and move on. 186 00:12:40,370 --> 00:12:41,210 In our application.