Blog

Minimum JS Required to Get Express Handlebars Running for Node.js
Posted on August 6, 2016 in Node.js by Matt Jennings

Steps

  1. Install the following modules, using the commands below and pressing Enter after each one: 
    npm install express --save
npm install express-handlebars --save
npm install nodemon --save
  2. Create a server.js file inside your root directory and insert the code listed below: 
    // Module that deals with routing and
// "require" loads an additional library
var express = require('express');

// Express handlebars module
var exphbs = require('express-handlebars');

// An instance of the express app
var app = express();

// Tell express to use handlebars as it's templating engine
// and look for a file called "views/layouts/base.handlebars" for
// the master layouts and then other files inside "views"
app.engine('handlebars', exphbs({defaultLayout: 'base'}));
app.set('view engine', 'handlebars');

// Define a route inside express,
// "get" refers to an HTTP method,
// in the callback function 
// "req" refers to a request object and
// "res" refers to a response object
app.get('/', function(req, res) {
    res.render('home');
});

// For Cloud 9 I must use port 5000 (see below)
// and for other apps the port is usually 80
// Code below means listen to the default port number number 
// provided by the server (Cloud) or 5000, if none is provided,
// convert this into a number type, and assign it to a "port" variable
var port = Number(process.env.PORT || 5000);

// app listens to traffic on port 5000
app.listen(port);
  3. Create a base.handlebars file located at /views/layouts/base.handlebars with the following code: 
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Example App</title>
</head>
<body>
    <h1>Header</h1>
    <hr />
    
    {{!-- 
    This is a handlebars comment and
    code below outputs HTML from 
    res.render in server.js file
    --}}
    {{{body}}}
    
    <h1>Footer</h1>
</body>
</html>
  4. Create a home.handlebars file located at /views/home.handlebars with the code listed below: 
    <h2>home.handlebars View Here</h2>

Leave a Reply