1 00:00:01,170 --> 00:00:04,190 ‫Let's start by setting up our templating engine 2 00:00:04,190 --> 00:00:06,480 ‫in Express, which will then allow us 3 00:00:06,480 --> 00:00:09,830 ‫to render out websites using simple templates 4 00:00:09,830 --> 00:00:11,333 ‫as we talked about before. 5 00:00:12,660 --> 00:00:14,520 ‫So as you already know by now, 6 00:00:14,520 --> 00:00:16,850 ‫in this part of the course it's now time 7 00:00:16,850 --> 00:00:21,210 ‫to actually send a final rendered website to the client 8 00:00:21,210 --> 00:00:23,200 ‫containing, of course, all the data 9 00:00:23,200 --> 00:00:25,590 ‫that we've been working with up until this point, 10 00:00:25,590 --> 00:00:28,770 ‫like tours, users and reviews. 11 00:00:28,770 --> 00:00:32,970 ‫Now, how do we actually build or render these websites? 12 00:00:32,970 --> 00:00:35,920 ‫Well, we use what's called a template engine 13 00:00:35,920 --> 00:00:38,060 ‫which will allow us to create a template 14 00:00:38,060 --> 00:00:41,610 ‫and then easily fill up that template with our data. 15 00:00:41,610 --> 00:00:43,580 ‫And the template engine that we're going to use 16 00:00:43,580 --> 00:00:46,210 ‫in this course is called pug. 17 00:00:46,210 --> 00:00:48,700 ‫There are a couple of other template engines 18 00:00:48,700 --> 00:00:52,800 ‫like handlebars or EGS for people who don't like pug, 19 00:00:52,800 --> 00:00:56,010 ‫because I know there are some strong opinions around pug, 20 00:00:56,010 --> 00:00:59,160 ‫but I would still say that pug is actually 21 00:00:59,160 --> 00:01:03,190 ‫the most commonly used template engine with Express. 22 00:01:03,190 --> 00:01:05,650 ‫So let's now, in this video, set up pug 23 00:01:05,650 --> 00:01:08,453 ‫and render our very first webpage using it. 24 00:01:09,310 --> 00:01:11,920 ‫The first step is to actually tell Express 25 00:01:11,920 --> 00:01:14,510 ‫what template engine we're gonna use, 26 00:01:14,510 --> 00:01:16,970 ‫and we do that by saying 27 00:01:16,970 --> 00:01:18,920 ‫right at the beginning here of the app, 28 00:01:19,910 --> 00:01:24,050 ‫app.set, so basically this is like a setting 29 00:01:24,050 --> 00:01:29,050 ‫for the view engine, and then we set that to pug. 30 00:01:32,600 --> 00:01:33,910 ‫And that's it. 31 00:01:33,910 --> 00:01:35,850 ‫So Express automatically supports 32 00:01:35,850 --> 00:01:38,320 ‫the most common engines out of the box, 33 00:01:38,320 --> 00:01:40,970 ‫and of course, pug is one of them. 34 00:01:40,970 --> 00:01:43,470 ‫So we actually don't even need to install pug, 35 00:01:43,470 --> 00:01:45,940 ‫and we also don't need to require it anywhere. 36 00:01:45,940 --> 00:01:47,660 ‫All of this happens behind the scenes 37 00:01:47,660 --> 00:01:49,870 ‫internally in Express. 38 00:01:49,870 --> 00:01:51,910 ‫So we defined our view engine, 39 00:01:51,910 --> 00:01:54,450 ‫now we also need to define where these views 40 00:01:54,450 --> 00:01:57,013 ‫are actually located in our file system. 41 00:01:57,916 --> 00:02:02,230 ‫So our pug templates are actually called views in Express. 42 00:02:02,230 --> 00:02:04,960 ‫That's because these templates are in fact 43 00:02:04,960 --> 00:02:08,090 ‫the views in the model view controller architecture 44 00:02:08,090 --> 00:02:11,720 ‫which we have been using in this course up until this point. 45 00:02:11,720 --> 00:02:13,980 ‫As you know we already have the controllers, 46 00:02:13,980 --> 00:02:15,273 ‫and the model folders. 47 00:02:16,180 --> 00:02:17,650 ‫Let's actually close these. 48 00:02:17,650 --> 00:02:20,703 ‫And so now it's time to actually create the views folder. 49 00:02:25,210 --> 00:02:27,590 ‫With that we have the three components 50 00:02:27,590 --> 00:02:29,583 ‫of the MVC architecture. 51 00:02:30,900 --> 00:02:32,860 ‫In order to now define which folder 52 00:02:32,860 --> 00:02:35,070 ‫our views are actually located in, 53 00:02:35,070 --> 00:02:38,943 ‫all we need to do again is to say app.set, 54 00:02:40,660 --> 00:02:44,763 ‫and this time it's the view setting, or actually views, 55 00:02:46,310 --> 00:02:48,660 ‫and then here the name of the path. 56 00:02:48,660 --> 00:02:52,500 ‫Now here we could just put something like this, 57 00:02:52,500 --> 00:02:57,380 ‫so /views, but that's not ideal. 58 00:02:57,380 --> 00:03:00,040 ‫As you know already, the path that we provide here 59 00:03:00,040 --> 00:03:02,330 ‫is always relative to the directory 60 00:03:02,330 --> 00:03:05,240 ‫from where we launched the Note application, 61 00:03:05,240 --> 00:03:07,760 ‫and that usually is the root project folder, 62 00:03:07,760 --> 00:03:09,180 ‫but it might not be. 63 00:03:09,180 --> 00:03:11,170 ‫So we shouldn't use dot here, 64 00:03:11,170 --> 00:03:14,410 ‫but we should instead use the directory name variable. 65 00:03:14,410 --> 00:03:17,550 ‫So let's do that, and together with a nice trick 66 00:03:17,550 --> 00:03:22,150 ‫that we can use with Note, which is using the path module. 67 00:03:22,150 --> 00:03:26,340 ‫Path is a built-in Note module, so a core module, 68 00:03:26,340 --> 00:03:29,593 ‫which is used to manipulate path names, basically. 69 00:03:32,130 --> 00:03:35,860 ‫So require path, so of course 70 00:03:35,860 --> 00:03:37,650 ‫we don't have to install anything. 71 00:03:37,650 --> 00:03:40,143 ‫It's just a native built-in module. 72 00:03:41,320 --> 00:03:44,333 ‫What we can now do is path.join, 73 00:03:46,340 --> 00:03:51,340 ‫and then the directory name, and then views. 74 00:03:52,930 --> 00:03:55,790 ‫This will then, basically behind the scenes, 75 00:03:55,790 --> 00:04:00,403 ‫create a path joining the directory name /views. 76 00:04:01,640 --> 00:04:03,520 ‫Now it might seem here a bit overkill 77 00:04:03,520 --> 00:04:06,620 ‫to use this path.join function here, 78 00:04:06,620 --> 00:04:08,880 ‫but we don't always know whether a path 79 00:04:08,880 --> 00:04:13,120 ‫that we receive from somewhere already has a slash or not. 80 00:04:13,120 --> 00:04:16,290 ‫So you will see this function here used all the time 81 00:04:16,290 --> 00:04:19,040 ‫in order to prevent this kind of bug. 82 00:04:19,040 --> 00:04:21,440 ‫Because this way we don't even need to think 83 00:04:21,440 --> 00:04:23,380 ‫about any slashes or not, 84 00:04:23,380 --> 00:04:26,463 ‫because Note will automatically create a correct path. 85 00:04:28,140 --> 00:04:30,140 ‫Actually we should also use this here 86 00:04:30,140 --> 00:04:33,343 ‫where we create this middleware. 87 00:04:34,290 --> 00:04:37,623 ‫Here we should indeed use the exact same thing here. 88 00:04:39,070 --> 00:04:40,533 ‫So let's just duplicate this. 89 00:04:43,540 --> 00:04:45,703 ‫So path join, and public. 90 00:04:54,470 --> 00:04:57,510 ‫Let's actually put this one here at the top, 91 00:04:57,510 --> 00:05:01,373 ‫because it kind of belongs together with these here. 92 00:05:02,330 --> 00:05:04,580 ‫Still a middleware, but as you will see 93 00:05:04,580 --> 00:05:07,020 ‫in one of the next videos, this closely works 94 00:05:07,020 --> 00:05:09,053 ‫together with a views engine. 95 00:05:10,520 --> 00:05:14,050 ‫But this here we have now set up our pug engine. 96 00:05:14,050 --> 00:05:17,400 ‫Now it's time to create our very first template. 97 00:05:17,400 --> 00:05:19,890 ‫So in here let's create our first pug file 98 00:05:21,660 --> 00:05:24,970 ‫called base.pug, and as you will see 99 00:05:24,970 --> 00:05:29,453 ‫vs code actually has its own nice icon for this file type. 100 00:05:30,919 --> 00:05:32,950 ‫All I really wanna do here for now 101 00:05:32,950 --> 00:05:36,220 ‫is to create an h1 element, so a main heading 102 00:05:36,220 --> 00:05:38,660 ‫simply with the name of some tour, 103 00:05:38,660 --> 00:05:41,720 ‫and the way that works with pug is just like this. 104 00:05:41,720 --> 00:05:45,170 ‫So h1, and then the content of the element. 105 00:05:45,170 --> 00:05:49,030 ‫Let's say The Park Camper. 106 00:05:49,030 --> 00:05:50,520 ‫And that's actially it! 107 00:05:50,520 --> 00:05:54,730 ‫That will then translate to this here, 108 00:05:54,730 --> 00:05:59,730 ‫h1 The Park Camper, and then close that. 109 00:06:04,730 --> 00:06:07,680 ‫So, in html we would have to write this, 110 00:06:07,680 --> 00:06:10,250 ‫but the pug syntax makes it so much easier 111 00:06:10,250 --> 00:06:12,193 ‫to write html like this. 112 00:06:13,470 --> 00:06:14,670 ‫Of course it will also allow us 113 00:06:14,670 --> 00:06:16,880 ‫to put all kinds of variables in here, 114 00:06:16,880 --> 00:06:19,780 ‫so that we can really inject our data into these templates, 115 00:06:19,780 --> 00:06:21,650 ‫but for now I'm really just interested 116 00:06:21,650 --> 00:06:23,853 ‫in putting out something to the browser. 117 00:06:25,240 --> 00:06:27,570 ‫A lot more about how pug actually works 118 00:06:27,570 --> 00:06:29,220 ‫over the next couple of lectures. 119 00:06:30,870 --> 00:06:33,400 ‫For now we have our base template here, 120 00:06:33,400 --> 00:06:34,793 ‫and keep that name in mind. 121 00:06:37,225 --> 00:06:40,680 ‫We can now actually create a new route 122 00:06:40,680 --> 00:06:43,383 ‫from which we will then access that template. 123 00:06:45,260 --> 00:06:48,893 ‫So let's actually do that here right before the api route. 124 00:06:51,160 --> 00:06:56,160 ‫So, app.get, which for rendering pages in a browser 125 00:06:56,680 --> 00:06:59,060 ‫is usually always the one that we use, 126 00:06:59,060 --> 00:07:02,990 ‫and so that specified the url here, so the route, 127 00:07:02,990 --> 00:07:05,763 ‫and that's simply the root of our website. 128 00:07:07,060 --> 00:07:10,283 ‫Then just like before we of course need a handler function, 129 00:07:11,780 --> 00:07:14,363 ‫so request, response, 130 00:07:17,140 --> 00:07:19,150 ‫and now to render our template 131 00:07:19,150 --> 00:07:22,210 ‫just like before we used the response object, 132 00:07:22,210 --> 00:07:27,210 ‫we still set the status to 200 in this case for okay. 133 00:07:28,100 --> 00:07:31,830 ‫But then instead of using json, like this, 134 00:07:31,830 --> 00:07:34,250 ‫as we've always used up until this point 135 00:07:34,250 --> 00:07:37,133 ‫now it's time for using render. 136 00:07:38,015 --> 00:07:40,230 ‫So render will then render the template 137 00:07:40,230 --> 00:07:42,340 ‫with the name that we pass in, 138 00:07:42,340 --> 00:07:44,963 ‫and that is in this case, base. 139 00:07:46,640 --> 00:07:49,910 ‫We don't even need to specify the pug extension 140 00:07:49,910 --> 00:07:52,070 ‫because Express will automatically know 141 00:07:52,070 --> 00:07:54,490 ‫that this is the file that we're looking for 142 00:07:54,490 --> 00:07:56,920 ‫and of course it will look for this file 143 00:07:56,920 --> 00:07:59,060 ‫inside of the folder that was specified 144 00:07:59,060 --> 00:08:03,600 ‫right in the beginning, so this one. 145 00:08:03,600 --> 00:08:05,390 ‫It will go into the views folder, 146 00:08:05,390 --> 00:08:08,303 ‫and in there look for the template with the name base. 147 00:08:09,920 --> 00:08:12,840 ‫Then it will take that template, and render it, 148 00:08:12,840 --> 00:08:16,430 ‫and then basically send it as a response to the browser. 149 00:08:16,430 --> 00:08:18,563 ‫Great, so let's test that now. 150 00:08:22,190 --> 00:08:23,850 ‫So, our server is still running 151 00:08:23,850 --> 00:08:27,223 ‫at local host port 3000 I believe. 152 00:08:32,170 --> 00:08:34,970 ‫And that gives us this error, 153 00:08:34,970 --> 00:08:37,790 ‫cannot find module pug, and so actually, 154 00:08:37,790 --> 00:08:41,323 ‫we really do need to install the pug module. 155 00:08:42,845 --> 00:08:45,250 ‫So I said earlier that we did not, 156 00:08:45,250 --> 00:08:47,723 ‫but actually we do need to do that. 157 00:08:49,220 --> 00:08:52,210 ‫Express will still load it behind the scenes automatically, 158 00:08:52,210 --> 00:08:54,890 ‫but it doesn't come with all of these template engines 159 00:08:54,890 --> 00:08:56,553 ‫installed out of the box. 160 00:08:57,460 --> 00:08:59,753 ‫So npm install pug. 161 00:09:06,063 --> 00:09:08,063 ‫And here we go, 162 00:09:09,220 --> 00:09:11,620 ‫so let's try that again, 163 00:09:11,620 --> 00:09:14,310 ‫and now indeed we get the park camper. 164 00:09:14,310 --> 00:09:17,610 ‫That's our h1 element that we just created 165 00:09:17,610 --> 00:09:22,610 ‫in the base.pug file, and if we now inspect this 166 00:09:22,830 --> 00:09:26,750 ‫you will see that it is a simple h1 element. 167 00:09:26,750 --> 00:09:28,210 ‫Of course there is no styling 168 00:09:28,210 --> 00:09:31,160 ‫and no CSS at all at this point, 169 00:09:31,160 --> 00:09:32,530 ‫but we're going to take care of that 170 00:09:32,530 --> 00:09:34,290 ‫over the next couple of lectures. 171 00:09:34,290 --> 00:09:36,180 ‫For now what matters here is that 172 00:09:36,180 --> 00:09:40,070 ‫as we access our root, route here on our host, 173 00:09:40,070 --> 00:09:42,883 ‫so having this is indeed the same as having this. 174 00:09:44,560 --> 00:09:46,810 ‫As we access this route we now get access 175 00:09:46,810 --> 00:09:48,900 ‫to a dynamically rendered website 176 00:09:48,900 --> 00:09:53,320 ‫based on our base.pug template, great. 177 00:09:53,320 --> 00:09:56,150 ‫That's the first step on how to set up pug, 178 00:09:56,150 --> 00:09:57,670 ‫and over the next couple of lectures 179 00:09:57,670 --> 00:10:00,570 ‫you will then learn to really use this template engine 180 00:10:00,570 --> 00:10:02,663 ‫to build amazing, dynamic websites.