1 00:00:00,210 --> 00:00:05,700 In the last two videos you set up express to correctly serve up your static assets. 2 00:00:05,700 --> 00:00:10,110 Now for us we chose to put all of our static assets in the public directory. 3 00:00:10,230 --> 00:00:13,820 Everything inside of there was made available via the web server. 4 00:00:13,830 --> 00:00:20,940 This included the CSX images javascript and HDL documents that we wanted users in the browser to be 5 00:00:20,940 --> 00:00:27,240 able to access now Static means that the assets are static they do not change. 6 00:00:27,270 --> 00:00:32,860 I could refresh this page five hundred times and I would always get the exact same result. 7 00:00:32,880 --> 00:00:37,140 It is a static web page not a dynamic web page. 8 00:00:37,140 --> 00:00:43,140 Now there are times where a static web page is exactly what we want but that's not always the case. 9 00:00:43,230 --> 00:00:49,230 In this video you're going to learn how to use what's called a template engine to render dynamic web 10 00:00:49,230 --> 00:00:50,870 pages using Express. 11 00:00:50,880 --> 00:00:55,430 Now the template engine that we're going to setup in this video is called handlebars. 12 00:00:55,500 --> 00:00:59,930 Handlebars is going to allow us to do two very important things first up. 13 00:00:59,940 --> 00:01:06,270 As mentioned it's going to allow us to render dynamic documents as opposed to static ones. 14 00:01:06,270 --> 00:01:11,950 And the other thing that's going to allow us to do is to easily create code that we can reuse across 15 00:01:11,950 --> 00:01:12,780 the pages. 16 00:01:13,140 --> 00:01:16,530 So think about index dot HDL as an example. 17 00:01:16,530 --> 00:01:21,720 When I was filling out this page to create a real Web site I would likely want to put in a header up 18 00:01:21,720 --> 00:01:27,420 top and a footer down below and the header and the footer are something I'm going to share across all 19 00:01:27,420 --> 00:01:31,590 web pages to make the site feel like one cohesive experience. 20 00:01:31,590 --> 00:01:37,260 It would be bad if you went from one page to another on the site and the header kept changing styles 21 00:01:37,260 --> 00:01:38,430 or formats. 22 00:01:38,430 --> 00:01:42,770 That's gonna make it really confusing to navigate without a template engine. 23 00:01:42,780 --> 00:01:48,370 I'd have to write out the header here and then copy and paste it into my other HDMI documents. 24 00:01:48,390 --> 00:01:54,270 Now that's obviously not ideal because that means I wouldn't need to go to all of those documents if 25 00:01:54,270 --> 00:01:56,190 I wanted to make any changes. 26 00:01:56,220 --> 00:02:02,610 It would be nice to be able to have the header markup in one place and be able to reuse it across all 27 00:02:02,610 --> 00:02:05,650 of the pages in my site with a template engine. 28 00:02:05,730 --> 00:02:07,100 We can do just that. 29 00:02:07,500 --> 00:02:13,950 So once again with handlebars we'll be able to render dynamic content and we'll be able to easily use 30 00:02:13,980 --> 00:02:19,940 and reuse little pieces of markup throughout the various pages in our app. 31 00:02:19,950 --> 00:02:25,380 Let's go ahead and kick things off by setting up the tool in our project to get everything up and running. 32 00:02:25,380 --> 00:02:31,080 There are two NPM modules I want to take a quick moment to show you the first we can find by googling 33 00:02:31,140 --> 00:02:33,000 NPM the handlebars. 34 00:02:33,000 --> 00:02:35,330 This is the handlebars package. 35 00:02:35,340 --> 00:02:41,550 And if we crack this open we can see it is a very popular templating tool with about 4 million weekly 36 00:02:41,580 --> 00:02:42,750 downloads. 37 00:02:42,750 --> 00:02:48,040 Now this is a low level library that implements handlebars in JavaScript. 38 00:02:48,060 --> 00:02:54,960 It can be used in a wide variety of settings like the browser the server desktop applications with electron 39 00:02:55,230 --> 00:02:58,290 or anywhere else that JavaScript can be used. 40 00:02:58,290 --> 00:03:04,750 Now for our purposes we want to use handlebars with our Express server the handlebars module isn't going 41 00:03:04,750 --> 00:03:06,230 to let us get that done. 42 00:03:06,240 --> 00:03:11,940 There is a another handlebars library though which you can think of kind of like a plug in for Express 43 00:03:12,150 --> 00:03:16,380 which essentially integrates handlebars into Express. 44 00:03:16,380 --> 00:03:22,380 We can find that by googling NPM HB S. HB S. which is short for handlebars. 45 00:03:22,410 --> 00:03:25,920 Is the library that we're going to install and set up now. 46 00:03:25,950 --> 00:03:29,430 HB Yes uses handlebars behind the scenes. 47 00:03:29,430 --> 00:03:33,550 HB asked just makes it really easy to integrate with Express. 48 00:03:33,600 --> 00:03:38,810 Let's go ahead and take a moment to install this and integrate it into our application down below. 49 00:03:38,910 --> 00:03:47,970 I'm going to shut down node man and we're gonna use npm install right here NPM I the module HB S. at 50 00:03:47,970 --> 00:03:51,910 the latest version that is four point zero point one. 51 00:03:51,930 --> 00:03:58,410 Now when we go ahead and install that it's going to get all of the code set up in node modules as always. 52 00:03:58,410 --> 00:04:04,420 And it'll add the dependencies to package dot Jason and package LOC dot Jason. 53 00:04:04,590 --> 00:04:10,570 Now once we have it installed the process of getting set up is actually really easy. 54 00:04:10,590 --> 00:04:18,540 All we need to do is tell Express which templating engine we installed and we do that by using a new 55 00:04:18,600 --> 00:04:27,150 method on app that is app dot set now set allows you to set a value for a given express setting and 56 00:04:27,150 --> 00:04:28,190 there are a few. 57 00:04:28,350 --> 00:04:29,180 We have a key. 58 00:04:29,240 --> 00:04:31,380 The setting name and we have a value. 59 00:04:31,380 --> 00:04:38,040 The value we want to set for the setting in our case to set up a view engine like express the value 60 00:04:38,040 --> 00:04:40,290 is view space engine. 61 00:04:40,290 --> 00:04:46,740 And it is important that this matches up exactly with the spacing and capitalization taken into account. 62 00:04:46,740 --> 00:04:52,500 If you don't set it exactly express isn't going to know what you're trying to do and the value we use 63 00:04:52,500 --> 00:04:59,460 is the name of the module we installed in this case H B S and there we go that single line is all we 64 00:04:59,460 --> 00:05:02,330 need to get handlebars set up. 65 00:05:02,330 --> 00:05:06,140 Now we can actually use it to create some dynamic templates. 66 00:05:06,140 --> 00:05:09,680 Now when we're working with express it expects all of your views. 67 00:05:09,680 --> 00:05:15,710 In this case our handlebars templates to live in a specific folder that is in the root of the project. 68 00:05:15,890 --> 00:05:18,690 It's supposed to live in a folder called views. 69 00:05:18,770 --> 00:05:25,280 So for us the route of the project is the web server folder and we're going to create a new views directory 70 00:05:25,340 --> 00:05:26,710 right inside of there. 71 00:05:26,780 --> 00:05:32,660 In here we can put our handlebars views and that's exactly what I'm going to end up doing what we're 72 00:05:32,660 --> 00:05:36,290 going to do is create a view that replaces the home page. 73 00:05:36,530 --> 00:05:43,040 So instead of the home page being a static document served up from public it's going to be a handlebars 74 00:05:43,100 --> 00:05:44,660 template right here. 75 00:05:44,660 --> 00:05:46,100 Let's create that file. 76 00:05:46,190 --> 00:05:49,940 We have index dot HDL for the H T and L document. 77 00:05:49,970 --> 00:05:57,980 I'll call this view index DOT and the extension we use here is H B S which is the handlebars extension. 78 00:05:57,980 --> 00:06:04,040 Now you'll notice right away that Visual Studio code displayed the handlebars logo this handlebar mustache 79 00:06:04,400 --> 00:06:09,290 and that is because Visual Studio code has built in support for handlebars. 80 00:06:09,290 --> 00:06:14,540 That means that you're going to get all of the nice features you'd expect when writing code like syntax 81 00:06:14,540 --> 00:06:21,230 highlighting auto completion and more now a handlebars file is nothing more than HDR Nel with a couple 82 00:06:21,230 --> 00:06:25,110 of nice to have little features for injecting dynamic values. 83 00:06:25,160 --> 00:06:31,590 That means we can actually start with just a regular old HDL document to see how all of this works. 84 00:06:31,700 --> 00:06:37,180 What I'm going to do is take index down HDL exactly as it currently exists. 85 00:06:37,220 --> 00:06:42,120 I'm going to copy the entire file and I'm going to paste it over in index Dot. 86 00:06:42,120 --> 00:06:43,230 HB Yes. 87 00:06:43,370 --> 00:06:49,730 So instead of the home page being served up as a static file we are going to render it using handlebars 88 00:06:49,760 --> 00:06:53,350 and express serving this document up to the user. 89 00:06:53,390 --> 00:06:59,090 Now currently the end result would be the exact same thing we had before because we're not taking advantage 90 00:06:59,090 --> 00:07:03,310 of any of the handlebars features but we'll explore those in just a second. 91 00:07:03,350 --> 00:07:09,470 For the moment let's just go ahead and set up a different title so we can actually see this page rendered 92 00:07:09,500 --> 00:07:10,700 in the browser. 93 00:07:10,700 --> 00:07:16,610 What I'm going to do is just render weather and if we see whether we know things are working and that's 94 00:07:16,670 --> 00:07:18,460 the goal so far. 95 00:07:18,470 --> 00:07:25,160 Now since we are going to transition the index file from being an HDMI document to a handlebar file 96 00:07:25,370 --> 00:07:28,010 I can actually remove it from the public folder. 97 00:07:28,010 --> 00:07:33,560 Now this is not to say that you shouldn't serve up static assets or that you shouldn't serve a static 98 00:07:33,590 --> 00:07:34,880 HDMI documents. 99 00:07:34,880 --> 00:07:36,360 That's not what I'm getting at. 100 00:07:36,410 --> 00:07:39,200 What I'm showing you is different ways to get the job done. 101 00:07:39,350 --> 00:07:43,780 If you need to serve up a static document you can continue to put them in public. 102 00:07:43,790 --> 00:07:45,370 That's going to work just great. 103 00:07:45,680 --> 00:07:51,200 If you need something a little more complex with dynamic content than handlebars is probably your best 104 00:07:51,200 --> 00:07:52,030 bet. 105 00:07:52,040 --> 00:07:59,220 So right here I'm going to delete index dot HDL since we have index dot HB s in place. 106 00:07:59,270 --> 00:08:05,960 Now it's important to note that so far no one is gonna be able to access this page from our web server 107 00:08:06,260 --> 00:08:08,750 to actually serve up this template. 108 00:08:08,780 --> 00:08:10,830 We need to set up a route. 109 00:08:10,910 --> 00:08:14,030 So once again that'll be an app dot get call. 110 00:08:14,210 --> 00:08:18,660 We're going to show this one on the home page so I'll leave that first string empty. 111 00:08:18,770 --> 00:08:24,470 Then as the second argument we'll have our function with request and response as the two arguments which 112 00:08:24,470 --> 00:08:27,330 we've used before now inside of here. 113 00:08:27,350 --> 00:08:33,880 The only way we've ever sent information back to the requester is via response dot sent. 114 00:08:33,890 --> 00:08:40,730 We saw how we could send back a regular old string or an H T email string or even an object or an array 115 00:08:40,730 --> 00:08:47,750 which would get converted to Jason in this case the goal is to not use to send but to use render render 116 00:08:47,780 --> 00:08:50,440 allows us to render one of our views. 117 00:08:50,540 --> 00:08:57,020 We've configured express to use the view engine HP s so with render we can render one of our handlebars 118 00:08:57,080 --> 00:08:58,720 templates right here. 119 00:08:58,740 --> 00:09:05,930 All we need to do is provide as the first argument the name of the particular view we want to use right 120 00:09:05,930 --> 00:09:07,570 here inside of quotes. 121 00:09:07,580 --> 00:09:08,560 That is index. 122 00:09:08,570 --> 00:09:11,180 There is no need for the file extension. 123 00:09:11,180 --> 00:09:17,180 This just needs to match up with the name of the template you created in that views folder. 124 00:09:17,180 --> 00:09:23,300 Since they match up we are good to go and we can actually test things out before taking it to the next 125 00:09:23,300 --> 00:09:28,250 level and actually rendering dynamic content down below from the terminal. 126 00:09:28,280 --> 00:09:33,770 I'm gonna use the up arrow key to cycle through my previous commands getting back to node mine where 127 00:09:33,770 --> 00:09:40,310 I run source forward slash app dot J S I'm gonna run that command and now we're gonna visit local host 128 00:09:40,310 --> 00:09:46,850 three thousand and we're gonna visit the root of the site to see our template rendered over here local 129 00:09:46,850 --> 00:09:52,490 host three thousand I'm going to go from forward slash about to just the route and what do I get I get 130 00:09:52,490 --> 00:09:54,850 whether showing up as expected. 131 00:09:55,040 --> 00:10:01,950 So by calling response dot render express goes off and it gets that do it then converts it into h t 132 00:10:01,950 --> 00:10:06,180 UML and to make sure that each TSL gets back to the requester. 133 00:10:06,180 --> 00:10:10,860 And in this case we've proved that happens by viewing it over in the browser. 134 00:10:10,860 --> 00:10:13,110 Now at this point we have a static document. 135 00:10:13,110 --> 00:10:17,060 There is nothing dynamic about it even though we're using handlebars. 136 00:10:17,070 --> 00:10:23,490 Let's go ahead and fix that by actually passing a value in what we're going to do is go ahead and provide 137 00:10:23,550 --> 00:10:25,850 a value for this title. 138 00:10:25,890 --> 00:10:30,360 So instead of hard coding it in the file it's going to be provided by node j. 139 00:10:30,390 --> 00:10:37,460 S now to provide a value that's accessible in the template we have to provide a second argument to render. 140 00:10:37,470 --> 00:10:43,650 So the first argument is the name of the view to render and the second argument is an object which contains 141 00:10:43,680 --> 00:10:47,850 all of the values you want that view to be able to access. 142 00:10:47,850 --> 00:10:54,900 So as an example I could provide title and I could set that to a string like whether I'm going to go 143 00:10:54,900 --> 00:10:58,520 ahead and change that up just so we can see a difference between the two. 144 00:10:58,620 --> 00:11:04,800 I'll say weather app and I could provide a another value as well like name and I could set that equal 145 00:11:04,800 --> 00:11:07,530 to Andrew Meade as an example. 146 00:11:07,530 --> 00:11:12,930 Now that we're injecting both of these values into the template the template can actually take advantage 147 00:11:12,930 --> 00:11:18,150 of them and that's what's going to create the dynamic HDMI document. 148 00:11:18,150 --> 00:11:22,020 So right here we can use either title or name in handlebars. 149 00:11:22,020 --> 00:11:24,300 The question is how do we get that done. 150 00:11:24,300 --> 00:11:32,340 Well we use a little bit of the handlebars syntax if we want to inject a value in an HP s file we open 151 00:11:32,340 --> 00:11:34,640 and close to curly braces. 152 00:11:34,680 --> 00:11:36,340 That looks a little bit like this. 153 00:11:36,360 --> 00:11:39,840 So I open two up then I close both right inside. 154 00:11:39,840 --> 00:11:46,170 I reference the thing I'm trying to access so I could access title which is available or I could choose 155 00:11:46,170 --> 00:11:51,160 to access name which is also available now if I save index Dot. 156 00:11:51,180 --> 00:11:57,900 HB Yes we should be able to access our title since we've passed that in and we are indeed referencing 157 00:11:57,900 --> 00:11:58,450 it. 158 00:11:58,560 --> 00:12:01,560 Now if we go ahead and refresh the page what do we see. 159 00:12:01,560 --> 00:12:03,660 We see weather app showing up. 160 00:12:03,660 --> 00:12:09,420 That means the value which node provided to the template is indeed being used. 161 00:12:09,420 --> 00:12:11,520 I could switch that up even further. 162 00:12:11,550 --> 00:12:15,320 I'm gonna go ahead and bring it back to its original value weather. 163 00:12:15,390 --> 00:12:22,170 And if I were to refresh the page here once again we're seeing weather now we also have access to that 164 00:12:22,230 --> 00:12:24,500 other value we provided to the template. 165 00:12:24,570 --> 00:12:27,770 This was name and I could also choose to use that. 166 00:12:27,780 --> 00:12:34,830 So right here I'm going to create a p element for paragraph and I will just put some text inside of 167 00:12:34,830 --> 00:12:39,120 here like created by then I'm going to inject the name. 168 00:12:39,270 --> 00:12:41,340 So I open to curly braces. 169 00:12:41,340 --> 00:12:46,910 I closed those two curly braces off and I reference the value inside name. 170 00:12:46,920 --> 00:12:52,710 Now if we refresh the page I should see both of my values showing up in the template and that is exactly 171 00:12:52,710 --> 00:12:54,150 what I get right here. 172 00:12:54,150 --> 00:13:00,380 I have the title weather and I have the name shown as part of the paragraph down below. 173 00:13:00,390 --> 00:13:06,240 Now with this in place we know how to use a handlebars template to render some dynamic values that end 174 00:13:06,240 --> 00:13:12,450 up getting provided by node j s let's work through this process one more time for the about page then 175 00:13:12,450 --> 00:13:15,410 as your challenge you'll do it for the help page. 176 00:13:15,420 --> 00:13:21,670 So what I'm gonna do is create a new template in the views directory called about Dot each s.. 177 00:13:21,810 --> 00:13:26,760 And in here we're gonna have contents pretty similar to about Dot HDL. 178 00:13:26,760 --> 00:13:33,450 So I'll take the contents of the HDL file I'll paste them into the HB S. file allowing me to make them 179 00:13:33,450 --> 00:13:38,390 dynamic then I'll delete these static files since we're no longer going to need that. 180 00:13:38,550 --> 00:13:44,700 So I'll remove about Dot HDL from the public directory though it's still gonna be important that other 181 00:13:44,700 --> 00:13:50,320 assets like the image and the CSF sheet are served up from the public folder. 182 00:13:50,340 --> 00:13:53,470 Otherwise this page won't be able to access that. 183 00:13:53,670 --> 00:14:00,380 So we have about Dot HB S. but it's never gonna show up because it's not being used in our Express application. 184 00:14:00,570 --> 00:14:06,630 Over here we can fix that app dot get setting up forward slash about. 185 00:14:06,800 --> 00:14:13,660 We're also going to set up our function and as we've done before we'll be using response dot render 186 00:14:13,840 --> 00:14:15,940 to render a template. 187 00:14:15,940 --> 00:14:23,150 The name is about remember we leave off the file extension and this indeed is enough to get us started. 188 00:14:23,170 --> 00:14:29,490 If I save the file I could head over to forward slash about and what do I get. 189 00:14:29,500 --> 00:14:32,670 I get the exact same file I had before. 190 00:14:32,710 --> 00:14:39,820 Now we could choose to make some content dynamic like we did with index dot HP yes in here I have create 191 00:14:39,820 --> 00:14:41,800 by instead of created by. 192 00:14:41,830 --> 00:14:44,210 So let me go ahead and fix that typo. 193 00:14:44,280 --> 00:14:48,780 And then what I'm going to do is take both of those and bring them over to about Dot. 194 00:14:48,800 --> 00:14:49,930 HB Yes. 195 00:14:49,930 --> 00:14:55,540 So for the moment even though we're rendering dynamic content which is a good start we're not reusing 196 00:14:55,540 --> 00:14:56,640 it and that's OK. 197 00:14:56,740 --> 00:14:59,410 We're going to address that in the next video. 198 00:14:59,470 --> 00:15:03,490 So over here I'm going to expect that title gets provided. 199 00:15:03,490 --> 00:15:09,790 So I will open up to curly braces title and then close those off and then down below the image I can 200 00:15:09,790 --> 00:15:17,920 provide that same text a little paragraph saying and created by followed by the name provided. 201 00:15:17,920 --> 00:15:18,940 Perfect. 202 00:15:18,940 --> 00:15:22,510 Now this matches up pretty closely with what we had over here. 203 00:15:22,510 --> 00:15:26,490 The only thing we need to do was actually provide values for both. 204 00:15:26,500 --> 00:15:32,340 So over in app dot J S we're going to pass in an object as the second argument to render. 205 00:15:32,350 --> 00:15:39,790 We just used title in name in the template so I have to provide both of those title and name. 206 00:15:39,790 --> 00:15:46,780 Now for a title I'm going to use about me just so I can see the difference between the two and for name 207 00:15:46,840 --> 00:15:47,940 I'll use my name. 208 00:15:47,950 --> 00:15:50,320 Andrew Meade perfect. 209 00:15:50,320 --> 00:15:54,160 Now that we have this in place we can make sure all of our files are saved. 210 00:15:54,190 --> 00:15:56,600 I can refresh the page and what do I get. 211 00:15:56,680 --> 00:16:03,010 I get about me printing which is my dynamic value and in my footer text I get Andrew Meade showing up 212 00:16:03,040 --> 00:16:04,830 which is coming from right here. 213 00:16:04,840 --> 00:16:08,290 Now it's time for you to convert the help page on your own. 214 00:16:08,290 --> 00:16:13,030 And this one isn't going to get title or name provided we're going gonna switch things up and make the 215 00:16:13,030 --> 00:16:15,000 challenge a bit more interesting. 216 00:16:15,010 --> 00:16:15,640 So right here. 217 00:16:15,640 --> 00:16:16,330 Goal. 218 00:16:16,330 --> 00:16:18,450 Create a template for the help page. 219 00:16:18,460 --> 00:16:23,870 Step one you're going to set up a help template to render a message to the screen. 220 00:16:23,950 --> 00:16:26,660 So you want to create a new template in the views folder. 221 00:16:26,740 --> 00:16:31,000 You can start by copying the old file over to that new template. 222 00:16:31,000 --> 00:16:35,770 And what you're going to do is expect that you'll get a help message provided and you're going to show 223 00:16:35,770 --> 00:16:38,170 that entire message in a paragraph. 224 00:16:38,170 --> 00:16:44,080 So you'll have to set up a new paragraph and you'll have to use the message inside of it. 225 00:16:44,080 --> 00:16:48,940 Now step two once you have the template setup you want to set up the route to render it and you want 226 00:16:48,940 --> 00:16:51,040 to pass in an example message. 227 00:16:51,040 --> 00:16:54,740 I use title and name for these two values for your example message. 228 00:16:54,750 --> 00:17:01,450 You can use whatever you liked just make sure to use the same as the value you pass in and make sure 229 00:17:01,450 --> 00:17:04,270 it's the same in the template itself. 230 00:17:04,270 --> 00:17:09,220 Now once you have everything set up in terms of the route and the render call you want to visit the 231 00:17:09,220 --> 00:17:13,480 page and make sure you actually see the help page with your help. 232 00:17:13,480 --> 00:17:19,540 Message showing up take some time to knock that out test your work when you're done come back and click 233 00:17:19,540 --> 00:17:19,930 play 234 00:17:23,920 --> 00:17:24,700 how'd that go. 235 00:17:24,700 --> 00:17:27,310 I'm going to kick things off by creating that view. 236 00:17:27,310 --> 00:17:34,450 So right here in the views folder help dot H B S now as I mentioned we could start this file off from 237 00:17:34,450 --> 00:17:38,830 the help dot HDL file so I'm going to take the contents here. 238 00:17:38,950 --> 00:17:41,620 I'm going to bring them over to help dot HB. 239 00:17:41,740 --> 00:17:49,150 Then I can go ahead and save the template file and remove the old HDMI document which I'll do now that 240 00:17:49,150 --> 00:17:53,920 we have things in place the goal was to get a message showing up and I wanted you to put that in a new 241 00:17:53,920 --> 00:17:54,860 paragraph. 242 00:17:54,910 --> 00:17:59,920 I'll put that just below the H1 though you could have put it above as I didn't specify. 243 00:17:59,920 --> 00:18:02,400 Next up we're going to pass a value in. 244 00:18:02,590 --> 00:18:04,990 I could choose a name for this whatever I like. 245 00:18:04,990 --> 00:18:07,390 I'm going to use help text as my name. 246 00:18:07,390 --> 00:18:08,740 If you use something different. 247 00:18:08,740 --> 00:18:11,020 Once again that is OK. 248 00:18:11,080 --> 00:18:12,720 Now what the template complete. 249 00:18:12,730 --> 00:18:15,630 We can set up the route that's actually going to render it. 250 00:18:15,730 --> 00:18:16,620 To do that. 251 00:18:16,700 --> 00:18:22,830 Another call to app dot get this time forward slash help as the page we're working with. 252 00:18:22,900 --> 00:18:29,290 We're going to set up the request and the response arguments in our callback and all we need to do is 253 00:18:29,290 --> 00:18:31,810 use response dot render. 254 00:18:31,810 --> 00:18:34,690 I'm going to provide to the two arguments it needs. 255 00:18:34,690 --> 00:18:36,850 First the name of the new template. 256 00:18:36,940 --> 00:18:41,140 We call that help dot HB S. so I'll pass help in here. 257 00:18:41,140 --> 00:18:45,800 And the second is our object with all of the data required by the template. 258 00:18:46,030 --> 00:18:49,150 In this case help text is the only thing needed. 259 00:18:49,150 --> 00:18:52,010 Now for this text you could have used whatever you liked. 260 00:18:52,120 --> 00:18:57,490 I will just use this is some helpful text as my example. 261 00:18:57,490 --> 00:19:02,230 Now that wraps up step two the last thing to do is to test our work. 262 00:19:02,260 --> 00:19:08,140 I'm going to make sure that all of my files are saved and I'm going to go over to local host three thousand 263 00:19:08,140 --> 00:19:12,380 and visit the new route which we set up as forward slash help. 264 00:19:12,490 --> 00:19:14,150 When I do that what do I get. 265 00:19:14,260 --> 00:19:18,490 I get this is some helpful text printing which is fantastic. 266 00:19:18,490 --> 00:19:24,010 If you're seeing that it means you're all done with the challenge and you're all done with this video. 267 00:19:24,220 --> 00:19:30,830 In this one we learned how to use handlebars to allow us to render dynamic content we're able to set 268 00:19:30,830 --> 00:19:37,870 up templates which are very similar to HDMI documents that we can inject specific values inside whether 269 00:19:37,870 --> 00:19:42,820 it's help text title name or whatever else your application needs. 270 00:19:42,820 --> 00:19:48,130 Now this is just the beginning of exploring handlebars in the next video you're going to learn how to 271 00:19:48,130 --> 00:19:56,050 create reusable handlebars partials which can be used for things like footers headers and sidebars which 272 00:19:56,050 --> 00:19:59,050 would appear on more than just a single page. 273 00:19:59,080 --> 00:20:00,620 I'm excited to get to that. 274 00:20:00,640 --> 00:20:03,760 So let's go ahead and jump right in to the next video.