Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 11, 2022 06:32 am GMT

Handlebars for Beginners

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:-

Folder Structure

Package.json Structure:-

Package.json Image

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

Output Image of About Page:-

Output Image of About Page

Thank You.
You can follow us on:
Youtube
Instagram


Original Link: https://dev.to/akshdesai1/handlebars-for-beginners-150p

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To