Create website with nodejs express and handlebars

Hello World, Today we are going to Create website with nodejs express and handlebars. In my previous articles i have explained that how to create simple static website with nodejs, express and jade. In this tutorial we will learn how to create website with nodejs, express and handlebars. Following is the content of this article:

Introduction of Nodejs, Express and Handlebars
Set up project on local system.
Set up view engine as handlebars.
Create Todo Templates.
Testing the whole concept.

Introduction of Nodejs, Express and Handlebars

Nodejs and Express – I have given the introduction of nodejs and express in my previous article create static website with nodejs, express and jade. You can read from this link.
Handlebars – According to their official website “Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.“

Sample code of handlebar is following:

<div>Hello there {{name}};</div>

Setup Project on local system

Create sample-website-handlebars folder.
Open your command prompt and go to this folder.
Run the npm init command.
Run the following command to install packages for the project.

npm install express express-handlebars --save

Create app.js file with the following code.

var express=require('express');
var exphbs=require('express-handlebars');
var path=require('path');

var app=express();

// Set View Folder
app.set('views', path.join(__dirname, 'views'));

// Set Static Path
app.use(express.static(path.join(__dirname, 'public')));

// ToDo APp Start
app.get('/',function(req,res){
    res.send('Hello World');
});
// ToDo APp End

// Run the Server
app.listen('3000',function(){
    console.log('Server is running at PORT '+3000);
});

Run the server with node index.js command. You will see the “Hello World” Message in browser. It means we have successfully settled up our project on local machine.

Set up view engine as handlebars

Open your index.js file and add the following code after views set up.

app.engine('handlebars', exphbs.create({
    defaultLayout: 'main',
    layoutsDir: app.get('views') + '/layouts',
    partialsDir: [app.get('views') + '/partials']
}).engine);
app.set('view engine', 'handlebars');

Also change the following line with this line app.render(‘index’)

res.send('Hello World');

After adding the above code, index.js file look like following

var express=require('express');
var exphbs=require('express-handlebars');
var path=require('path');

var app=express();

// Set View Folder
app.set('views', path.join(__dirname, 'views'));

// Set up View engine
app.engine('handlebars', exphbs.create({
    defaultLayout: 'main',
    layoutsDir: app.get('views') + '/layouts'
}).engine);
app.set('view engine', 'handlebars');

// Set Static Path
app.use(express.static(path.join(__dirname, 'public')));

// ToDo App Start
app.get('/',function(req,res){
    res.render('index');
});
// ToDo App End

// Run the Server
app.listen('3000',function(){
    console.log('Server is running at PORT '+3000);
});

Make sure that you have downloaded the bootstrap 3 because we will use bootstrap 3 for our templates.
Create layouts folder in views folder with main.handlebars file.
Add the following code in main.handlebars file

Main Layout
{{{body}}}

Create index.handlebars file in views folder with following code.

ToDo List

Run the server. You will see the following screen in your browser.

Create ToDo Templates

Download Bootstrap 3 and keep in /public/lib folder
Open main.handlebars file and add the following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {{!-- Bootstrap 3 --}}
    <link rel="stylesheet" type="text/css" href="/lib/bootstrap-3/css/bootstrap.min.css" />
    <title>ToDo List</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                {{{body}}}
            </div>
        </div>
    </div>
</body>
</html>

Open index.handlebars, add the following code

{{!-- Task List Start --}}
<h1 class="page-header">Todo List <a href="/add-task" class="btn btn-success pull-right">Add Task</a></h1>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Task List <span class="badge">5</span></h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item">
                Task 1
            </li>
            <li class="list-group-item">
                Task 2
            </li>
            <li class="list-group-item">
                Task 3
            </li>
            <li class="list-group-item">
                Task 4
            </li>
            <li class="list-group-item">
                Task 5
            </li>
        </ul>
    </div>
    <div class="panel-footer">
        Last Updated : 
    </div>
</div>
{{!-- Task List End --}}

Create add-task.handlebars file in views folder with following code

 {{!-- Add Task Start --}}
 <h1 class="page-header">Todo List <a href="/" class="btn btn-success pull-right">Task List</a></h1>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Add Task</h3>
    </div>
    <div class="panel-body">
        <table class="table table-bordered">
            <tr>
                <th>Task Title</th>
                <td><input type="text" class="form-control" /></td>
            </tr>
            <tr>
                <th>Task Description</th>
                <td><textarea class="form-control"></textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <input type="submit" class="btn btn-danger" value="Add" />
                </td>
            </tr>
        </table>
    </div>
</div>
{{!-- Add Task End --}}

Open index.js file and add the following code after loading index file.

app.get('/add-task',function(req,res){
    res.render('add-task');
});

Now we will add some static data into our app.

Open index.js file and add the replace the index render function with the following code.

app.get('/',function(req,res){
    var taskModel={
        taskList:[
            {
                title:'Task 1',
            },
            {
                title:'Task 2'
            },
            {
                title:'Task 3'
            },
            {
                title:'Task 4'
            },
            {
                title:'Task 5'
            }
        ],
        lastAdded:Date()
    };
    res.render('index',taskModel);
});

Now Open the index.handlebars file and replace the following code with previous one.

{{!-- Task List Start --}}
<h1 class="page-header">Todo List <a href="/add-task" class="btn btn-success pull-right">Add Task</a></h1>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Task List <span class="badge">5</span></h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            {{#each taskList}}
            <li class="list-group-item">
                {{title}}
            </li>
            {{/each}}
        </ul>
    </div>
    <div class="panel-footer">
        Last Updated : {{lastAdded}}
    </div>
</div>
{{!-- Task List End --}}

Testing the whole concept

Run your Server. You will see the following screenshots.

Task list look like following

Add task page look like following

In this tutorial, We have created simple static Todo list website with nodejs express and handlebars. In the next tutorial i will make the the data dynamic with mongodb.

If you like my tutorial then please like and share.

2 thoughts on “Create website with nodejs express and handlebars”

Koop March 2, 2018 at 3:52 pm

Another great write up! FYI, the first two links to your previous articles go to localhost

Reply ↓
1. admin Post authorMarch 3, 2018 at 10:47 am
  
  Thanks for your support koop.
  
  Reply ↓

ProjectsPlaza

Php Projects, Django Projects, Laravel Projects, Codeigniter Projects