By Vishal Basumatary in javascript — Mar 23, 2023

basic express.js app with handlebars as templating engine

Building a Basic Express.js App with Handlebars as Templating Engine

If you're looking to build a web application using Node.js, you'll want to familiarize yourself with the Express.js framework. Express.js is a popular Node.js web framework that provides a robust set of features for building scalable and maintainable web applications. One of the key features of Express.js is its support for various templating engines, including Handlebars.

Step 1: Setting Up Your Project

The first step in building an Express.js app with Handlebars as your templating engine is to set up your project. Here's how you can do it:

Open your terminal or command prompt and create a new directory for your project.
Once you're inside your project directory, run the following command to initialize a new Node.js project:


npm init -y

Next, install the necessary dependencies for your project:


npm install express express-handlebars

Step 2: Creating Your Server

Now that you have your project set up, it's time to create your server. Here's how you can do it:

Create a new file called "index.js" in your project directory.
Inside "index.js", require the necessary modules:


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

Create a new instance of the Express.js app:


const app = express();

Set up your app to use Handlebars as your templating engine:


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

Create a basic route to render a Handlebars view:


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

Step 3: Creating Your Views

Now that you've created your server, you'll want to create your views using Handlebars. Here's how you can do it:

Create a new directory called "views" in your project directory.
Inside the "views" directory, create a new file called "home.handlebars".
Inside "home.handlebars", add some HTML and Handlebars code to create your view:


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

Step 4: Starting Your Server

Now that you've set up your server and created your views, it's time to start your server. Here's how you can do it:

In your terminal or command prompt, run the following command to start your server:


node index.js

Open your web browser and navigate to "http://localhost:3000".

You should see your Handlebars view rendered in the browser.

Alternative Method: Using Express Generator

If you prefer a more automated approach to setting up your Express.js app with Handlebars as your templating engine, you can use the Express Generator. Here's how you can do it:

Install the Express Generator globally:


npm install -g express-generator

Create a new Express.js app with Handlebars as your templating engine:


express --view=handlebars myapp

This will generate a new Express.js app with Handlebars as your templating engine. You can then navigate to the app directory and run "npm install" to install the necessary dependencies.

From here, you can follow the same steps as outlined in Step 3 and Step 4 above to create your views and start your server.