How to Setup Handlebars View Engine in Node.js ?

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 hbsAfter installing hbs module, you can check your hbs version in command prompt using the command.npm version hbsAfter 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.jsTo 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.
You can visit the link Install hbs module. You can install this package by using this command.npm install hbs
npm install hbs
After installing hbs module, you can check your hbs version in command prompt using the command.npm version hbs
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
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')
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
<!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
const express = require('express')const path = require('path')const hbs = require('hbs')const app = express()  // View Engine Setupapp.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 expressRun index.js file using the following command:node index.jsOpen browser and type this URL: http://localhost:8080/. Then you will see the Home.hbs page as shown below:
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
npm install hbs
npm install express
Run index.js file using the following command:node index.js
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.
Node.js-Misc
Node.js
Web Technologies
Web technologies Questions
Write From Home
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.