Handlebars for Beginners
Tags: handlebars, express, javascript, coding
Published: 2022-11-11 06:32:55

## 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](https://handlebarsjs.com/)

**Folder Structure Image:-**

![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6kv1dat5kgi6a9gi9q8.png)

**Package.json Structure:-**

![Package.json Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2fqsa7hvb66bxba5vfj.png)


**App.js Code:-**

``` javascript
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:**

``` html
<!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:-**

``` html
<!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:-**

``` html
<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:-**

``` html
<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:-**

``` html
<h1>About - {{title}}</h1>
```

**Output Image of Home Page:-**

![Output Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8vjqdsihy1nxgy5qik3.png)

**Output Image of About Page:-**

![Output Image of About Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgrh7e9v6l9n82i6f9ob.png)



Thank You.
You can follow us on:
[Youtube ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)