Skip to content

Courses
Tutorials
Practice
Contests

NodeJS Tutorial
NodeJS Exercises
NodeJS Assert
NodeJS Buffer
NodeJS Console
NodeJS Crypto
NodeJS DNS
NodeJS File System
NodeJS Globals
NodeJS HTTP
NodeJS HTTP2
NodeJS OS
NodeJS Path
NodeJS Process
NodeJS Query String
NodeJS Stream
NodeJS String Decoder
NodeJS Timers
NodeJS URL
NodeJS Interview Questions
NodeJS Questions
Web Technology

How to use Template Engines in Express JS ?

How to Setup Handlebars View Engine in Node.js ?

Last Updated : 27 Apr, 2020

Comments

Improve

Suggest changes

Like Article

Like

Report

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

   <!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 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 use Template Engines in Express JS ?

gouravhammad

Improve

Article Tags :

Node.js
Web Technologies
Write From Home
Node.js-Misc

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.js ApproachTo display images using Handlebars in Node.js, pass the image URLs to the template from your server. In the Handlebars template,

How to include CSS files in EJS View Engine?

Including CSS files is important for styling web pages in web development with Node.js, Express, and EJS. In this article, we will explore the process of including CSS in such projects to enhance the visual appeal and user experience. Approach to include CSS file in EJS:We're building a Node.js web

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

How to Download and Install Node.js and NPM

NodeJS and NPM (Node Package Manager) are essential tools for modern web development. NodeJS is the runtime environment for JavaScript that allows you to run JavaScript outside the browser, while NPM is the package manager that helps manage libraries and code packages in your projects. To run a Node

Headings in Pug View Engine

Pug.js is a template engine for Node.js and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML. Pug has many powerful features like conditions, loops, includes, and mixins using which we can render HTML code based on user input or

How to Create and Run a Node.js Project in VS Code Editor ?

Visual Studio Code (VS Code) is a powerful and user-friendly code editor that is widely used for web development. It comes with features like syntax highlighting, code suggestions, and extensions that make coding easier. In this article, we'll show you how to quickly create and run a Node.js project

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences