Previous

Express.js Setting Up Handlebars

Handlebars is a powerful templating engine that is commonly used with Express.js to generate dynamic HTML content. It allows you to embed expressions, control structures, and helpers in your templates to dynamically render data.

 

Key Features of Handlebars

  • Logic in Templates: Handlebars supports built-in helpers like loops, conditionals, and custom helpers to add logic within your templates.
  • Template Partials: You can reuse portions of templates (like headers or footers) by using partials.
  • Precompiled Templates: Handlebars templates can be precompiled for better performance in production.

 

Steps to Set Up Handlebars in Express.js

Install Handlebars
To use Handlebars with Express.js, you need to install the express-handlebars package. Run the following command:

npm install express-handlebars

Set Handlebars as the View Engine
After installing express-handlebars, you need to configure Express to use Handlebars as the view engine.

In your app.js or server.js file, add the following configuration:

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

// Set Handlebars as the view engine
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

// Optionally, specify the views folder if it's different from the default
app.set('views', './views');

Create Views Folder
Create a views folder in your project directory where you will store your Handlebars templates.

Create Handlebars Templates
Inside the views folder, create Handlebars template files (e.g., index.handlebars).

Example views/index.handlebars:

<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
</head>
<body>
    <h1>Welcome to {{title}}!</h1>
</body>
</html>

Render Views in Express Routes
You can now render Handlebars templates and pass dynamic data from your Express routes.

Example route:

app.get('/', (req, res) => {
    res.render('index', { title: 'My Express Application' });
});

When a request is made to the root URL (/), Express will render the index.handlebars template and replace the {{title}} placeholder with the value 'My Express Application'.

Run the Application
Now, run the Express application using the following command:

node app.js

When you navigate to http://localhost:3000 in your browser, you should see the rendered HTML page with the dynamic content.

 

Using Partials in Handlebars

Handlebars allows you to use partials to reuse portions of templates across different views, such as headers or footers.

Create a Partial Template
Create a partial template file, such as header.handlebars inside the views/partials folder:

<header>
    <h1>Header Content</h1>
</header>

Register the Partial in Your Application
In your main Express app file, register the partials folder to make the partials available:

app.engine('handlebars', exphbs({ defaultLayout: 'main', partialsDir: 'views/partials/' }));

Include the Partial in Other Templates
In your index.handlebars template, include the header partial:

{{> header}}
<h2>Main Content</h2>

The {{> header}} tag will include the header.handlebars partial in the main template.

 

Passing Data to Handlebars Templates

You can pass various types of data (strings, objects, arrays) from your Express routes to Handlebars templates.

Example of passing an object:

app.get('/', (req, res) => {
    const user = { name: 'John Doe', age: 30 };
    res.render('index', { user });
});

In views/index.handlebars, access the properties of the user object:

<h1>Name: {{user.name}}</h1>
<p>Age: {{user.age}}</p>

 

Using Helpers in Handlebars

Handlebars allows you to define custom helpers for reusability and clean logic in templates.

Register a Helper
Register a helper function in your Express app. For example, to create a helper for formatting dates:

exphbs.create({
    helpers: {
        formatDate: (date) => {
            return new Date(date).toLocaleDateString();
        }
    }
});

Use the Helper in Templates
In your Handlebars templates, use the helper function:

<p>Current Date: {{formatDate currentDate}}</p>

This will format the currentDate based on the formatDate helper.

 

Summary

Setting up Handlebars in an Express.js application is simple and allows for dynamic HTML rendering. After installing the express-handlebars package and configuring Express, you can use Handlebars templates to create dynamic views. Handlebars also supports partials, helpers, and the passing of data into templates, which makes it a powerful tool for generating HTML pages.

Previous