Express Handlebars

by John Vincent

Posted on July 5, 2017

Handlebars for an Express App

Straightforward stuff, so let us begin.

NPM express-handlebars

npm express-handlebars

Configure

Configuration is performed in the middleware layer.

config/middleware.express.js

app.engine('hbs', hbs({
    extname: 'hbs', defaultLayout: 'main',
    layoutsDir: __dirname+'/../views/layouts/',
    partialsDir: __dirname + '/../views/partials/'
}));
app.set('views', path.join(__dirname, '../views'));
app.set('view engine', 'hbs');

Structure, as an example

root
  views
    layouts
    pages
      home
      login
      register
      reset-password
    partials
      home

Render

Snippet from default layout, main.hbs

<title>{{ title }}</title>
...

{{{ body }}}

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="/assets/js/{{ js }}"></script>

app.get('/login', function(req, res) {
    return res.render('pages/login/login', {
        title: 'Login - News Reader',
        js: 'login/login.js'
    });
});

Note

Uses the default layout
{{{ body }}} is replaced with pages/login/login
{{ title }} is replaced with Login - News Reader
{{ js }} is replaced with login/login.js
The generated Html is sent with the response. It is a very simple structure that is used by many endpoints.

It can be used anywhere, including controllers

let data = emailUtils.userRegistrationConfirmedEmail(req, _user.username);
emailUtils.sendEmail(data);
return res.render('pages/register/complete', {
    title: 'Registration is complete',
    js: 'login/empty.js'
});

Note that main is the default layout but it can be overridden.

The home page also uses handlebars. This allows

Break up the Html into partials
Keep data out of the Html by using variables.
This layout is highly reusable.

Route

app.get('/', function(req, res) {
    let home_url = `${req.protocol}://${req.get('host')}`;
    return res.render('pages/home/home', {
        layout: 'home',
        title: 'News Reader',
        description: 'News Reader by John Vincent',
        keywords: 'News Reader, RSS, Rss Feed, Mongo, Node, Sass, aggregator',
        author: 'John Vincent',
        twitter_username: 'johnvincentio',
        google_profile: 'https://plus.google.com/107711732062970686024',
        home_url
    });
});

Partials

A critical part of the system. As above, home page uses

layout = home.hbs
page = pages/home/home

Snippet from layout

<body>

{{{ body }}}

{{> home/google-analytics }}

</body>

This allows Google Analytics code to be separate from the page.

{{{ body }}} is replaced with pages/home/home which follows

{{> home/header }}

{{> home/splash }}

<section class="content-wrapper">

    {{> home/features }}

    {{> home/testimonials }}

    <section id="get-started" class="section-our-plans content">
        <h2 class="content-head is-center">Our Plans</h2>

        {{> home/pricing }}

        {{> home/information }}

    </section>

    {{> home/contact-us }}

    {{> home/footer}}

</section>

{{> home/google-fonts }}

<script defer src="/assets/js/home/home.js"></script>

The syntax for the partial home/header is

{{> home/header }}

This allows for the home page to be defined as partials, which replaces {{{ body }}} in the home page layout.

Beautifully simple.

Express CookiesBasic Express Server