HandleBars Templating in ExpressJS - GeeksforGeeks

27 Apr, 2020
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 index.js file is to require the hbs module
var express = require('express')var hbs = require('hbs')var app = express()
Now, we need to change the default view engine.
app.set('view engine', 'hbs')
In case the views directory is undesirable, you can change the viewpath by the following command:
app.set('views', <pathname>)
Now let us create a demo.hbs file in our views directory with the following content:
<!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.
app.get('/', (req, res)=>{    res.render('demo')})  app.listen(3000)
Now, open your browser and type localhost:3000 on 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 the index.js, we declare a demo object, in practice, the object can be a result of the request body and/or database query.
var 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.
<!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.
var projects = {    name : 'Rahul',     skills : ['Data Mining', 'BlockChain Dev', 'node.js']}  app.get('/projects', (req, res)=>{    res.render('projects', {project : project});})
where out views/projects.hbs looks something like:
<!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

Node.js-Misc
Node.js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between dependencies, devDependencies and peerDependencies
Node.js Export Module
Mongoose Populate() Method
Mongoose find() Function
How to connect Node.js with React.js ?
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript