Node Tutorial: How to Install Handlebars

Node Tutorial: How to Install Handlebars

The purpose of setting up Handlebars it to help us create a more dynamic system. Google: express handlebars to learn more about handlebars.

Install command:

npm install express handlebars

Once the package has been downloaded, restart the development server.

To get this to work, we are going to need to add a few additional things to our app.

Add the following to your index.js file

const exphbs = require('express-handlebars');

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

Now we have to create routs since we are using a dynamic engine.

Add the following to your index.js file

app.get('/', function (req, res) {
     res.render('home');
});

We are going to set up a new file structure within our app. The Express Handlebars full documentation is found here but the essentials are down below.

We are going to create all these files within our project. Here is the example from our project:

Using the Handlebars Pages

Most websites have the same header and footer. Since the same stuff is always at the top and at the bottom. Handlebars lets us break those parts off into their own page. This way you only have to change the information once rather than having to go to every page and make the change.

This is supper helpful and a great way to make the creation and editing of your website so much simpler.

Enter your main.handlebars page and enter the following code:

<!doctype html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<title>Hello world!</title>
</head>

<body>
<div class="container">
{{{body}}}
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>

</body>

</html>

Make note of a very specific part. This small bit of code will allow us to call any file as the body of the webpage. Now everything that comes before or after can be changed in one file. Example: the header and footer.

Go to the home.handlebars page and enter the following code:

<h1>This is my handlebars home page</h1>

Reload your server and your webpage should look like this:

So if we go to our index.html page, it will still be there, same goes for our about.html. These static pages are still available, however, our root URL will now be directed to the handlebars page we created.

This makes it easy to quickly create static pages and dynamic pages together and will simplify many aspects of the website creation and routing.

That’s all you have to do in order to create handlebars pages. Simple and easy!

If you want to add new pages, just add a new file in views and add a new rout similar to the route we made for the homepage.

For more information, about Node Projects and using handlebars, view our other Node posts on our coding page.

Leave a Reply

Your email address will not be published. Required fields are marked *