Express Template Engine

The template engine allows you to code your views with the ability to insert dynamic data. Express support many template engine, here in this example we will use pug template engine. These files have the .pug extension. Most of the template engines allow variables, condition, and loops. The variables in the HTML pages are being replaced by the actual values with the help of the template engine at run time. The view template engine makes the design of HTML easier because templates are transformed into HTML files at run time.

Implementing a Template Engine

app.js
app.set(‘views’, path.join(__dirname, ‘views’));
app.set(‘view engine’, ‘pug’);
In Route
res.render(‘index’, {title: ‘Express’});

In this example we will just create simple example to learn

1. Project folder structure.
2. Routing in express
3. Simple pug usage

Step 1: Create a project in npm init and add npm package express, body-parser, pug and morgan.

Step 2: Create a folder public where we add folder images, javascript, and stylesheets for our project. Create routes folder in rooter where we add all our routing code and last create folder views where we add our pug template file. Add the following code in app.js file

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var aboutus = require('./routes/aboutus');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/aboutus', aboutus);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Add the following code in routes/index.js file for the home page routing

var express = require('express');
var router = express.Router();

/* GET root page. */
router.get('/', function(req, res, next) {
  res.render('index', {
    title: 'Home',
    description: 'Edupala : Welcome' 
  });
});

module.exports = router;

Add the following code in routes/aboutus.js file for the aboutus routing.

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send('Edupala Information');
});

router.get('/team', function(req, res, next) {
  res.send('Edupala teams');
});

module.exports = router;

Step 3: Now we will create views or template for our project. In views/layout.pug add following codes

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

For the index page, add the following code in views/index.pug

extends layout

block content
  h1= title
  p Hello #{description}

To display error, add the following code in views/error.pug

extends layout

block content
  h1= message
  h2= error.status
  pre #{error.stack}

To run the project use npm start