‫Let's start by setting up our templating engine
‫in Express, which will then allow us
‫to render out websites using simple templates
‫as we talked about before.
‫So as you already know by now,
‫in this part of the course it's now time
‫to actually send a final rendered website to the client
‫containing, of course, all the data
‫that we've been working with up until this point,
‫like tours, users and reviews.
‫Now, how do we actually build or render these websites?
‫Well, we use what's called a template engine
‫which will allow us to create a template
‫and then easily fill up that template with our data.
‫And the template engine that we're going to use
‫in this course is called pug.
‫There are a couple of other template engines
‫like handlebars or EGS for people who don't like pug,
‫because I know there are some strong opinions around pug,
‫but I would still say that pug is actually
‫the most commonly used template engine with Express.
‫So let's now, in this video, set up pug
‫and render our very first webpage using it.
‫The first step is to actually tell Express
‫what template engine we're gonna use,
‫and we do that by saying
‫right at the beginning here of the app,
‫app.set, so basically this is like a setting
‫for the view engine, and then we set that to pug.
‫And that's it.
‫So Express automatically supports
‫the most common engines out of the box,
‫and of course, pug is one of them.
‫So we actually don't even need to install pug,
‫and we also don't need to require it anywhere.
‫All of this happens behind the scenes
‫internally in Express.
‫So we defined our view engine,
‫now we also need to define where these views
‫are actually located in our file system.
‫So our pug templates are actually called views in Express.
‫That's because these templates are in fact
‫the views in the model view controller architecture
‫which we have been using in this course up until this point.
‫As you know we already have the controllers,
‫and the model folders.
‫Let's actually close these.
‫And so now it's time to actually create the views folder.
‫With that we have the three components
‫of the MVC architecture.
‫In order to now define which folder
‫our views are actually located in,
‫all we need to do again is to say app.set,
‫and this time it's the view setting, or actually views,
‫and then here the name of the path.
‫Now here we could just put something like this,
‫so /views, but that's not ideal.
‫As you know already, the path that we provide here
‫is always relative to the directory
‫from where we launched the Note application,
‫and that usually is the root project folder,
‫but it might not be.
‫So we shouldn't use dot here,
‫but we should instead use the directory name variable.
‫So let's do that, and together with a nice trick
‫that we can use with Note, which is using the path module.
‫Path is a built-in Note module, so a core module,
‫which is used to manipulate path names, basically.
‫So require path, so of course
‫we don't have to install anything.
‫It's just a native built-in module.
‫What we can now do is path.join,
‫and then the directory name, and then views.
‫This will then, basically behind the scenes,
‫create a path joining the directory name /views.
‫Now it might seem here a bit overkill
‫to use this path.join function here,
‫but we don't always know whether a path
‫that we receive from somewhere already has a slash or not.
‫So you will see this function here used all the time
‫in order to prevent this kind of bug.
‫Because this way we don't even need to think
‫about any slashes or not,
‫because Note will automatically create a correct path.
‫Actually we should also use this here
‫where we create this middleware.
‫Here we should indeed use the exact same thing here.
‫So let's just duplicate this.
‫So path join, and public.
‫Let's actually put this one here at the top,
‫because it kind of belongs together with these here.
‫Still a middleware, but as you will see
‫in one of the next videos, this closely works
‫together with a views engine.
‫But this here we have now set up our pug engine.
‫Now it's time to create our very first template.
‫So in here let's create our first pug file
‫called base.pug, and as you will see
‫vs code actually has its own nice icon for this file type.
‫All I really wanna do here for now
‫is to create an h1 element, so a main heading
‫simply with the name of some tour,
‫and the way that works with pug is just like this.
‫So h1, and then the content of the element.
‫Let's say The Park Camper.
‫And that's actially it!
‫That will then translate to this here,
‫h1 The Park Camper, and then close that.
‫So, in html we would have to write this,
‫but the pug syntax makes it so much easier
‫to write html like this.
‫Of course it will also allow us
‫to put all kinds of variables in here,
‫so that we can really inject our data into these templates,
‫but for now I'm really just interested
‫in putting out something to the browser.
‫A lot more about how pug actually works
‫over the next couple of lectures.
‫For now we have our base template here,
‫and keep that name in mind.
‫We can now actually create a new route
‫from which we will then access that template.
‫So let's actually do that here right before the api route.
‫So, app.get, which for rendering pages in a browser
‫is usually always the one that we use,
‫and so that specified the url here, so the route,
‫and that's simply the root of our website.
‫Then just like before we of course need a handler function,
‫so request, response,
‫and now to render our template
‫just like before we used the response object,
‫we still set the status to 200 in this case for okay.
‫But then instead of using json, like this,
‫as we've always used up until this point
‫now it's time for using render.
‫So render will then render the template
‫with the name that we pass in,
‫and that is in this case, base.
‫We don't even need to specify the pug extension
‫because Express will automatically know
‫that this is the file that we're looking for
‫and of course it will look for this file
‫inside of the folder that was specified
‫right in the beginning, so this one.
‫It will go into the views folder,
‫and in there look for the template with the name base.
‫Then it will take that template, and render it,
‫and then basically send it as a response to the browser.
‫Great, so let's test that now.
‫So, our server is still running
‫at local host port 3000 I believe.
‫And that gives us this error,
‫cannot find module pug, and so actually,
‫we really do need to install the pug module.
‫So I said earlier that we did not,
‫but actually we do need to do that.
‫Express will still load it behind the scenes automatically,
‫but it doesn't come with all of these template engines
‫installed out of the box.
‫So npm install pug.
‫And here we go,
‫so let's try that again,
‫and now indeed we get the park camper.
‫That's our h1 element that we just created
‫in the base.pug file, and if we now inspect this
‫you will see that it is a simple h1 element.
‫Of course there is no styling
‫and no CSS at all at this point,
‫but we're going to take care of that
‫over the next couple of lectures.
‫For now what matters here is that
‫as we access our root, route here on our host,
‫so having this is indeed the same as having this.
‫As we access this route we now get access
‫to a dynamically rendered website
‫based on our base.pug template, great.
‫That's the first step on how to set up pug,
‫and over the next couple of lectures
‫you will then learn to really use this template engine
‫to build amazing, dynamic websites.