Express js Template

View Engine

Before exploring express.js template, first, let's understand the term 'view engine'. View Engine is the actual rendering of the page. There are many view engines are available for express.js, like - Handlebars, Mustache, Pug, and EJS. Among these engines the most popular view engine is the 'Pug'.


The pug was previously known as 'Jada'. It allows us to write a few lines of code. These is no need to write close html tags, so the code looks much prettier. It has powerful features like loops, conditions, mixins. We will explain these features further in details. Pug takes different approach to write html tags. It takes only the element name inside of the whole tag.

Simple pug example

doctype html
title Hello world!
h1 First pug example
p Let's learn pug.

The code we write in pug gets converted into a standard HTML document, as a web browser can understand only standard HTML document. This will get translated to the following HTML content on demand.

doctype html
<html lang="en">
<title>Hello world!</title>
<h1>First pug example</h1>  
<p>Let's learn pug.</p>  

Pug Installation

Pug is installed via npm.

$ npm install pug

Pug Layout Attributes

These are the following Pug templating terms -


Pug provides many features for making dynamic templating. Suppose, we are creating a template and we want to keep the header and footer sections in a separate file, for this pug provides a block keyword.

doctype html
	block header
	block body

In the above code, we are using two blocks, block header and block body.

HTML attributes

In pug, html attributes are written in parenthesis with comma separated.

div(width="120", height="100")

CSS class and id

In pug, class and id attributes are written as follows -


Render Template File in Express.js

To render pug template files in express application, we need to set up views and view engine in your main file. In the first line of the below code, we specify the pug template engine and in the second line we specify the location of template file's directory.


Create three files 'header.pug', 'main.pug', 'footer.pug' and copy and paste these codes.

   Site name goes here
   Copyright. All Rights Reserved.
doctype html
		title Pug template
		include ./header.pug
		p.para Content goes here.....
		include ./footer.pug

Then, write the following code in your main express file to render the 'main.pug' file.

var express = require('express');  
var app = express();  

app.set("view engine","pug") ; 
app.get('/', function (req, res) {
var server = app.listen(3000, function () {  
    console.log('Server is running at http://localhost:3000');

Now, open command prompt and run the app from the project folder using the following command.

$node main.js

and open your web browser at 'http://localhost:3000'.