1 00:00:02,410 --> 00:00:06,150 So we want to create a full HTML page to the user. 2 00:00:06,250 --> 00:00:12,450 Now we can do that by creating a new folder maybe, views as a typical name but you can name it however 3 00:00:12,460 --> 00:00:18,400 you want where you store all your HTML files you want to send back, though we'll not actually create 4 00:00:18,400 --> 00:00:24,430 a HTML file in there but instead a template which contains HTML content but where we can also 5 00:00:24,430 --> 00:00:31,170 inject dynamic content so that we can have a mixture of HTML static content and dynamic content, 6 00:00:31,180 --> 00:00:35,950 this will be all then merged together into HTML file on the server side and sent back to the 7 00:00:35,950 --> 00:00:36,700 client, 8 00:00:36,730 --> 00:00:43,120 so on the client we will receive an HTML file but it allows us to enrich this HTML file with dynamic 9 00:00:43,120 --> 00:00:50,380 content and for that, we need a package, a library that allows us to define such a template which then 10 00:00:50,380 --> 00:00:56,680 parses the template file and finds a special syntax in there which we can use to output dynamic content 11 00:00:57,100 --> 00:00:59,920 and that makes working with such a template easier 12 00:00:59,920 --> 00:01:04,280 and for that I'll install such a package and that's the ejs package. 13 00:01:04,280 --> 00:01:09,700 Now there are alternatives to that and in my Node.js course for example, I dive way deeper into that 14 00:01:10,120 --> 00:01:15,140 but here we can use this ejs package which is quite popular and quite straightforward to use. 15 00:01:15,160 --> 00:01:21,880 So here we can just npm install this package as an extra library and now we need to tell Express.js, which 16 00:01:21,880 --> 00:01:28,090 supports such templating engines as they are called, that we want to use this templating engine and we 17 00:01:28,090 --> 00:01:34,720 do tell Express us if we want to do that by calling the set method on the app object which allows us 18 00:01:34,720 --> 00:01:40,030 to set up some global options and there we want to set the view engine option with a whitespace between 19 00:01:40,030 --> 00:01:45,820 the two words to ejs, which tells Express that the engine for parssing our 20 00:01:45,820 --> 00:01:51,610 views, our template should be ejs, the package we just installed and then we also tell Express.js 21 00:01:51,610 --> 00:01:57,280 where it finds our views and for that we add a views setting and point at the folder that 22 00:01:57,280 --> 00:02:00,460 holds our view files and in my case, that's views 23 00:02:00,460 --> 00:02:06,710 but if you named that folder differently, you would have to change it here. Now with that, we can add such 24 00:02:06,710 --> 00:02:12,150 a template here and I'll add an index file in here with the extension ejs. 25 00:02:12,250 --> 00:02:17,350 This means that ejs, this package we just installed will be able to detect this file and parse it. 26 00:02:17,650 --> 00:02:23,650 Now in there you generally just write HTML code as you're used to it but you can add a special 27 00:02:23,650 --> 00:02:31,060 syntax which the ejs package understands to inject dynamic content. So let's generate a HTML file 28 00:02:31,060 --> 00:02:37,930 in here and in vs code, you can just type HTML and pick this HTML5 option and hit enter and it 29 00:02:37,930 --> 00:02:46,480 gives you a basic skeleton. Now here I'll just use Node.js demo as a title and then here in the body, we can 30 00:02:46,510 --> 00:02:50,780 output the content we want to show and it could be a h1 tag where I say hello 31 00:02:50,950 --> 00:02:55,330 and then here I want to have something dynamic, I'll come back to that and below that I want to have 32 00:02:55,330 --> 00:03:05,250 my form. So I'll grab this code here from app.js and output that below the h1 tag and autoformat it, 33 00:03:05,400 --> 00:03:07,960 so now we have does in a way more readable way. 34 00:03:08,070 --> 00:03:13,620 Now I want to output the user name here dynamically and for that, we can use a special syntax which ejs, 35 00:03:13,620 --> 00:03:18,870 this package, understands and you can of course learn all about the supported syntax features either 36 00:03:18,870 --> 00:03:24,750 in my Node.js course where I cover this as well or in the ejs documentation, here I just want to use 37 00:03:24,750 --> 00:03:30,660 one of the most basic features with an angle bracket and then a percentage sign and then an equal sign 38 00:03:30,660 --> 00:03:39,270 and a closing angle bracket and now between that, you can refer to any variable name which you plan on 39 00:03:39,270 --> 00:03:45,630 providing to this view and I'll come back to how we provide that in a second. So here I'll point at user, 40 00:03:46,110 --> 00:03:52,760 you could use user name here, it doesn't matter, I'll take user here and now we have this special syntax 41 00:03:52,760 --> 00:03:58,690 in here. This is of course not regular HTML but instead this is simply a syntax understood by the ejs 42 00:03:58,770 --> 00:04:05,900 package when it later parses this file. Now to tell ejs to parse this file, we need to make sure 43 00:04:05,900 --> 00:04:13,100 that we don't set back a response like this but instead here, I want to render a view as a response and 44 00:04:13,100 --> 00:04:20,000 for that, the response object has a render method, also added by Express.js, this does not exist in pure 45 00:04:20,000 --> 00:04:21,100 Node.js. 46 00:04:21,440 --> 00:04:25,940 The render method takes a couple of arguments and the first argument is the name of the view you want 47 00:04:25,940 --> 00:04:31,700 to render and in my case, that's index because I have the index.ejs file in the views folder. You don't 48 00:04:31,700 --> 00:04:38,040 need to specify the path because we set the views folder to be the folder that holds our views up there. 49 00:04:38,150 --> 00:04:44,030 So now here, index also no extensions required because we told Express that we use ejs and that will 50 00:04:44,030 --> 00:04:49,880 automatically look for a .ejs extension and therefore we can continue with the second argument and 51 00:04:49,880 --> 00:04:58,250 that would be an object full of properties or full of data we want to provide to this template and here 52 00:04:58,250 --> 00:05:03,860 we should provide a user property because that will be the data ejs then can use when it parses this 53 00:05:03,860 --> 00:05:04,780 template. 54 00:05:05,000 --> 00:05:12,980 So here I will set a user key and set this to user name, so to this value and with that, we got a setup 55 00:05:13,000 --> 00:05:18,310 where now we should render this file and have our dynamic content in there. 56 00:05:18,310 --> 00:05:27,670 So if we now save this and we restart our server and we go into our URL and hit enter here, I 57 00:05:27,670 --> 00:05:28,280 get an error, 58 00:05:28,290 --> 00:05:30,250 could not find matching closing tag, 59 00:05:30,280 --> 00:05:32,350 Yes because here a little mistake, 60 00:05:32,350 --> 00:05:38,440 the closing tag also should start with a percentage sign, so it's closing tag percentage angled bracket, 61 00:05:38,680 --> 00:05:42,270 so just like the opening tag but without the equal sign. 62 00:05:42,280 --> 00:05:49,250 So now with that if we restart the server and we now hit enter here again, this looks good 63 00:05:49,250 --> 00:05:53,420 and now if we enter something here, click send, 64 00:05:53,420 --> 00:05:54,440 we see that. 65 00:05:54,440 --> 00:05:57,480 So now this is working with the help of our template. 66 00:05:57,500 --> 00:06:00,860 Now of course you can render way more than just this single output there, 67 00:06:00,860 --> 00:06:06,230 you could have multiple such dynamic pieces as long as you provide all the data to the view here and 68 00:06:06,230 --> 00:06:12,690 you can also do more complex tasks, like loop through a list of data or render content conditionally, 69 00:06:12,740 --> 00:06:18,050 I covered that in my Node.js course and the official ejs docs which you find attached of course also 70 00:06:18,050 --> 00:06:19,900 are a great place to dive deeper. 71 00:06:20,210 --> 00:06:26,060 Important to understand is that if you inspect this in the browser, you of course get normal HTML code 72 00:06:26,060 --> 00:06:31,630 which is rendered here, also in the response if we have a look at that in the preview, in the response here 73 00:06:31,640 --> 00:06:32,240 I mean sorry, 74 00:06:32,330 --> 00:06:34,610 you'll see you get a normal HTML code. 75 00:06:34,610 --> 00:06:41,030 We have no dynamic part here because this dynamic segment is filled on the server, on the server 76 00:06:41,030 --> 00:06:47,430 we on the fly generate a HTML document which is then appended to the outgoing response. 77 00:06:47,450 --> 00:06:49,660 That's what the view engine does here.