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.pug
div.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'.






Read more articles


General Knowledge



Learn Popular Language