HandleBars Templating in ExpressJS
Last Updated :
28 Apr, 2025
Handlebars.js is a templating engine similar to the ejs module in node.js, but more powerful and simple to use. It ensures minimum templating and is a logicless engine that keeps the view and the code separated. It can be used with express as the hbs module, available through npm. HandleBars can be used to render web pages to the client side from data on the server side.
Command to install hbs module:
npm i hbs
To use handlebars in express, we need to store HTML code into a .hbs extension in the 'views' folder in the source directory as hbs looks for the pages in the views folder.
The first thing we need to do in the index.js file is to require the hbs module
javascript
const express = require('express')
const hbs = require('hbs')
const app = express()
Now, we need to change the default view engine.
javascript
app.set('view engine', 'hbs')
In case the views directory is undesirable, you can change the view path by the following command:
javascript
app.set('views', <pathname>)
Now let us create a demo.hbs file in our views directory with the following content:
html
<!DOCTYPE html>
<html>
<body>
<p>This is a Demo Page on localhost!</p>
</body>
</html>
Now, we render our webpage through express to the local server.
javascript
app.get('/', (req, res) => {
res.render('demo')
})
app.listen(3000);
Now, open your browser and type localhost:3000 on the web address and verify the webpage at your server.
Now we will see how we can dynamically link the pages to server-side data.
In index.js, we declare a demo object, in practice, the object can be a result of the request body and/or database query.
javascript
let demo = {
name: 'Rohan',
age: 26
}
app.get('/', (req, res) => {
res.render('dynamic', { demo: demo })
})
Here we send the demo object as a demo to our hbs page. We can retrieve the information in dynamic.hbs present in the views folder.
HTML
<!DOCTYPE html>
<html>
<body>
<p>{{demo.name}} is {{demo.age}} years old.</p>
</body>
</html>
Output:
Rohan is 26 years old
Given multiple values, we can iterate over all of them to perform the same functionality/display for each of the elements.
Let's take an example, add the following code to your index.js and run the server and get a response.
javascript
let projects = {
name: 'Rahul',
skills: ['Data Mining', 'BlockChain Dev', 'node.js']
}
app.get('/projects', (req, res) =& gt; {
res.render('projects', { project: project });
})
where out views/projects.hbs looks something like:
html
<!DOCTYPE html>
<html>
<body>
{{projects.name}} has the following skills : <br>
{{#each projects.skills}}
{{this}} <br>
{{/each}}
</body>
</html>
Output:
Rahul has the following skills :
Data Mining
BlockChain Dev
node.js
Similar Reads
How to do Templating using ExpressJS in Node.js ? Template Engine : A template engine basically helps us to use the static template files with minimal code. At runtime, the template engine replaces all the variables with actual values at the client-side. Templating Engine Examples: EJS (Embedded JavaScript Templating) Pug Mustache In this article w
2 min read
How to handle sessions in Express ? ExpressJS is a small framework that works on top of Node 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 HTTP objects and facilitates the render
4 min read
Server Side Rendering using Express.js And EJS Template Engine Server-side rendering involves generating HTML on the server and sending it to the client, as opposed to generating it on the client side using JavaScript. This improves initial load time, and SEO, and enables dynamic content generation. Express is a popular web application framework for NodeJS, and
3 min read
<%= vs <%- in EJS Template Engine EJS (Embedded JavaScript) is a popular templating engine that helps generate dynamic HTML content using JavaScript. It allows embedding JavaScript logic into HTML, making it a powerful tool for rendering server-side content in Node.js applications.In this article, we’ll compare <%= %> and <
4 min read
How To Serve Static Files in ExpressJS? ExpressJS is a popular web framework for NodeJS that allows developers to build robust web applications. One of its core functionalities is serving static files such as images, CSS, JavaScript, and HTML files.Syntaxapp.use(express.static(path.join(__dirname, 'public')));Serves Static Files: This lin
2 min read
What is Express Generator ? Express Generator is a Node.js Framework like ExpressJS which is used to create express Applications easily and quickly. It acts as a tool for generating express applications. In this article, we will discuss the Express Generator.Express GeneratorExpress Generator is a command-line tool for quickly
3 min read