HandleBars Templating in ExpressJS

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

filter_none

edit
close

play_arrow

link
brightness_4
code

var express = require('express')
var hbs = require('hbs')
var app = express()

chevron_right


Now, we need to change the default view engine.



filter_none

edit
close

play_arrow

link
brightness_4
code

app.set('view engine', 'hbs')

chevron_right


In case the views directory is undesirable, you can change the viewpath by the following command:

filter_none

edit
close

play_arrow

link
brightness_4
code

app.set('views', <pathname>)

chevron_right


Now let us create a demo.hbs file in our views directory with the following content:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <body>
        <p>This is a Demo Page on localhost!</p>
    </body>
</html>

chevron_right


Now, we render our webpage through express to the local server.

filter_none

edit
close

play_arrow

link
brightness_4
code

app.get('/', (req, res)=>{
    res.render('demo')
})
  
app.listen(3000)

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

var demo = {
    name : 'Rohan',
    age : 26
}
  
app.get('/', (req, res)=>{
     res.render('dynamic', {demo : demo})
})

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <body>
        <p>{{demo.name}} is {{demo.age}} years old.</p>
    </body>
</html>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

var projects = {
    name : 'Rahul'
    skills : ['Data Mining', 'BlockChain Dev', 'node.js']
}
  
app.get('/projects', (req, res)=>{
    res.render('projects', {project : project});
})

chevron_right


where out views/projects.hbs looks something like:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <body>
        {{projects.name}} has the following skills : <br>
        {{#each projects.skills}}
            {{this}} <br>
        {{/each}}
    </body>
</html>

chevron_right


Output:

Rahul has the following skills : 
Data Mining
BlockChain Dev
node.js



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.