How to Configure multiple View Engines in Express.js ?

How to Setup Handlebars View Engine in Node.js ?

Last Updated : 27 Apr, 2020

Handlebars is a template engine that is widely used and easy to use. The pages contain .hbs extension and there are many other template engines in the market like EJS, Mustache, etc. Installation of hbs module:

You can visit the link Install hbs module. You can install this package by using this command.
```
npm install hbs
```
After installing hbs module, you can check your hbs version in command prompt using the command.
```
npm version hbs
```
After that, you can just create a folder and add a file for example index.js, To run this file you need to run the following command.
```
node index.js
```
To setup hbs view engine, you need to write this middleware in your index.js as follow:
```
app.set('views', path.join(__dirname))
app.set('view engine', 'hbs')
```
Now create the file and run the code. It will display the result.

Filename: Home.hbs

html

<!DOCTYPE html>
<html>
<head>
    <title>Handlebars Demo</title>
</head>
<body>

    <!-- For loop demo -->
    {{#each array}} 
      <h4>{{this}}</h4>
    {{/each}}
    <h4>{{message}}</h4>
</body>
</html>

Filename: index.js

javascript

const express = require('express')
const path = require('path')
const hbs = require('hbs')
const app = express()

// View Engine Setup
app.set('views', path.join(__dirname))
app.set('view engine', 'hbs')

app.get('/', function(req, res){
    res.render('Home', {
       array: ['One', 'Two', 'Three', 'Four'],
       message: 'Greetings from geekforgeeks'
    })
})

app.listen(8080, function(error){
    if(error) throw error
    console.log("Server created Successfully")
})

Steps to run the program:

The project structure will look like this:
Make sure you have installed hbs and express module using the following commands:
```
npm install hbs
npm install express
```
Run index.js file using the following command:
```
node index.js
```
Open browser and type this URL: http://localhost:8080/. Then you will see the Home.hbs page as shown below:

So this is how you can setup Handlebars (hbs) view engine in node.js. There are many other handlebars engines exist like EJS, Mustache, etc.

How to Configure multiple View Engines in Express.js ?

G

gouravhammad

Improve

Article Tags :

Similar Reads

How to Setup View Engine in Node.js ?

View engines are useful for rendering web pages. There are many view engines available in the market like Mustache, Handlebars, EJS, etc but the most popular among them is EJS which simply stands for Embedded JavaScript. It is a simple templating language/engine that lets its user generate HTML with

How to Display Images using Handlebars in Node.js ?

In this article, we will discuss how to display images using handlebars in Node.js. You may refer to this article for setting up handlebars View Engine in Node.jsApproachTo display images using Handlebars in Node.js, pass the image URLs to the template from your server. In the Handlebars template, u

How to use Template Engines in Express JS ?

Express.js is a popular web framework for Node.js that simplifies the process of building web applications. One of the key features of Express is its ability to integrate with template engines, allowing developers to dynamically generate HTML pages with data from their server. In this article, we'll

How to separate Handlebars HTML into multiple files / sections using Node.js ?

In this article, we will learn about separating Handlebars HTML into multiple files/sections using Node.js and using it on any page that you want. It helps in reducing the repetition of code. For example, instead of adding the whole navbar on each page, you can just make a template of that navbar an

How to Configure multiple View Engines in Express.js ?

View engines present in web application framework are basically the template engines that allow us to embed dynamic content into the web pages, render them on the server, and send them to the client. With the help of these, we can serve dynamic data, and utilise the template inheritance properties t

How to add pug engine in Express.js ?

Express is a small framework that sits on top of Node.js web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize your applicationâ€™s functionality with middleware and routing; it adds helpful utilities to Node.jsâ€™s HTTP objects; it facilitates the re