All language subtitles for 003 Setting up Pug in Express_Downloadly.ir_en

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.