Creating Reusable Templates with Handlebars

Tutorial 3 of 5

1. Introduction

The goal of this tutorial is to guide you on how to set up Handlebars in an Express.js application and create reusable templates. Handlebars is a simple-to-use, powerful templating engine that lets you build semantic templates effectively.
By the end of this tutorial, you will learn how to install and set up Handlebars, create and use templates, and understand how to make your templates reusable and modular.
Prerequisites: Basic knowledge of JavaScript and Node.js would be beneficial. Familiarity with Express.js would also be helpful.

2. Step-by-Step Guide

2.1 Installing Handlebars

First, you need to install Handlebars to your Express.js application using npm:

npm install express-handlebars

2.2 Setting Up Handlebars

After installation, set up Handlebars in your application:

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

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

2.3 Creating Templates

Create a views directory in your application root. Inside the views, create a layouts directory. Put your main Handlebars layout file (main.handlebars) inside the layouts directory.

<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
</head>
<body>
    {{{body}}}
</body>
</html>

2.4 Using Templates

To use a template, render it in your Express.js routes:

app.get('/', (req, res) => {
    res.render('home', { title: 'Home Page' });
});

3. Code Examples

3.1 Example - Creating a Reusable Header Template

Create a partials directory in your views directory. Create a new file called header.handlebars inside partials:

// header.handlebars
<header>
    <h1>{{title}}</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>

To use this template, include it in your main layout:

// main.handlebars
<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
</head>
<body>
    {{> header}}
    {{{body}}}
</body>
</html>

4. Summary

We have covered installing Handlebars, setting it up in an Express.js application, creating templates, and making them reusable.
As next steps, you can explore other features of Handlebars such as helpers and blocks.
Additional resources:
Handlebars.js Official Documentation
Express.js Official Documentation

5. Practice Exercises

Create a reusable footer template that includes a copyright notice. Include this footer in your main layout.
Create a 'contact' page using Handlebars and Express.js. Include your header and footer templates in this page.
Create a template for a blog post. This template should include the post title, date, author, and content.

Solutions:
1. Create footer.handlebars in partials directory:

<footer>
    <p>&copy; {{year}} My Website</p>
</footer>

Include in main layout:

{{> footer}}

In your Express.js routes:

app.get('/contact', (req, res) => {
    res.render('contact', { title: 'Contact Page', year: new Date().getFullYear() });
});

Create post.handlebars:

<article>
    <h2>{{title}}</h2>
    <p>By {{author}} on {{date}}</p>
    <div>{{{content}}}</div>
</article>

Use this template:

app.get('/post', (req, res) => {
    res.render('post', { title: 'My Post', author: 'Me', date: 'Today', content: 'This is my post.' });
});

Remember, practice makes perfect. Keep experimenting with Handlebars to become proficient at it.