In a previous article I discussed adding server side Handlebars templates to Express 3 using express-hbs package. This article is an update that discusses Express 4.

Setup

Configuration is quite simple. You first set the view engine in express. Then provide configuration information for the engine. Finally you set a default path for the views.

By default this module looks for files with the .hbs extension. You can configure the partials path view partialsDir and the layout path vis layoutDir. Additionally you can set the default layout via defaultLayout.

var express = require('express')
  , hbs     = require('express-hbs')
  , app
  ;

// create Express 4 App
app = express();

// set the view engine
app.set('view engine', 'hbs');

// configure the view engine 
app.engine('hbs', hbs.express4({
  defaultLayout: __dirname + '/views/layouts/default.hbs',
  partialsDir: __dirname + '/views/partials',
  layoutsDir: __dirname + '/views/layouts'
}));

// configure views path
app.set('views', path.join(__dirname,'/views'));

server.get('/', function(req, res) {
  var user = {
    first: 'Brian',
    last: 'Mancini',
    site: 'http://derpturkey.com',
    age: 32
  }
  res.render('index', user);

});

server.listen(8000);

Views

Views get rendered by the router via the render method. You can supply information to them in the form of an object.

Views can optionally have a layout provided in the json via the layout property. You can also specify the layout inside the view.

The view in views/index.hbs may look something like this:

{{!< main}}

{{{#contentFor 'head'}}}
<style type="text/css">
.header { background-color: #f0f6f6; }
</style>
{{{/contentFor}}}

Hello {{first}}!

This view a the layout named main that, based on the configuration, will be located in views/layouts/main.hbs

Layouts

Creating a layout allow you to specify the default block {{{body}}} of text as well as other blocks that can be override in the view, such as {{{block head}}}.

Based on the configuration above, the default layout will be in views/layouts/main.hbs

<!DOCTYPE>
<html>
<head>
  <title>Handlebars Test</title>
  <style type="text/css">
    body { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }
    .box { box-sizing: border-box; }
    .header { border-bottom: 1px solid #c0c0c0; padding: .75em 0; margin-bottom: 1.5em; }
    .main { width: 70%; float: left; }
    .sidebar { width: 30%; float: right; padding-left: 1.5em; }
  </style>
  {{{block head}}}
</head>
  <div class="header">
    <h1>Handlebar Testing</h1>
  </div>
  <div class="box main">
    {{{body}}}
  </div>
  <div class="box sidebar">
    {{> user}}
  </div>
</html>

Partials

This example also uses a partial called user that gets called with {{> user}}.

Based on the configuration this partial will be located in views/partials/user.hbs

<ul class="user-info">
  <li>{{first}} {{last}}</li>
  <li>{{age}}</li>
  <li><a href="{{site}}">{{site}}</a></li>
</ul>

For more information and more examples, refer to the documentation at https://github.com/barc/express-hbs