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 '' + aString.toUpperCase() + '';
};
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:
lang="en">
charset="UTF-8">
http-equiv="X-UA-Compatible" content="IE=edge">
name="viewport" content="width=device-width, initial-scale=1.0">
</span>{{title}}<span class="nt">
home
{{{body}}}