Node Js - Generate dynamic pages using a template engine

What is a Template Engine?

Template engines help you to generate dynamic Html pages by injecting dynamic values at runtime. At runtime, the template engine replaces the variables in a template file with actual values and sends the file to the client.

A Template engine makes you more productive and your code more readable. Using a template engine you can write reusable HTML and also you can easily render data fetched from the database or an API.

Some popular template engines that work with Express are Pug(earlier Jade), Handlebars, Mustache, EJS, etc.

We will see examples for both handlebars and Pug template engine, you can use any of them in your project.

Pug Template Engine

Steps to follow to use the Pug template engine:

1. Install the pug template engine using npm.

npm install pug

2. Specify the Template Engine you are going to use in your Js file

app.set('view engine' , 'pug')

3. Create a views directory in your project and then create the index.pug file


html
    head
        title #{title}

        body 
        h1 #{message}

4. Then, Create a Route to render the index.pug file.


const express = require("express");

const path = require("path");

const app = express();

app.set("view engine", "pug");

app.get("/", (req, res) => {
  res.render("index", { title: 'Template', message: 'Hello' });
});

app.listen(8000, () => {
  console.log("server is up and running at 8000 port");
});

The index.pug page is the default, when you don't mention the page name in the browser, Index.pug will be rendered.

Note: The View Engine does not cache the content of the Html, it just cache the template. So the content will re-render for every request.

HandleBars Template Engine

Steps to follow to use the HandleBars template engine:

1. Install the hbs template engine using npm.

npm install hbs

2. Specify the Template Engine you are going to use in your Js file

app.set('view engine' , 'hbs')

3. Create a views directory in your project and then create the index.pug file



<html>
    <head>
        <title>{{title}}</title>
    </head>
    <body>
        {{message}}
    </body>
</html>

4. Then, Create a Route to render the index.pug file.


const express = require("express");

const path = require("path");

const app = express();

app.set("view engine", "hbs");

app.get("/", (req, res) => {
  res.render("index", { title: 'Template', message: 'Hello' });
});

app.listen(8000, () => {
  console.log("server is up and running at 8000 port");
});

Note: Views folder is the default folder where express looks for dynamic pages but if you want to change the folder, you have to mention the path.


const ViewsPath = path.join(__dirname, './templates')
app.set('views', ViewsPath)

MEAN Tutorials

Node Js - Generate dynamic pages using a template engine