How to use Handlebars with Express - René Kulik

Content

Introduction
Requirements
Express
Handlebars
Set up Express
Install and use Handlebars
- Main layout
- Change file extension

Introduction

In this post I will demonstrate how to use the Handlebars view engine with Express.

Requirements

Node.js has to be installed on your system.

Express

Express is a simple and easy-to-use Node.js-Framework. It is very flexible and comes with a lot of features for building web and mobile applications.

Handlebars

Handlebars is an extension for the popular Mustache template language. It is logic-less and keeps the views and logic separated.

Set up Express

Create a directory for your application and make it your working directory.

$ mkdir example-app
$ cd example-app

After that you have to create a package.json file interactively.

$ npm init

This command will ask you a bunch of questions. Hit return to proceed using default values.

Install Express and add it to the dependencies list.

$ npm install express --save

Create an index.js in the root of your project and add the following content:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Example app is running → PORT 3000');
});

Start the server and visit http://localhost:3000. The output will be Hello World!.

$ node index.js

Install and use Handlebars

Install the express-handlebars package via npm.

$ npm install express-handlebars --save

Afterwards, update the index.js as follows:

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

// Register Handlebars view engine
app.engine('handlebars', exphbs());
// Use Handlebars view engine
app.set('view engine', 'handlebars');

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(3000, () => {
  console.log('Example app is running → PORT 3000');
});

When requesting the index route (”/”), the application tries to render the index.handlebars which has to be present in a “views” folder. To make the code work, create the directory and the file. Then put in “Rendered by Handlebars, AWESOME!”. After restarting the server and calling the index route, you should see the sentence in your browser.

Main layout

A layout file is a simple Handlebars template which contains a {{{body}}} placeholder and serves as an HTML wrapper for views. To specify such a layout, we have to slightly adjust the code.

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

// Register handlebars view engine
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
// Use handlebars view engine
app.set('view engine', 'handlebars');

...

After these changes the application searches for a main.handlebars layout file in “views/layouts”. Accordingly, the layout folder and main.handlebars file have to be created.

main.handlebars example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example App</title>
</head>
<body>

{{{body}}}

</body>
</html>

Do not forget to restart the server after adjusting the code.

Change file extension

You want to use .hbs file extension instead of .handlebars? No problem!

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

// Register Handlebars view engine
app.engine('.hbs', exphbs({defaultLayout: 'main', extname: '.hbs'}));
// Use Handlebars view engine
app.set('view engine', '.hbs');

...