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'.
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
html(lang="en")
head
title Hello world!
body
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">
<head>
<title>Hello world!</title>
</head>
<body>
<h1>First pug example</h1>
<p>Let's learn pug.</p>
</body>
</html>
Pug Installation
Pug is installed via npm.
$ npm install pug
Pug Layout Attributes
These are the following Pug templating terms -
Block
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
html(lang="en")
head
block header
body
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 -
div.classname1.classname2#id
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.
Example
Create three files 'header.pug', 'main.pug', 'footer.pug' and copy and paste these codes.
header.pugdiv.header.
Site name goes here
footer.pug
div.footer.
Copyright. All Rights Reserved.
main.pug
doctype html
html(lang="en")
head
title Pug template
body
include ./header.pug
div.content
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) {
res.render('main');
});
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'.