1 00:00:02,070 --> 00:00:06,100 So how do we now turn this static site, 2 00:00:06,100 --> 00:00:08,930 which only consists of pre-written HTML, 3 00:00:08,930 --> 00:00:12,030 CSS and JavaScript code into a dynamic site 4 00:00:12,030 --> 00:00:14,060 that's served by app.js? 5 00:00:14,060 --> 00:00:16,680 Well, for this, let's first of all think 6 00:00:16,680 --> 00:00:18,790 about what we wanna do. 7 00:00:18,790 --> 00:00:20,990 In the end, we wanna define a couple 8 00:00:20,990 --> 00:00:23,732 of routes here, a couple of paths 9 00:00:23,732 --> 00:00:26,965 that can be reached with GET requests 10 00:00:26,965 --> 00:00:31,370 for which we wanna return different HTML pages. 11 00:00:31,370 --> 00:00:35,840 Before the HTML pages themselves were the paths 12 00:00:35,840 --> 00:00:37,740 that could be accessed, 13 00:00:37,740 --> 00:00:41,840 now we will just wrap them with these extra routes defined 14 00:00:41,840 --> 00:00:44,930 with app.get but the goal will still be 15 00:00:44,930 --> 00:00:48,775 to, in the end, just return these HTML files. 16 00:00:48,775 --> 00:00:50,820 In a second step later, 17 00:00:50,820 --> 00:00:53,060 we will then turn some of these files 18 00:00:53,060 --> 00:00:55,400 into dynamic templates, 19 00:00:55,400 --> 00:00:57,530 and I'll come back to what that is 20 00:00:57,530 --> 00:01:00,883 but the first step is to just return these files. 21 00:01:02,010 --> 00:01:05,129 And to do that, we can now start 22 00:01:05,129 --> 00:01:07,650 by, first of all, defining the different routes 23 00:01:07,650 --> 00:01:08,713 that we wanna have. 24 00:01:09,690 --> 00:01:12,550 So we already got this root route here 25 00:01:12,550 --> 00:01:15,280 as it's often called for slash nothing 26 00:01:15,280 --> 00:01:17,190 after the domain. 27 00:01:17,190 --> 00:01:19,250 And that could be the route which we use 28 00:01:19,250 --> 00:01:21,380 for serving index.html. 29 00:01:21,380 --> 00:01:24,071 So for serving our starting page. 30 00:01:24,071 --> 00:01:27,470 Then we should have a route for serving a list 31 00:01:27,470 --> 00:01:28,995 of shared restaurants, 32 00:01:28,995 --> 00:01:33,650 a route for letting users share new restaurants. 33 00:01:33,650 --> 00:01:34,620 This route here, 34 00:01:34,620 --> 00:01:37,170 which will actually just show a confirm page 35 00:01:37,170 --> 00:01:39,870 after a restaurant has been shared. 36 00:01:39,870 --> 00:01:42,110 And this about route. 37 00:01:42,110 --> 00:01:44,700 And for this, I'll add a second route here, 38 00:01:44,700 --> 00:01:46,543 again for a get request. 39 00:01:46,543 --> 00:01:50,610 And it's up to you which path you wanna use here 40 00:01:50,610 --> 00:01:53,870 for which path in the URL a certain page 41 00:01:53,870 --> 00:01:54,993 should be displayed. 42 00:01:55,910 --> 00:01:58,000 But let's say we're talking about the list 43 00:01:58,000 --> 00:02:00,110 of restaurants, then indeed, 44 00:02:00,110 --> 00:02:05,020 /restaurants could be a path that makes a lot of sense 45 00:02:05,020 --> 00:02:08,070 because we wanna show a list of restaurants 46 00:02:08,070 --> 00:02:10,930 if the user visits our domain, 47 00:02:10,930 --> 00:02:14,010 so localhost:3000 during development 48 00:02:14,010 --> 00:02:16,090 or later after deployment, 49 00:02:16,090 --> 00:02:19,653 our customdomain.com/restaurants. 50 00:02:21,250 --> 00:02:24,980 And then here therefore, in this function, 51 00:02:24,980 --> 00:02:28,460 we now wanna send back a response as we did before 52 00:02:28,460 --> 00:02:33,200 but this response should actually be this HTML file. 53 00:02:33,200 --> 00:02:35,170 And thankfully that is something 54 00:02:35,170 --> 00:02:38,090 that can easily be done with Express. 55 00:02:38,090 --> 00:02:39,690 Now, to do that, 56 00:02:39,690 --> 00:02:43,670 I'll just restructure my files here a little bit 57 00:02:43,670 --> 00:02:46,280 and I will add a new folder in this project, 58 00:02:46,280 --> 00:02:47,893 which I'll name views. 59 00:02:48,920 --> 00:02:50,700 Now, you don't have to call it views, 60 00:02:50,700 --> 00:02:52,950 but it's a name that's commonly chosen 61 00:02:52,950 --> 00:02:55,570 because this folder should hold the files 62 00:02:55,570 --> 00:02:57,950 that are served to the browser, 63 00:02:57,950 --> 00:03:01,010 the files that contain the HTML content. 64 00:03:01,010 --> 00:03:03,583 And we typically call those files views. 65 00:03:04,450 --> 00:03:07,100 And hence, I'll now grab these HTML files 66 00:03:07,100 --> 00:03:09,080 from the frontend-site folder 67 00:03:09,080 --> 00:03:11,340 and move then into that views folder. 68 00:03:11,340 --> 00:03:13,370 I'll just drag them here into views 69 00:03:14,480 --> 00:03:17,380 so that they're no longer in frontend-site. 70 00:03:17,380 --> 00:03:19,930 For the moment, I'll keep scripts and styles in there 71 00:03:19,930 --> 00:03:22,003 but we'll move those later as well. 72 00:03:23,070 --> 00:03:24,850 But now we got that views folder 73 00:03:24,850 --> 00:03:27,150 with our different HTML files, 74 00:03:27,150 --> 00:03:29,760 and now here in this restaurants route, 75 00:03:29,760 --> 00:03:32,463 I wanna return the restaurants.html file. 76 00:03:33,390 --> 00:03:34,260 Now, as I mentioned, 77 00:03:34,260 --> 00:03:36,910 thankfully Express makes that easy for us 78 00:03:36,910 --> 00:03:39,800 because we have this response object 79 00:03:39,800 --> 00:03:42,480 and we don't just have the send method here 80 00:03:42,480 --> 00:03:45,670 for sending back a response like we're doing it here 81 00:03:45,670 --> 00:03:48,180 with some text content 82 00:03:48,180 --> 00:03:50,893 but we also have the sendFile method. 83 00:03:51,750 --> 00:03:54,470 And you can probably guess what this function does. 84 00:03:54,470 --> 00:03:57,510 It sends back a file as a response. 85 00:03:57,510 --> 00:04:00,690 And actually, it's even a smart method 86 00:04:00,690 --> 00:04:02,660 that will look into the file 87 00:04:02,660 --> 00:04:04,080 and it will basically see 88 00:04:04,080 --> 00:04:06,760 if that file contains HTML content, 89 00:04:06,760 --> 00:04:08,690 and it will then return this file 90 00:04:08,690 --> 00:04:11,360 such that the browser automatically understands 91 00:04:11,360 --> 00:04:15,850 that it receives HTML content and treats it as such. 92 00:04:15,850 --> 00:04:19,029 So if we pass a HTML file to sendFile, 93 00:04:19,029 --> 00:04:20,833 it will work just like that. 94 00:04:21,829 --> 00:04:24,860 Now, the important thing now just is that sendFile 95 00:04:24,860 --> 00:04:27,240 don't just wants the file name, 96 00:04:27,240 --> 00:04:31,350 so we don't just write restaurants.html here, 97 00:04:31,350 --> 00:04:35,160 but we need to provide a full path to that file. 98 00:04:35,160 --> 00:04:38,900 Express won't automatically scan your entire project folder 99 00:04:38,900 --> 00:04:39,903 for that file. 100 00:04:40,920 --> 00:04:43,380 And therefore, we need to construct a path 101 00:04:43,380 --> 00:04:45,030 just as we did it before 102 00:04:45,030 --> 00:04:47,860 in the previous course section as well 103 00:04:47,860 --> 00:04:51,180 with that built-in path package 104 00:04:51,180 --> 00:04:52,980 that can be required like this 105 00:04:52,980 --> 00:04:54,943 and that's built into NodeJS. 106 00:04:56,650 --> 00:05:01,650 With this added, we can build a path to this file, 107 00:05:01,870 --> 00:05:05,290 and then store it in a constant 108 00:05:05,290 --> 00:05:07,417 that could be called htmlFilePath. 109 00:05:08,930 --> 00:05:11,980 And we then call the join method here again, 110 00:05:11,980 --> 00:05:14,870 and start with __dirname 111 00:05:14,870 --> 00:05:17,963 to get the absolute path to this project folder. 112 00:05:18,820 --> 00:05:23,820 And then views to dive into that views sub folder. 113 00:05:24,580 --> 00:05:27,620 And then as a third and last parameter value, 114 00:05:27,620 --> 00:05:32,273 the file name, which is restaurants.html like this. 115 00:05:33,980 --> 00:05:37,090 And now we've got this htmlFilePath here 116 00:05:37,090 --> 00:05:40,333 and that's what now should be sent back as a file. 117 00:05:41,580 --> 00:05:44,020 And that should be all. 118 00:05:44,020 --> 00:05:45,973 If I now save that, 119 00:05:46,820 --> 00:05:49,080 the server automatically restarts 120 00:05:49,080 --> 00:05:51,750 because we have nodemon up and running, 121 00:05:51,750 --> 00:05:55,230 and if we now go to localhost:3000 122 00:05:55,230 --> 00:05:57,710 and enter /restaurants here, 123 00:05:57,710 --> 00:06:00,920 then we see the restaurants.html file 124 00:06:00,920 --> 00:06:03,750 for the moment without any styles 125 00:06:03,750 --> 00:06:05,910 because these styles here, 126 00:06:05,910 --> 00:06:07,990 which are still in frontend-site 127 00:06:07,990 --> 00:06:09,687 aren't loaded correctly 128 00:06:09,687 --> 00:06:13,920 for one because the link here 129 00:06:13,920 --> 00:06:17,420 in restaurants.html is not valid anymore. 130 00:06:17,420 --> 00:06:19,750 This link seen relative 131 00:06:19,750 --> 00:06:22,890 from the restaurants.html file is not correct. 132 00:06:22,890 --> 00:06:25,210 It would look for a styles sub folder 133 00:06:25,210 --> 00:06:27,570 in the views folder, which doesn't exist. 134 00:06:27,570 --> 00:06:30,980 But even if you would move your styles over to views, 135 00:06:30,980 --> 00:06:32,430 it wouldn't work. 136 00:06:32,430 --> 00:06:34,880 If I do that, then theoretically, 137 00:06:34,880 --> 00:06:38,090 this link here in restaurants.html is correct. 138 00:06:38,090 --> 00:06:39,780 It points at a styles folder, 139 00:06:39,780 --> 00:06:43,490 which sits next to the HTML file, which is the case. 140 00:06:43,490 --> 00:06:45,930 And then to the restaurants.css file 141 00:06:45,930 --> 00:06:48,400 but still with that change made, if I reload, 142 00:06:48,400 --> 00:06:50,500 it still wouldn't work. 143 00:06:50,500 --> 00:06:54,390 And it wouldn't work because if we open the developer tools, 144 00:06:54,390 --> 00:06:58,990 in the Network tab, we see that loading this CSS file 145 00:06:58,990 --> 00:07:00,700 in the end fails. 146 00:07:00,700 --> 00:07:03,890 It fails, it's not working. 147 00:07:03,890 --> 00:07:05,510 And we'll fix this soon 148 00:07:05,510 --> 00:07:07,820 but for the moment, the most important thing 149 00:07:07,820 --> 00:07:12,210 is that this is how we can return HTML files. 150 00:07:12,210 --> 00:07:15,203 And with that, we already got a great improvement 151 00:07:15,203 --> 00:07:16,610 because with that, 152 00:07:16,610 --> 00:07:19,090 we don't have to write our HTML code 153 00:07:19,090 --> 00:07:21,170 in strings as we did it before, 154 00:07:21,170 --> 00:07:24,040 but we can use regular HTML files 155 00:07:24,040 --> 00:07:26,280 with all the features we learned about 156 00:07:26,280 --> 00:07:28,300 and it just works, 157 00:07:28,300 --> 00:07:31,330 except for the styles which we'll fix soon. 158 00:07:31,330 --> 00:07:33,820 Now, therefore, my challenge for you 159 00:07:33,820 --> 00:07:38,220 is to now also migrate all these other HTML files, 160 00:07:38,220 --> 00:07:40,470 choose some fitting route paths 161 00:07:40,470 --> 00:07:42,940 and send back those files, 162 00:07:42,940 --> 00:07:44,350 and then in the next step, 163 00:07:44,350 --> 00:07:47,293 we'll ensure that styles and scripts work again. 164 00:07:50,530 --> 00:07:52,410 So did you succeed? 165 00:07:52,410 --> 00:07:54,323 Let's now do that together. 166 00:07:55,160 --> 00:07:58,380 Now, for that, I need to register more routes 167 00:07:58,380 --> 00:08:02,610 and also rewrite this root route here for slash nothing, 168 00:08:02,610 --> 00:08:04,170 and I'll start with that. 169 00:08:04,170 --> 00:08:07,290 There I wanna send back the index.html file, 170 00:08:07,290 --> 00:08:10,760 and therefore, I'll also construct the filePath here 171 00:08:10,760 --> 00:08:12,490 as I did it before. 172 00:08:12,490 --> 00:08:14,840 Hence I'll just copy that code. 173 00:08:14,840 --> 00:08:17,777 But I wanna load index.html. 174 00:08:17,777 --> 00:08:21,450 And then, of course, here I also just send back a file 175 00:08:21,450 --> 00:08:24,937 and the file I wanna send back is htmlFilePath. 176 00:08:26,802 --> 00:08:27,635 And that's not all though, 177 00:08:27,635 --> 00:08:30,520 I will now also copy the restaurants route 178 00:08:30,520 --> 00:08:35,197 and register one route here for recommend. 179 00:08:37,200 --> 00:08:39,830 So for this recommend route here 180 00:08:39,830 --> 00:08:44,203 where I send back recommend.html. 181 00:08:45,710 --> 00:08:49,000 And then I will also copy that again 182 00:08:49,000 --> 00:08:51,610 and register my confirm route 183 00:08:51,610 --> 00:08:56,403 where I send back confirm, oops, confirm.html. 184 00:08:58,060 --> 00:08:59,400 And then, last but not least, 185 00:08:59,400 --> 00:09:00,870 we have the about route, 186 00:09:00,870 --> 00:09:05,853 so I'll add /about and send back about.html. 187 00:09:08,420 --> 00:09:10,590 Now, that's all nice. 188 00:09:10,590 --> 00:09:13,440 One additional change that needs to be made 189 00:09:13,440 --> 00:09:16,390 is now in the HTML files. 190 00:09:16,390 --> 00:09:18,420 There, I've got a couple of links. 191 00:09:18,420 --> 00:09:20,093 For example, in the navigation. 192 00:09:20,950 --> 00:09:24,260 At the moment, I'm still linking to the HTML files here 193 00:09:24,260 --> 00:09:26,430 and that's not correct anymore. 194 00:09:26,430 --> 00:09:30,780 That was correct when we basically served the static files 195 00:09:30,780 --> 00:09:33,330 where the HTML files themselves 196 00:09:33,330 --> 00:09:36,920 were the different paths that we could enter. 197 00:09:36,920 --> 00:09:38,800 Now we get a custom server 198 00:09:38,800 --> 00:09:42,880 that expects paths like this, /confirm, /about, 199 00:09:42,880 --> 00:09:45,283 not HTML file names. 200 00:09:47,820 --> 00:09:50,450 And therefore, we should adjust these different links 201 00:09:50,450 --> 00:09:53,250 and instead of linking to restaurants.html, 202 00:09:53,250 --> 00:09:55,153 we should ink to /restaurants. 203 00:09:56,420 --> 00:09:58,990 The leading slash here is important, by the way, 204 00:09:58,990 --> 00:10:01,960 since this will generate an absolute path, 205 00:10:01,960 --> 00:10:05,010 which means that this will always be appended directly 206 00:10:05,010 --> 00:10:06,283 after the domain. 207 00:10:07,880 --> 00:10:11,620 Even if we already are on a route like /recommend, 208 00:10:11,620 --> 00:10:16,160 it would replace /recommend with /restaurants. 209 00:10:16,160 --> 00:10:19,670 If you only had restaurants here without a slash, 210 00:10:19,670 --> 00:10:23,310 if you would be viewing the recommend page at the moment, 211 00:10:23,310 --> 00:10:27,210 then this would be appended after /recommend. 212 00:10:27,210 --> 00:10:29,980 It would be treated as a relative path seen 213 00:10:29,980 --> 00:10:32,360 from the page you're currently on. 214 00:10:32,360 --> 00:10:34,020 And that's not what we want here, 215 00:10:34,020 --> 00:10:36,273 hence the leading slash is important. 216 00:10:37,470 --> 00:10:39,990 And then here we have /recommend 217 00:10:39,990 --> 00:10:43,323 and here we, of course, have /about. 218 00:10:44,560 --> 00:10:46,920 And now we'll have to repeat it a couple of times. 219 00:10:46,920 --> 00:10:48,470 Here on the logo, by the way, 220 00:10:48,470 --> 00:10:52,090 it's just slash to go back to the starting page. 221 00:10:52,090 --> 00:10:54,670 And we have to repeat this. 222 00:10:54,670 --> 00:10:56,750 Also here in the mobile navigation 223 00:10:56,750 --> 00:10:59,210 where we go to /restaurants 224 00:10:59,210 --> 00:11:03,080 and then here /recommend, 225 00:11:03,080 --> 00:11:06,163 and then here to /about. 226 00:11:07,230 --> 00:11:10,580 And we'll have to do this in all the HTML files. 227 00:11:10,580 --> 00:11:13,260 Thankfully, the structure's always the same though 228 00:11:13,260 --> 00:11:15,620 so we can just copy this aside 229 00:11:15,620 --> 00:11:18,330 and then here this header, 230 00:11:18,330 --> 00:11:22,290 so we can copy all of that like this, 231 00:11:22,290 --> 00:11:24,940 and then just go to recommend.html 232 00:11:24,940 --> 00:11:28,140 and just replace the header 233 00:11:28,140 --> 00:11:30,793 and aside with that. 234 00:11:32,770 --> 00:11:35,510 And then on index.html, it's the same. 235 00:11:35,510 --> 00:11:40,310 Here we can replace header and aside with that. 236 00:11:40,310 --> 00:11:43,170 And if that seems a bit cumbersome and annoying, 237 00:11:43,170 --> 00:11:45,070 it is and we'll find a better way 238 00:11:45,070 --> 00:11:48,173 of handling this a little bit later in this module. 239 00:11:49,170 --> 00:11:50,680 Now, here on index.html, 240 00:11:50,680 --> 00:11:53,640 we also wanna go to these links down there 241 00:11:53,640 --> 00:11:55,600 in this actions unordered list 242 00:11:55,600 --> 00:11:58,750 and also point at /restaurants here 243 00:11:58,750 --> 00:12:02,290 and /recommend here. 244 00:12:02,290 --> 00:12:04,660 And then we go to confirm.html 245 00:12:04,660 --> 00:12:07,960 and also replace the header and aside here 246 00:12:07,960 --> 00:12:11,030 with our updated header and aside. 247 00:12:11,030 --> 00:12:13,900 And do the same in about.html. 248 00:12:13,900 --> 00:12:16,563 Replace header and aside. 249 00:12:18,450 --> 00:12:21,430 If you do all of that and you save everything, 250 00:12:21,430 --> 00:12:23,330 if you reload, it should still work 251 00:12:23,330 --> 00:12:26,110 and you should be able to use these links, 252 00:12:26,110 --> 00:12:28,920 and as you see, even though the styling is missing, 253 00:12:28,920 --> 00:12:30,540 the pages do change. 254 00:12:30,540 --> 00:12:34,360 If I manually enter /confirm, that also works. 255 00:12:34,360 --> 00:12:36,260 We see this confirmation page. 256 00:12:36,260 --> 00:12:41,260 And hence now we did successfully migrate our HTML files 257 00:12:41,830 --> 00:12:43,870 to this Node Express backend 258 00:12:43,870 --> 00:12:47,250 because we are now using Node and Express 259 00:12:47,250 --> 00:12:50,440 for serving these HTML files. 260 00:12:50,440 --> 00:12:53,830 Now let's make sure that we can also serve these styles 261 00:12:53,830 --> 00:12:55,423 and scripts again.