Blog

Basic Node.js Code for the express-handlebars Module
Posted on June 20, 2016 in Node.js by Matt Jennings

Steps:

  1. To install the express-handlebars module, in your shell navigate to your root directory and type in the three lines below, pressing Enter after each one: 
    npm install -g express --save
npm install -g express-handlebars --save
npm install -g nodemon --save
  2. Then, in your /server.js file in the root, add the code 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) {
    // Below prints "Hello World!" on screen 
    // when I go to "/" relative path on website
    // res.send('Hello World!');    
    
    // Tells Express to look for a 
    // "home.handlebars" template inside "base" directory
    res.render('home');
});

app.get('/tester', function(req, res) {
    res.render('tester');
});


// Set up a static folder for files that don't change,
// like CSS and images and for example 
// if "hello.html" is inside this "public" directory then
// it this file will be viewable at "/static/hello.html"
app.use('/static', express.static('public'));

// 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 /views/layouts/base.handlebars file that has the code below: 
    <!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 /views/home.handlebars file that has the code below: 
    this is home.
  5. Create a /views/tester.handlebars file that has the code below: 
    tester
  6. In your shell, run the Node.js app by typing the code below are pressing Enter: 
    nodemon server.js

Leave a Reply