Now that our NodeJS environment is up and running and we have a basic hello world running in Express, let's extend that with some basic middleware like a templating engine.

Add your First Middleware - a Template Engine

ExpressJS is a light weight or unopinionated web framework, meaning it does not make decisions for you, it lets the developer decide on what plugins to use. These plugins or libraries we use to extend a web framework are called middleware. The first piece of middleware we are going to add is a template engine so we can render HTML templates.

We're going to use Handlebars.js - a minimalistic, logicless templating library for server-side templating. Handlebars.js is a stand-alone library, but to use it in the context of ExpressJS we can use the express-handlebars library.

$ npm install express-handlebars --save
// app.js
var exphbs  = require('express-handlebars');

app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');

Views & Layout Folder Structure

Create a folder called views and in that folder create a folder called layouts. Inside your layouts folder create a file called main.handlebars. So your file structure should look like this:

├── app.js
└── views
    ├── hello-gif.handlebars
    └── layouts
        └── main.handlebars

Your main.handlebars file should look like this. The triple brackets {{{}}} renders html of the sub template we will pass into this layout template.

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Example App</title>



Update Your Hello World Route

Let's update the hello world route to be a hello gif route.

// app.js

app.get('/hello-gif', function (req, res) {
  var gifUrl = ''
  res.render('hello-gif', {gifUrl: gifUrl})

And define a new template in the views folder called hello-gif.handlebars that will display the gif image.

<!-- hello-gif.handlebars -->
<img src="{{gifUrl}}">

URL Parameters in Another Route

Let's add another route. This time let's use a variable in the route in order to say "greetings" to whoever is in the path.

Add a GET route so when you go to '/greetings/Bethany' your page should say "Greetings Bethany!"

// index.js
app.get('/greetings/:name', function (req, res) {
  var name =;
  res.render('greetings', {name: name});
<!-- greetings.handlebars -->
<h1>Greetings {{name}}!</h1>


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more