Beginners guide to use Handlebars with NodeJS app

This article will give an introduction to what are handlebars and a step by step guide if you are a beginner. In this tutorial, I assume you to have a basic knowledge of nodejs and express.

Minimal Templating on Steroids

Contents

Introduction
Installation
Getting Started
Handlebar Expressions
Partials
Custom Helpers
Conclusion

Introduction

Handlebars is a simple templating language.

What is a templating language?
It is a language that allows defining placeholders that are later replaced for the purpose of implementing designs. But, you can do much more than that. Modern template languages also provide loops and conditional statements which are often necessary for designing a web page. It will also help you separate template logic from main business logic. If you are a front-end web developer, using a template engine will save you hours of work. Using a template engine will keep your HTML page clean and simplifies or nullifies the task of manually updating the data.

Why handlebars?
Handlebars.js is logicless templating, i.e. it separates view and code(main logic) as it should be. Remember, we don't put logic in the template and try to keep it as simple as possible.

Handlebars

Installation

First, we need to install the express package. Express is a flexible NodeJS framework that gives robust features to develop the web application.

npm init     //to initialize the project
npm install express

Now, we will create app.js file which will be the entry point of our application and contain the logic.

The output will look something like this.

Next, we will run

npm install hbs

hbs package is Express.js view engine for handlebars.js.

Getting Started

Before moving forward, let us define the directory structure for our project.

|--node_modules
|--public
| |--stylesheet.css
|--routes
| |--pages.js
|--views
| |--partials
| |  |--navbar.hbs
| |--index.hbs
|--app.js
|--package-lock.json
|--package.json

Now, modify app.js and define routes in pages.js. Also, create index.hbs

Head on to localhost://3000 and you can see the exact same result. Nothing extraordinary, right?

Handlebar Expressions

Now, we will pass the variable and use Handlebars expressions to display the variable. Suppose you want to display Hello and then the name of the person.

Handlebars expressions are the contents enclosed by double curly braces {{}}. In the below example, name is a variable that is enclosed by double curly braces, which is said to be an expression.

Similarly, you can pass the nested objects and access them in the index.hbs

{
  country: {
     name: "India",
     capital: "New Delhi",
  },
}

Loops: You can also loop through your data if it's an array.

country = [
  {
     name: "India",
     capital: "New Delhi",
  },
  {
     name: "England",
     capital: "London",
  },
  {
     name: "Russia",
     capital: "Moscow",
  },
]

If you want to display say only the 2nd element of the array the correct syntax is array.[1].name or array.1.name
array[1].name is wrong.

Access index along with array value: We use @index to access the index of the array inside the loop.

{{#each country}}
   {{@index}} : {{capital}} is the capital of {{name}}
{{/each}} 

Conditional Statements

if statement
{{#if value}}
 //Do something
{{/if}}
if-else statement
{{#if value}}
 //Do something
{{else}}
 //Do something
{{/if}}

Let’s say we want to display rating of the product, only if the product had some valid rating, or else just display No rating available.

Partials

Partials are handlebar templates that can be called from other templates. It allows us to reuse the template component.

The components like navbar, footer and header are pretty much the same throughout the application. It makes sense to define a separate template for these components and call them directly when needed.

First, you need to register Partials by Handlebars.registerPartials

Define the navbar.hbs inside partials directory.

Now we need to call navbar.hbs from index.hbs which can be done by partial call syntax {{> navbar}}

You can also pass parameters through partials.

{{> partial parameter1=value1 parameter2=value2}}

Custom Helpers

Suppose we want to display the length of the name variable that is being passed. There is no inbuilt functionality in handlebars to do this but, you can define your own using Handlebar helpers.

Helpers can be used to implement functionality that is not part of the Handlebars language itself. To do so you need to first register the helper.

To call the helper in hbs file, use {{length name}}

Conclusion

This was a very basic introduction to Handlebars. This tutorial was just to get you started and there is more you can explore. There are many more functions like Block Helpers, Built-in helpers, hooks that you can learn from the official documentation.

I hope this article was helpful and you learned something new.