1 00:00:02,050 --> 00:00:03,680 So now we'll move on to one 2 00:00:03,680 --> 00:00:06,920 of the main topics of this course section. 3 00:00:06,920 --> 00:00:09,950 We want to generate HTML content dynamically 4 00:00:09,950 --> 00:00:11,370 on the server site, 5 00:00:11,370 --> 00:00:14,730 but not as we did it before in our JavaScript code, 6 00:00:14,730 --> 00:00:18,120 but instead we want to use a feature called templates 7 00:00:18,120 --> 00:00:19,270 where we in the end, 8 00:00:19,270 --> 00:00:24,270 we'll be able to write regular HTML code in HTML files 9 00:00:24,440 --> 00:00:25,630 with a twist, 10 00:00:25,630 --> 00:00:28,400 with some dynamic placeholders 11 00:00:28,400 --> 00:00:31,040 inside of the HTML file in the end. 12 00:00:31,040 --> 00:00:34,600 To get the best of both worlds, HTML files, 13 00:00:34,600 --> 00:00:38,053 but with content that can be generated on the server. 14 00:00:39,070 --> 00:00:41,870 And that is a feature that is so important 15 00:00:41,870 --> 00:00:43,410 for so many websites, 16 00:00:43,410 --> 00:00:46,290 basically any website that has dynamic data 17 00:00:46,290 --> 00:00:49,850 like a online shop, a social network, 18 00:00:49,850 --> 00:00:52,690 any page of that kind will have dynamic data 19 00:00:52,690 --> 00:00:54,110 and therefore templates 20 00:00:54,110 --> 00:00:56,240 and this feature of having templates, 21 00:00:56,240 --> 00:00:59,770 that's something which is used by a lot of websites. 22 00:00:59,770 --> 00:01:02,520 Hence it's officially supported by Express, 23 00:01:02,520 --> 00:01:05,250 and it's very easy to use there. 24 00:01:05,250 --> 00:01:07,270 Now for this, it's important to understand 25 00:01:07,270 --> 00:01:09,760 that there are different template engines 26 00:01:09,760 --> 00:01:11,190 that you can use. 27 00:01:11,190 --> 00:01:14,740 Because templates are in the end HTML files 28 00:01:14,740 --> 00:01:16,840 with some placeholders 29 00:01:16,840 --> 00:01:20,910 and some special syntax inside of the HTML code, 30 00:01:20,910 --> 00:01:22,940 and different template engines 31 00:01:22,940 --> 00:01:27,540 simply use different syntaxes, different languages, 32 00:01:27,540 --> 00:01:29,810 that they define themselves, 33 00:01:29,810 --> 00:01:30,980 which might sound cryptic, 34 00:01:30,980 --> 00:01:33,110 but it will become clear. 35 00:01:33,110 --> 00:01:34,080 In case of Express, 36 00:01:34,080 --> 00:01:36,870 we got a couple of popular template engines, 37 00:01:36,870 --> 00:01:38,900 and one of the most popular ones 38 00:01:38,900 --> 00:01:41,480 is an engine called EJS, 39 00:01:41,480 --> 00:01:43,070 which is a extra package, 40 00:01:43,070 --> 00:01:46,580 we now need to install into this project. 41 00:01:46,580 --> 00:01:49,720 And for this I'll quick start running node mon server, 42 00:01:49,720 --> 00:01:53,300 which you should do whenever you install and you package 43 00:01:53,300 --> 00:01:56,150 by pressing control-C here, 44 00:01:56,150 --> 00:01:59,970 and then I'll run NPM install to install a new package, 45 00:01:59,970 --> 00:02:02,023 and the package name is ejs. 46 00:02:03,170 --> 00:02:04,900 Now, if you search for EJS, 47 00:02:04,900 --> 00:02:06,940 you'll find it's official page 48 00:02:06,940 --> 00:02:11,360 where you can learn more about it and about its syntax. 49 00:02:11,360 --> 00:02:15,120 And you'll also find this NPM page for EJS 50 00:02:15,120 --> 00:02:16,400 where you can also learn more 51 00:02:16,400 --> 00:02:18,100 about this package we're installing, 52 00:02:18,100 --> 00:02:21,203 which is that templating package we install. 53 00:02:22,060 --> 00:02:24,840 And here you see how that general syntax 54 00:02:24,840 --> 00:02:26,640 will look like and what you can do, 55 00:02:26,640 --> 00:02:27,473 but of course, 56 00:02:27,473 --> 00:02:30,210 we're going to learn that step-by-step in this course 57 00:02:30,210 --> 00:02:31,410 and in this section now. 58 00:02:32,370 --> 00:02:35,610 So NPM install EJS is what we want to execute. 59 00:02:35,610 --> 00:02:37,010 This will download it, 60 00:02:37,010 --> 00:02:40,050 add it as a dependency in package.json 61 00:02:40,050 --> 00:02:42,710 and in the node modules folder. 62 00:02:42,710 --> 00:02:44,140 And with it installed, 63 00:02:44,140 --> 00:02:46,160 we can go back to app.js 64 00:02:46,160 --> 00:02:50,810 to our node express application file, 65 00:02:50,810 --> 00:02:54,553 and also restart our server with npm start. 66 00:02:55,920 --> 00:03:00,920 And in app.js, we can now set a templating engine. 67 00:03:01,000 --> 00:03:02,510 We can now tell express 68 00:03:02,510 --> 00:03:04,580 that we want to use a templating engine 69 00:03:04,580 --> 00:03:06,573 and which engine that is. 70 00:03:07,850 --> 00:03:10,490 And doing that is quite straightforward 71 00:03:10,490 --> 00:03:11,550 because as I said, 72 00:03:11,550 --> 00:03:14,543 it's a feature that is already built into express. 73 00:03:15,520 --> 00:03:17,520 We do it on this app object, 74 00:03:17,520 --> 00:03:21,130 typically as the first thing after creating the object 75 00:03:21,130 --> 00:03:23,363 by calling this express function. 76 00:03:24,860 --> 00:03:27,300 And here on app, 77 00:03:27,300 --> 00:03:30,470 we can now call a set method. 78 00:03:30,470 --> 00:03:33,100 Now set is a method we haven't used before, 79 00:03:33,100 --> 00:03:37,210 it's a method that allows us to set certain options 80 00:03:37,210 --> 00:03:39,340 for this express app. 81 00:03:39,340 --> 00:03:42,330 And here we want to set two options. 82 00:03:42,330 --> 00:03:46,010 The first option is the view engine option 83 00:03:46,010 --> 00:03:48,060 with that we in the end tell express 84 00:03:48,060 --> 00:03:50,300 that we want to use a special engine, 85 00:03:50,300 --> 00:03:52,420 a so-called template engine 86 00:03:52,420 --> 00:03:56,150 for processing our view files 87 00:03:56,150 --> 00:03:58,880 before we sent them back as HTML. 88 00:03:58,880 --> 00:04:00,570 And then as a second argument, 89 00:04:00,570 --> 00:04:02,480 we now pass the name of that engine 90 00:04:02,480 --> 00:04:05,390 and in our case, that's ejs now, 91 00:04:05,390 --> 00:04:06,810 if you use a different engine, 92 00:04:06,810 --> 00:04:08,010 this will be a different name, 93 00:04:08,010 --> 00:04:09,400 but we install EJS, 94 00:04:09,400 --> 00:04:11,063 so that's the name we use. 95 00:04:12,460 --> 00:04:16,100 Now, we also need to set one other option for express, 96 00:04:16,100 --> 00:04:18,649 and we typically do that before setting the view engine, 97 00:04:18,649 --> 00:04:21,870 and that is the views setting. 98 00:04:21,870 --> 00:04:23,900 Now with that we want to let express 99 00:04:23,900 --> 00:04:27,470 know where it will find our template files 100 00:04:27,470 --> 00:04:30,720 that we want to process with that templating engine. 101 00:04:30,720 --> 00:04:32,570 Now, the option we want to set 102 00:04:32,570 --> 00:04:35,020 that is understood by express is views 103 00:04:35,020 --> 00:04:38,190 just as the option name here was view engine, 104 00:04:38,190 --> 00:04:40,820 so these are not names that are up to you, 105 00:04:40,820 --> 00:04:43,230 these are names understood by express, 106 00:04:43,230 --> 00:04:45,920 reserved names so to say. 107 00:04:45,920 --> 00:04:49,530 The second value here then is the value for that option. 108 00:04:49,530 --> 00:04:52,570 And that should be a path to the folder 109 00:04:52,570 --> 00:04:55,560 that contains your template files. 110 00:04:55,560 --> 00:04:57,800 At the moment, we got no template files, 111 00:04:57,800 --> 00:05:00,500 but I plan on storing them in the views folder, 112 00:05:00,500 --> 00:05:03,350 which currently holds the HTML files, 113 00:05:03,350 --> 00:05:05,100 and hence here I'll create a path 114 00:05:05,100 --> 00:05:07,800 with the good old path join method, 115 00:05:07,800 --> 00:05:10,740 where we use dirname and then views. 116 00:05:10,740 --> 00:05:15,520 Here views refers to this views folder name, 117 00:05:15,520 --> 00:05:18,773 so that's the relation we got here. 118 00:05:21,310 --> 00:05:23,310 Now with these two options set, 119 00:05:23,310 --> 00:05:28,310 we unlock this templating feature built into express. 120 00:05:29,950 --> 00:05:31,620 And now of course it will be interesting 121 00:05:31,620 --> 00:05:33,593 to see how that feature works. 122 00:05:34,560 --> 00:05:35,710 Well, first of all, 123 00:05:35,710 --> 00:05:38,830 we'll have to rename all these HTML files, 124 00:05:38,830 --> 00:05:42,060 since we now want to convert them into templates 125 00:05:42,060 --> 00:05:44,900 that can be handled by EJS. 126 00:05:44,900 --> 00:05:49,900 And we can simply do that by replacing .html with ejs. 127 00:05:52,130 --> 00:05:54,750 We can still have HTML code in there 128 00:05:54,750 --> 00:05:57,300 because the idea behind a templating engine 129 00:05:57,300 --> 00:06:01,460 like EJS is that it generates HTML code 130 00:06:01,460 --> 00:06:04,910 and therefore HTML code as a input is allowed. 131 00:06:04,910 --> 00:06:08,330 Hence we don't need to change the content of those files, 132 00:06:08,330 --> 00:06:11,163 but we need to change all those extensions. 133 00:06:12,430 --> 00:06:16,840 Just like that here in all those places, 134 00:06:16,840 --> 00:06:21,030 replacing .html with .ejs, 135 00:06:21,030 --> 00:06:22,850 with that we make it very clear 136 00:06:22,850 --> 00:06:27,850 that these are templates that should be passed by ejs. 137 00:06:27,920 --> 00:06:29,640 Now that's step number one, 138 00:06:29,640 --> 00:06:34,250 step number two now takes place in our routes, 139 00:06:34,250 --> 00:06:37,310 instead of creating a file path here 140 00:06:37,310 --> 00:06:39,930 and sending back a file manually, 141 00:06:39,930 --> 00:06:44,490 we can now replace this code here in get slash nothing 142 00:06:44,490 --> 00:06:47,950 with res.render, 143 00:06:47,950 --> 00:06:51,860 render is another method available on this response object, 144 00:06:51,860 --> 00:06:55,810 and its job is to render a so-called template, 145 00:06:55,810 --> 00:06:58,680 which means pass a template file 146 00:06:58,680 --> 00:07:00,910 with help of a template engine 147 00:07:00,910 --> 00:07:02,910 and convert it to HTML, 148 00:07:02,910 --> 00:07:05,393 which then will be sent back to the browser. 149 00:07:06,520 --> 00:07:07,850 And we can use this method 150 00:07:07,850 --> 00:07:10,600 because we registered view engine, 151 00:07:10,600 --> 00:07:12,970 a template engine, as we called it thus far, 152 00:07:12,970 --> 00:07:16,480 and hence render will know that it should use EJS 153 00:07:16,480 --> 00:07:19,120 for passing a template file 154 00:07:19,120 --> 00:07:21,560 that can be found in this views folder 155 00:07:21,560 --> 00:07:26,020 and for then getting some HTML content as a response, 156 00:07:26,020 --> 00:07:28,390 or as a result of that passing 157 00:07:28,390 --> 00:07:30,480 and that it should then send back 158 00:07:30,480 --> 00:07:34,133 that generated HTML content as a response. 159 00:07:35,280 --> 00:07:36,560 So long story short, 160 00:07:36,560 --> 00:07:38,290 all we got to do now here 161 00:07:38,290 --> 00:07:41,080 is pass in the name of the template 162 00:07:41,080 --> 00:07:45,490 that should be passed and sent back for this route. 163 00:07:45,490 --> 00:07:46,510 And for this route, 164 00:07:46,510 --> 00:07:48,740 this will be index ejs, 165 00:07:48,740 --> 00:07:51,280 so we pass in just index, 166 00:07:51,280 --> 00:07:53,440 we omit the file extension here, 167 00:07:53,440 --> 00:07:56,450 because since we use ejs as a view engine, 168 00:07:56,450 --> 00:08:00,113 it will automatically look for .ejs files. 169 00:08:02,150 --> 00:08:03,600 And that's all, 170 00:08:03,600 --> 00:08:05,710 and therefore, as an extra benefit, 171 00:08:05,710 --> 00:08:07,550 we now don't have to construct 172 00:08:07,550 --> 00:08:10,030 their path again and again and again, 173 00:08:10,030 --> 00:08:13,230 instead in all our routes, 174 00:08:13,230 --> 00:08:15,540 we can now just call res.render, 175 00:08:15,540 --> 00:08:20,390 and pass back our .ejs files without the extension. 176 00:08:20,390 --> 00:08:21,810 So for slash restaurants, 177 00:08:21,810 --> 00:08:26,403 it's restaurants pointing at this restaurants ejs file, 178 00:08:27,390 --> 00:08:31,290 for slash recommend it's res.render, 179 00:08:31,290 --> 00:08:32,820 and then recommend pointing 180 00:08:32,820 --> 00:08:35,900 at the recommend ejs file and zone. 181 00:08:35,900 --> 00:08:37,820 For the post route nothing changes, 182 00:08:37,820 --> 00:08:40,010 there I still want to redirect, 183 00:08:40,010 --> 00:08:41,640 but here for confirm, 184 00:08:41,640 --> 00:08:46,640 it's now also rest.render confirm like that, 185 00:08:47,540 --> 00:08:49,870 and for about it's of course the same 186 00:08:49,870 --> 00:08:54,483 there it's all the res.render about. 187 00:08:56,270 --> 00:09:00,260 So we now have way more concise and shorter code. 188 00:09:00,260 --> 00:09:02,490 And if we now save everything 189 00:09:02,490 --> 00:09:04,760 and we go back here, 190 00:09:04,760 --> 00:09:08,050 all these pages should still work just fine. 191 00:09:08,050 --> 00:09:10,840 So that should all work as before, 192 00:09:10,840 --> 00:09:13,220 but now the HTML content, 193 00:09:13,220 --> 00:09:15,280 which is received by the browser 194 00:09:15,280 --> 00:09:17,410 is actually generated dynamically 195 00:09:17,410 --> 00:09:20,910 with help of that templating engine on the server. 196 00:09:20,910 --> 00:09:23,190 And if you're wondering why that is helpful, 197 00:09:23,190 --> 00:09:24,970 well that's now the next step, 198 00:09:24,970 --> 00:09:27,770 because now with help of that templating engine, 199 00:09:27,770 --> 00:09:32,560 we will be able to inject logic and dynamic content 200 00:09:32,560 --> 00:09:35,950 into these files so that the actual HTML file 201 00:09:35,950 --> 00:09:38,110 or the actual HTML content 202 00:09:38,110 --> 00:09:40,700 can be generated dynamically on the server, 203 00:09:40,700 --> 00:09:43,233 and can therefore change over time.