So now we'll move on to one
of the main topics of this course section.
We want to generate HTML content dynamically
on the server site,
but not as we did it before in our JavaScript code,
but instead we want to use a feature called templates
where we in the end,
we'll be able to write regular HTML code in HTML files
with a twist,
with some dynamic placeholders
inside of the HTML file in the end.
To get the best of both worlds, HTML files,
but with content that can be generated on the server.
And that is a feature that is so important
for so many websites,
basically any website that has dynamic data
like a online shop, a social network,
any page of that kind will have dynamic data
and therefore templates
and this feature of having templates,
that's something which is used by a lot of websites.
Hence it's officially supported by Express,
and it's very easy to use there.
Now for this, it's important to understand
that there are different template engines
that you can use.
Because templates are in the end HTML files
with some placeholders
and some special syntax inside of the HTML code,
and different template engines
simply use different syntaxes, different languages,
that they define themselves,
which might sound cryptic,
but it will become clear.
In case of Express,
we got a couple of popular template engines,
and one of the most popular ones
is an engine called EJS,
which is a extra package,
we now need to install into this project.
And for this I'll quick start running node mon server,
which you should do whenever you install and you package
by pressing control-C here,
and then I'll run NPM install to install a new package,
and the package name is ejs.
Now, if you search for EJS,
you'll find it's official page
where you can learn more about it and about its syntax.
And you'll also find this NPM page for EJS
where you can also learn more
about this package we're installing,
which is that templating package we install.
And here you see how that general syntax
will look like and what you can do,
but of course,
we're going to learn that step-by-step in this course
and in this section now.
So NPM install EJS is what we want to execute.
This will download it,
add it as a dependency in package.json
and in the node modules folder.
And with it installed,
we can go back to app.js
to our node express application file,
and also restart our server with npm start.
And in app.js, we can now set a templating engine.
We can now tell express
that we want to use a templating engine
and which engine that is.
And doing that is quite straightforward
because as I said,
it's a feature that is already built into express.
We do it on this app object,
typically as the first thing after creating the object
by calling this express function.
And here on app,
we can now call a set method.
Now set is a method we haven't used before,
it's a method that allows us to set certain options
for this express app.
And here we want to set two options.
The first option is the view engine option
with that we in the end tell express
that we want to use a special engine,
a so-called template engine
for processing our view files
before we sent them back as HTML.
And then as a second argument,
we now pass the name of that engine
and in our case, that's ejs now,
if you use a different engine,
this will be a different name,
but we install EJS,
so that's the name we use.
Now, we also need to set one other option for express,
and we typically do that before setting the view engine,
and that is the views setting.
Now with that we want to let express
know where it will find our template files
that we want to process with that templating engine.
Now, the option we want to set
that is understood by express is views
just as the option name here was view engine,
so these are not names that are up to you,
these are names understood by express,
reserved names so to say.
The second value here then is the value for that option.
And that should be a path to the folder
that contains your template files.
At the moment, we got no template files,
but I plan on storing them in the views folder,
which currently holds the HTML files,
and hence here I'll create a path
with the good old path join method,
where we use dirname and then views.
Here views refers to this views folder name,
so that's the relation we got here.
Now with these two options set,
we unlock this templating feature built into express.
And now of course it will be interesting
to see how that feature works.
Well, first of all,
we'll have to rename all these HTML files,
since we now want to convert them into templates
that can be handled by EJS.
And we can simply do that by replacing .html with ejs.
We can still have HTML code in there
because the idea behind a templating engine
like EJS is that it generates HTML code
and therefore HTML code as a input is allowed.
Hence we don't need to change the content of those files,
but we need to change all those extensions.
Just like that here in all those places,
replacing .html with .ejs,
with that we make it very clear
that these are templates that should be passed by ejs.
Now that's step number one,
step number two now takes place in our routes,
instead of creating a file path here
and sending back a file manually,
we can now replace this code here in get slash nothing
with res.render,
render is another method available on this response object,
and its job is to render a so-called template,
which means pass a template file
with help of a template engine
and convert it to HTML,
which then will be sent back to the browser.
And we can use this method
because we registered view engine,
a template engine, as we called it thus far,
and hence render will know that it should use EJS
for passing a template file
that can be found in this views folder
and for then getting some HTML content as a response,
or as a result of that passing
and that it should then send back
that generated HTML content as a response.
So long story short,
all we got to do now here
is pass in the name of the template
that should be passed and sent back for this route.
And for this route,
this will be index ejs,
so we pass in just index,
we omit the file extension here,
because since we use ejs as a view engine,
it will automatically look for .ejs files.
And that's all,
and therefore, as an extra benefit,
we now don't have to construct
their path again and again and again,
instead in all our routes,
we can now just call res.render,
and pass back our .ejs files without the extension.
So for slash restaurants,
it's restaurants pointing at this restaurants ejs file,
for slash recommend it's res.render,
and then recommend pointing
at the recommend ejs file and zone.
For the post route nothing changes,
there I still want to redirect,
but here for confirm,
it's now also rest.render confirm like that,
and for about it's of course the same
there it's all the res.render about.
So we now have way more concise and shorter code.
And if we now save everything
and we go back here,
all these pages should still work just fine.
So that should all work as before,
but now the HTML content,
which is received by the browser
is actually generated dynamically
with help of that templating engine on the server.
And if you're wondering why that is helpful,
well that's now the next step,
because now with help of that templating engine,
we will be able to inject logic and dynamic content
into these files so that the actual HTML file
or the actual HTML content
can be generated dynamically on the server,
and can therefore change over time.