What is Handlebars?
Handlebars is one of the most used templating engines for web applications “competing” with other well-known ones like Mustache js, Pug, EJS and others. It's especially used on the server side along with the express js framework.
Official Documentation:- Handlebars
Folder Structure Image:-
Package.json Structure:-
App.js Code:-
const express = require("express");
const handlebars = require('express-handlebars');
const path = require("path");
const helpers = require("handlebars-helpers")();
const app = express();
const PORT = 8000;
const hbs = handlebars.create({
extname: "hbs",
defaultLayout: "main",
layoutsDir: path.join(__dirname, 'views/layout'),
helpers: helpers,
partialsDir: path.join(__dirname, 'views/partials')
});
app.engine("hbs", hbs.engine);
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, "views"));
// Custom Helper
helpers.makeBold = function (aString) {
return '<strong style="color:red">' + aString.toUpperCase() + '</strong>';
};
app.get("/", (req, res) => {
res.render("home", {
title: "Express",
peoples: ["salman", "sharukh", "amitabh"],
products: [
{
name: "mobile",
category: "Electronics",
stock: 1000
},
{
name: "Electronics",
category: "Electronics",
stock: 0
},
{
name: "mobile",
category: "Electronics",
stock: 1000
}
]
})
})
app.get("/about", (req, res) => {
res.render("about", {
title: "about",
layout: "second"
});
})
app.listen(PORT, () => {
console.log(`Server is Listening at ${PORT} Port.`);
})
main.hbs Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<h1>home</h1>
{{{body}}}
</body>
</html>
second.hbs:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<h1>second</h1>
{{{body}}}
</body>
</html>
productloop.hbs Code:-
<hr>
<h1>products -
{{#each products}}
<span style="color: red;"> {{@index}} </span> - {{this.name}}
{{#eq this.name "mobile"}}
common
{{else}}
not common
{{/eq}}
{{#if this.stock}}
{{this.stock}}
{{else}}
(zero)
{{/if}}
{{/each}}
</h1>
<hr>
home.hbs code:-
<h1>home - {{title}}</h1>
<h1>peoples - {{peoples}}</h1>
{{add 20 30}}
<h1>divide {{floor (divide 20 12)}}</h1>
{{!-- {{/add}} --}}
<h1>makebold {{#makeBold "aksh"}} {{/makeBold}}</h1>
{{#contains peoples "salman1"}}
salman is there
{{else}}
salman is not there
{{/contains}}
<h1>peoples -
{{#each peoples}}
{{this}}
{{/each}}
</h1>
<hr>
<h1>products -
{{#each products}}
<span style="color: red;"> {{@index}} </span> - {{this.name}}
{{#eq this.name "mobile"}}
common
{{else}}
not common
{{/eq}}
{{#if this.stock}}
{{this.stock}}
{{else}}
(zero)
{{/if}}
{{/each}}
</h1>
<hr>
{{> productloop}}
about.hbs code:-
<h1>About - {{title}}</h1>
Output Image of Home Page:-
Output Image of About Page:-
Top comments (0)