 Hello, this is Christian. Welcome to another course with me. In this video, we're going to create a really simple ExpressJS application using the Handlebars templated system. So let's go and check it out. Here is the site that we'll be converting. This is really created. If you remember back in Unit 1, you created this already. Yours will be different from mine by just a really simple personal site. I have like four pages here. So we're going to convert this to an Express application using Handlebars to render data to the view. But here is the site on the Handlebars website. If you go there to handlebarsjs.com, it has their own documentation. I mean, it's not really helpful here. It's a really light documentation, unfortunately. But go over it, look over that and see how it works and explore on the built-in helpers. You're probably using the if statement, the each statement for looping through an array. You can loop through an object using the width or each, either one of you will also work. But mainly, those are the ones you'll be using. So yeah, you can always refer back to this page to help you with these syntax. Okay, so let's go and convert this to Express. So here on the IDE, this is the one that we have, the unit one. As you can see, everything here is just HTML. Okay, so we have the index page, the portfolio page, and so on. Okay, so first things first, let's go and create, let me close all these first. Let's create a new folder in here. We'll call unit six now. And then let's go to the command terminal, control J, get you there really quick, go to unit six, and then npm init, right? You can just, you know, accept all the default, which is fine. We're just going to do that really quickly. Okay, we got that in here already. Good. All right, so now we need to install Express and some packages. So npm install, we want to express. And then the express handle bars. We also want the no monitor and the body parser, just in case. I think that's all we need. So let's go ahead and we can save it to the development. So those can install those packages we need. Now Express, of course, you can use different templating engine besides the handle bars. The reason why I chose handle bars is because later on when we learn about Angular, then you'll already be very familiar with the syntax because it uses the same pair of double curly braces. Okay, so I think everything looks good here. Yeah, well, it looks good. Okay. All right, so we have a node there. Good. Let's go and create some folders for handlebars to work. You have to create some folders in here. Well, first of all, let's create the public folder. First is for our CSS and images and graphics and things like that. So create another one. This will be called the views. You need the views to house your templates. Inside the view, you need two more folders. One is called the layouts, plural. And then you need another one called partials. I mean, it shouldn't be inside that. It's kind of difficult to see here. Okay, so you see that I have the views, layouts, and then the partials. Okay, so the partials will be used mainly for, like, you know, you render partial views like navigations with the footer or things like that, and you put into that folder. Okay, so we got that there. Okay, let's see. Now, to get started, we need to have a layout. You need to have a root template. Okay, so you must have a root template to render all your component, which is why, you know, we have this thing called single-page application, right? So it will render into that single template. So here, inside the layouts, create a file. And you can call it whatever you want, but I'll call it just index and the dot HBS, okay, for handlebars. We use this short extension. The long extension is you spell the whole word out handlebars. So that's pretty long. And so I think maybe initially it was handlebars, but maybe over several revisions, they shorten it to just HBS. You can still use the long version. I'll show you what that means a little bit later. So this is our main page, all right, the root template. And then the partials. We're going to create some partials in here for, like, you know, the navigations and the footers and any partial pieces or any partial view you want to inject into the main template, then you can do that here or in other templates, you do that here. Okay. And in the views template and the views, you have to also create another main template. Let's go to the view and create another file. We'll call this just main dot HBS, okay. This is the main template. What it will do is it's going to render this main template inside the index, the root template. That's what you're trying to do here. So later on, we're going to have the main template, the home template, the about, you know, portfolio and contact and so on. So all your main views will be here and then they'll be rendered inside this main or the root template. All right. Okay. So for now, let's go ahead and create our index file. So in the root of this unit six folder here, create a file called index.js. Okay. Again, the reason I call index is because now JSON file, we call it index, the main. Okay. If you can change to something else, then just make sure you match that. And so later on when you run the no monitor, it will know which one to load. So here we go. We can create our application. And again, I don't think I showed you before, but there is a shortcut in Express. You could just basically, there's not a package in Express that will actually let you, you know, scaffold all of these together using a CLI command. But you'll learn that later. But for now, I think I want you to know how things work, what other pieces and what are located and things like that. So you'll learn the hard way, I guess, but it's going to stick with you. Okay. So again, this is really standard Express. We're going to require the Express package. We need that. Oops. We need an app. Instantiate Express app. We just do the body parser. We may not need this, but should you ever need it, like later if you want to process data from, you know, from the view, then you can parse that. But it's always good to put it here just in case. And then we need to have the handle bar. I always call my EXP for Express HBS for handle bar. Okay. So just a variable name, color whatever you want. So this would be the handle bar. Handle bars package. Express handle bars. Okay. So that's our constant data up there. Now we need to go ahead and use the static. This is the link to our public folder, right? So our CSS and images and JavaScript to go into that file won't be pulled from that directory. And then now we need to set the body parser. So we'll use body parser. Oops. I'll use body parser and load the JSON and app and then use the body parser. Just don't want to use the URL encode. So again, the extended is go to true. All right. So those are pretty basic. And then now we just have to go ahead and then create the port number and so constant port, 8900 for mine. And then we're going to go ahead and listen to this port. Port. And then we'll also do a... You can do this way or you could just constant log it. It doesn't matter. Okay. So just log it. Just make it short. Just say listening to port or to server. And then we'll put our link here. Port 8900. A hard code in here but you want to use the variable name really. Yeah. Let's just use the variable name. Use the template in here. I want to make sure my things work every time. Okay. So that's up and running. And then we just had to make sure it's really working. So let's go ahead and add a... Here at the landing page. Okay. Just to test it out. So app.get is the root directory. And then again here is the request and response. Arrow function. And we just do a really simple here. Just response send. Hello. If that works then we are good to go. Okay. So let's save this and go back to the terminal. Control J. And then now let's run it. Type in node mon. And there we go. And then you just click on this. Control click. And it should load on the browser. I believe. There it is. So you can see hello here. And it's kind of small. But if you see it, that means we are good to go. All right. So now let's go and create our handlebars. Set up our handlebars. Okay. So we can close this now. Keep this running. All right. So the first thing is we need to set our handlebars. So here I put here handlebars setting. Okay. So we need to say app.set. We set the engine, the view engine. We need to say HBS. Okay. This is the short version. If you want to use a long version, I mentioned earlier, you have to use the whole thing. Handlebars like that. And then your file will have the extension of, you know, main.handlebars. Which is why it's kind of long. So we use a short version. And we use that package instead. So with that set, and then we need to call the engine. This engine here, we use again the HBS. And then the express handlebar, this object here. HBS. This one takes an object. Okay. So there's an object, just some settings. You want to set some settings in here. And for this to work, now by default, it would use the long version, the handlebars. So if you want to use a short version, then you have to set the property called xname or extension name to HBS. So in here you put xt name, and then set that to the HBS. So that will recognize that. Okay. And also you want to set a default layout. So right now, if you don't set a default layout, it's going to run a main layout. So we don't want. So ideally you want to set a default layout. So that every time when you render something to the view, you don't have to specify that every time. Okay. So we want to say the default layout is equal to the index. Okay. The index here refers to the layouts index.HBS. Okay. This is the main layout and the default layout. So that every time we render to that layout, it's going to call this. Of course, you can override it too if you want to, but this will be the default layout. Now, two other properties that you can set, you don't have to. I think it will automatically know that the layouts, all your layouts, I mean the index and the default layouts will be coming from the layouts folder. If your main views will be coming from the views folder and then that partials will be coming from the partials folder. So just make sure this is unnamed correctly here. If you don't modify them, but if you do name them differently, like my layout or my partials, whatever it is, you have a different name, then you should go in here and change them to a different layout. So here you have a layout directory. You can point that to that directory. For example, it's safe to do this. You don't have to, but you can. It just means that the layout will be coming from this views folder layouts. That's the layout, and then you duplicate that. The next one is the partials directory. This will be in the partials. Again, this is optional. If you don't change the layouts or the partials, then this is the default setup. If you do move this around, then you want to go in here and then override the default to wherever these are. So I can leave this here just to make sure that it's working. All right, I think that's it for this part. Now let's go and then for this part of the video, why don't we go ahead and just set up the main layout and then we'll be done with that for now. So go and open the unit one and the index page. This is the layout. So I'm going to copy everything here, copy the whole thing, go to the index.hbs and replace everything here. So everything here should stay the same. The only thing is that we have to go and create some CSS and JS main and then I have a logo here as well. So we're going to move those in here. So inside our public folder, you can just copy like this here. You can copy the CSS, the image and the JS. Copy those three and then paste it right into the public folder here. And so you have your CSS, images and all in here. And this will be all mapped directly into that folder because we set that inside an index. We say all the static data are coming from the public folder. So it's going to go in here public and then CSS and then you make CSS and so forth. So images is all set up. Okay, so now this is the index. So what I want to do is this. Okay, so the main here, you treat this like the landing page, the home page. So this is a template. What that means is that inside this template here, I'm going to, here's the main content here. This is the main content from here all the way to here. Okay, I'm going to cut all these out and put it inside the main template here. Okay, this is the main content. And then just right click and format this code. So I put that in here and then its place right in here. I'm going to put the three curly braces followed by the word body. Okay, this is the placeholder. This is where all your views will be rendered into this location here. You see that later on when we learn about Angular, it will be very similar. Use a root tag, same thing for other frameworks like View, JS, Ember and so forth. They use similar syntax logic. So that means that when we load, we're going to render everything in the main HBS to this location here. And everything here will be static. Whatever you need to be visible on every single page, you put outside of these tags. And so ideally, you want to break this out right here to a header partial view and then a footer partial view. Actually, we could do that right now actually. So yeah, go to the Partials and then create two files. We'll call this just header.js. Oops, no, not J, I'm sorry. It'll be HBS. It needs to be HBS. Header.hbs. And then we'll do one more for the footer. Footer.hbs. Okay, so let's go back into the index and copy the header. We'll cut it out and put into the header.hbs. Okay, and then just format that. Save that. And then the footer. Save into the footer. We'll format that. And save and close those now. Okay, so in their place, right, in here we had a partial template. So for a partial template, you will use this syntax, the two cullies, and then followed by the open of the closed bracket or the forward bracket. And then followed by the name of the template. It's called header. Put the header here, the main content, and then the footer goes right down here. So here footer and then that's it. So that is our root template. So you can see that all your scripts are in the root. See it says in the root. And the header will be rendered here. The body, the main will be rendered here. The about page will render here. Okay, so that dynamic content will be rendered into this body. So we got this setup. And then now let's go to the index.js file and modify this landing page. Now when you use template, we're not going to use the send or the send file. We use a special function called render. Okay, so the render here takes, you know, the first one, two parameters or a couple of parameters, but mainly you just need two parameters. That's the name of that template. So ours is called main. So it's going to load the main template. Notice I don't put extension, that HBS. You just don't include those. So it's going to load the main template. And I'm using that. So it's going to find the view folder. Look for a main template. And then it's going to render everything instead of main template to this default layout index inside this body. That's what it's going to do, all right? And then if you want to pass some data to it, then you put it into another here, another object here. And we'll learn about data processing in the next video. But for now, there's nothing there, so you can just leave it like that. Okay, let's see if this works. And you can save that and go to the browser and see if you got something here. Okay, so there you see that now it looks pretty good, right? It looks just like our regular HTML page. If you compare the two, it looks exactly the same, okay? Except now it's an express application and this is an HTML file. You can go to the home page. Okay, because everything here stays intact. And that is the express. And just to show that it really does work, we can do one more thing before we close this video. So again, we can pass a data, really simple data for now. Just put here a message and then the message would be, hi, hi there, okay? The message and then in the main file, let's just put like right above here so I can see. Right below here, we put a H2 and we put here a call message. That's the variable name and we save that and let's go back to the view again and refresh. Make sure you're on the right page and there you see, hi there, right? It's rendered to the view. So that is how it works. So in the next video, we're going to complete the other templates and we'll pass the data to those templates.