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.
Another great write up! FYI, the first two links to your previous articles go to localhost
Thanks for your support koop.