In the last two videos you set up express to correctly serve up your static assets.
Now for us we chose to put all of our static assets in the public directory.
Everything inside of there was made available via the web server.
This included the CSX images javascript and HDL documents that we wanted users in the browser to be
able to access now Static means that the assets are static they do not change.
I could refresh this page five hundred times and I would always get the exact same result.
It is a static web page not a dynamic web page.
Now there are times where a static web page is exactly what we want but that's not always the case.
In this video you're going to learn how to use what's called a template engine to render dynamic web
pages using Express.
Now the template engine that we're going to setup in this video is called handlebars.
Handlebars is going to allow us to do two very important things first up.
As mentioned it's going to allow us to render dynamic documents as opposed to static ones.
And the other thing that's going to allow us to do is to easily create code that we can reuse across
the pages.
So think about index dot HDL as an example.
When I was filling out this page to create a real Web site I would likely want to put in a header up
top and a footer down below and the header and the footer are something I'm going to share across all
web pages to make the site feel like one cohesive experience.
It would be bad if you went from one page to another on the site and the header kept changing styles
or formats.
That's gonna make it really confusing to navigate without a template engine.
I'd have to write out the header here and then copy and paste it into my other HDMI documents.
Now that's obviously not ideal because that means I wouldn't need to go to all of those documents if
I wanted to make any changes.
It would be nice to be able to have the header markup in one place and be able to reuse it across all
of the pages in my site with a template engine.
We can do just that.
So once again with handlebars we'll be able to render dynamic content and we'll be able to easily use
and reuse little pieces of markup throughout the various pages in our app.
Let's go ahead and kick things off by setting up the tool in our project to get everything up and running.
There are two NPM modules I want to take a quick moment to show you the first we can find by googling
NPM the handlebars.
This is the handlebars package.
And if we crack this open we can see it is a very popular templating tool with about 4 million weekly
downloads.
Now this is a low level library that implements handlebars in JavaScript.
It can be used in a wide variety of settings like the browser the server desktop applications with electron
or anywhere else that JavaScript can be used.
Now for our purposes we want to use handlebars with our Express server the handlebars module isn't going
to let us get that done.
There is a another handlebars library though which you can think of kind of like a plug in for Express
which essentially integrates handlebars into Express.
We can find that by googling NPM HB S. HB S. which is short for handlebars.
Is the library that we're going to install and set up now.
HB Yes uses handlebars behind the scenes.
HB asked just makes it really easy to integrate with Express.
Let's go ahead and take a moment to install this and integrate it into our application down below.
I'm going to shut down node man and we're gonna use npm install right here NPM I the module HB S. at
the latest version that is four point zero point one.
Now when we go ahead and install that it's going to get all of the code set up in node modules as always.
And it'll add the dependencies to package dot Jason and package LOC dot Jason.
Now once we have it installed the process of getting set up is actually really easy.
All we need to do is tell Express which templating engine we installed and we do that by using a new
method on app that is app dot set now set allows you to set a value for a given express setting and
there are a few.
We have a key.
The setting name and we have a value.
The value we want to set for the setting in our case to set up a view engine like express the value
is view space engine.
And it is important that this matches up exactly with the spacing and capitalization taken into account.
If you don't set it exactly express isn't going to know what you're trying to do and the value we use
is the name of the module we installed in this case H B S and there we go that single line is all we
need to get handlebars set up.
Now we can actually use it to create some dynamic templates.
Now when we're working with express it expects all of your views.
In this case our handlebars templates to live in a specific folder that is in the root of the project.
It's supposed to live in a folder called views.
So for us the route of the project is the web server folder and we're going to create a new views directory
right inside of there.
In here we can put our handlebars views and that's exactly what I'm going to end up doing what we're
going to do is create a view that replaces the home page.
So instead of the home page being a static document served up from public it's going to be a handlebars
template right here.
Let's create that file.
We have index dot HDL for the H T and L document.
I'll call this view index DOT and the extension we use here is H B S which is the handlebars extension.
Now you'll notice right away that Visual Studio code displayed the handlebars logo this handlebar mustache
and that is because Visual Studio code has built in support for handlebars.
That means that you're going to get all of the nice features you'd expect when writing code like syntax
highlighting auto completion and more now a handlebars file is nothing more than HDR Nel with a couple
of nice to have little features for injecting dynamic values.
That means we can actually start with just a regular old HDL document to see how all of this works.
What I'm going to do is take index down HDL exactly as it currently exists.
I'm going to copy the entire file and I'm going to paste it over in index Dot.
HB Yes.
So instead of the home page being served up as a static file we are going to render it using handlebars
and express serving this document up to the user.
Now currently the end result would be the exact same thing we had before because we're not taking advantage
of any of the handlebars features but we'll explore those in just a second.
For the moment let's just go ahead and set up a different title so we can actually see this page rendered
in the browser.
What I'm going to do is just render weather and if we see whether we know things are working and that's
the goal so far.
Now since we are going to transition the index file from being an HDMI document to a handlebar file
I can actually remove it from the public folder.
Now this is not to say that you shouldn't serve up static assets or that you shouldn't serve a static
HDMI documents.
That's not what I'm getting at.
What I'm showing you is different ways to get the job done.
If you need to serve up a static document you can continue to put them in public.
That's going to work just great.
If you need something a little more complex with dynamic content than handlebars is probably your best
bet.
So right here I'm going to delete index dot HDL since we have index dot HB s in place.
Now it's important to note that so far no one is gonna be able to access this page from our web server
to actually serve up this template.
We need to set up a route.
So once again that'll be an app dot get call.
We're going to show this one on the home page so I'll leave that first string empty.
Then as the second argument we'll have our function with request and response as the two arguments which
we've used before now inside of here.
The only way we've ever sent information back to the requester is via response dot sent.
We saw how we could send back a regular old string or an H T email string or even an object or an array
which would get converted to Jason in this case the goal is to not use to send but to use render render
allows us to render one of our views.
We've configured express to use the view engine HP s so with render we can render one of our handlebars
templates right here.
All we need to do is provide as the first argument the name of the particular view we want to use right
here inside of quotes.
That is index.
There is no need for the file extension.
This just needs to match up with the name of the template you created in that views folder.
Since they match up we are good to go and we can actually test things out before taking it to the next
level and actually rendering dynamic content down below from the terminal.
I'm gonna use the up arrow key to cycle through my previous commands getting back to node mine where
I run source forward slash app dot J S I'm gonna run that command and now we're gonna visit local host
three thousand and we're gonna visit the root of the site to see our template rendered over here local
host three thousand I'm going to go from forward slash about to just the route and what do I get I get
whether showing up as expected.
So by calling response dot render express goes off and it gets that do it then converts it into h t
UML and to make sure that each TSL gets back to the requester.
And in this case we've proved that happens by viewing it over in the browser.
Now at this point we have a static document.
There is nothing dynamic about it even though we're using handlebars.
Let's go ahead and fix that by actually passing a value in what we're going to do is go ahead and provide
a value for this title.
So instead of hard coding it in the file it's going to be provided by node j.
S now to provide a value that's accessible in the template we have to provide a second argument to render.
So the first argument is the name of the view to render and the second argument is an object which contains
all of the values you want that view to be able to access.
So as an example I could provide title and I could set that to a string like whether I'm going to go
ahead and change that up just so we can see a difference between the two.
I'll say weather app and I could provide a another value as well like name and I could set that equal
to Andrew Meade as an example.
Now that we're injecting both of these values into the template the template can actually take advantage
of them and that's what's going to create the dynamic HDMI document.
So right here we can use either title or name in handlebars.
The question is how do we get that done.
Well we use a little bit of the handlebars syntax if we want to inject a value in an HP s file we open
and close to curly braces.
That looks a little bit like this.
So I open two up then I close both right inside.
I reference the thing I'm trying to access so I could access title which is available or I could choose
to access name which is also available now if I save index Dot.
HB Yes we should be able to access our title since we've passed that in and we are indeed referencing
it.
Now if we go ahead and refresh the page what do we see.
We see weather app showing up.
That means the value which node provided to the template is indeed being used.
I could switch that up even further.
I'm gonna go ahead and bring it back to its original value weather.
And if I were to refresh the page here once again we're seeing weather now we also have access to that
other value we provided to the template.
This was name and I could also choose to use that.
So right here I'm going to create a p element for paragraph and I will just put some text inside of
here like created by then I'm going to inject the name.
So I open to curly braces.
I closed those two curly braces off and I reference the value inside name.
Now if we refresh the page I should see both of my values showing up in the template and that is exactly
what I get right here.
I have the title weather and I have the name shown as part of the paragraph down below.
Now with this in place we know how to use a handlebars template to render some dynamic values that end
up getting provided by node j s let's work through this process one more time for the about page then
as your challenge you'll do it for the help page.
So what I'm gonna do is create a new template in the views directory called about Dot each s..
And in here we're gonna have contents pretty similar to about Dot HDL.
So I'll take the contents of the HDL file I'll paste them into the HB S. file allowing me to make them
dynamic then I'll delete these static files since we're no longer going to need that.
So I'll remove about Dot HDL from the public directory though it's still gonna be important that other
assets like the image and the CSF sheet are served up from the public folder.
Otherwise this page won't be able to access that.
So we have about Dot HB S. but it's never gonna show up because it's not being used in our Express application.
Over here we can fix that app dot get setting up forward slash about.
We're also going to set up our function and as we've done before we'll be using response dot render
to render a template.
The name is about remember we leave off the file extension and this indeed is enough to get us started.
If I save the file I could head over to forward slash about and what do I get.
I get the exact same file I had before.
Now we could choose to make some content dynamic like we did with index dot HP yes in here I have create
by instead of created by.
So let me go ahead and fix that typo.
And then what I'm going to do is take both of those and bring them over to about Dot.
HB Yes.
So for the moment even though we're rendering dynamic content which is a good start we're not reusing
it and that's OK.
We're going to address that in the next video.
So over here I'm going to expect that title gets provided.
So I will open up to curly braces title and then close those off and then down below the image I can
provide that same text a little paragraph saying and created by followed by the name provided.
Perfect.
Now this matches up pretty closely with what we had over here.
The only thing we need to do was actually provide values for both.
So over in app dot J S we're going to pass in an object as the second argument to render.
We just used title in name in the template so I have to provide both of those title and name.
Now for a title I'm going to use about me just so I can see the difference between the two and for name
I'll use my name.
Andrew Meade perfect.
Now that we have this in place we can make sure all of our files are saved.
I can refresh the page and what do I get.
I get about me printing which is my dynamic value and in my footer text I get Andrew Meade showing up
which is coming from right here.
Now it's time for you to convert the help page on your own.
And this one isn't going to get title or name provided we're going gonna switch things up and make the
challenge a bit more interesting.
So right here.
Goal.
Create a template for the help page.
Step one you're going to set up a help template to render a message to the screen.
So you want to create a new template in the views folder.
You can start by copying the old file over to that new template.
And what you're going to do is expect that you'll get a help message provided and you're going to show
that entire message in a paragraph.
So you'll have to set up a new paragraph and you'll have to use the message inside of it.
Now step two once you have the template setup you want to set up the route to render it and you want
to pass in an example message.
I use title and name for these two values for your example message.
You can use whatever you liked just make sure to use the same as the value you pass in and make sure
it's the same in the template itself.
Now once you have everything set up in terms of the route and the render call you want to visit the
page and make sure you actually see the help page with your help.
Message showing up take some time to knock that out test your work when you're done come back and click
play
how'd that go.
I'm going to kick things off by creating that view.
So right here in the views folder help dot H B S now as I mentioned we could start this file off from
the help dot HDL file so I'm going to take the contents here.
I'm going to bring them over to help dot HB.
Then I can go ahead and save the template file and remove the old HDMI document which I'll do now that
we have things in place the goal was to get a message showing up and I wanted you to put that in a new
paragraph.
I'll put that just below the H1 though you could have put it above as I didn't specify.
Next up we're going to pass a value in.
I could choose a name for this whatever I like.
I'm going to use help text as my name.
If you use something different.
Once again that is OK.
Now what the template complete.
We can set up the route that's actually going to render it.
To do that.
Another call to app dot get this time forward slash help as the page we're working with.
We're going to set up the request and the response arguments in our callback and all we need to do is
use response dot render.
I'm going to provide to the two arguments it needs.
First the name of the new template.
We call that help dot HB S. so I'll pass help in here.
And the second is our object with all of the data required by the template.
In this case help text is the only thing needed.
Now for this text you could have used whatever you liked.
I will just use this is some helpful text as my example.
Now that wraps up step two the last thing to do is to test our work.
I'm going to make sure that all of my files are saved and I'm going to go over to local host three thousand
and visit the new route which we set up as forward slash help.
When I do that what do I get.
I get this is some helpful text printing which is fantastic.
If you're seeing that it means you're all done with the challenge and you're all done with this video.
In this one we learned how to use handlebars to allow us to render dynamic content we're able to set
up templates which are very similar to HDMI documents that we can inject specific values inside whether
it's help text title name or whatever else your application needs.
Now this is just the beginning of exploring handlebars in the next video you're going to learn how to
create reusable handlebars partials which can be used for things like footers headers and sidebars which
would appear on more than just a single page.
I'm excited to get to that.
So let's go ahead and jump right in to the next video.