How to use template engines with the Express

A template engine enables you to use static template files in your application.

During runtime, the template engine replaces variables in a template file with actual values and converts the template into an HTML file sent to the client.

There are so many template engines that work with Express. Click here to check the list of template engines.

In this chapter we’ll use EJS template engine


How to use template engines with the Express JS

So, to install the EJS template engine you need to run the below command (Make sure that your app folder is selected on your terminal) –

npm install ejs --save

After installing the EJS, now inside your app folder create a new folder and name it views.

Basically, in the views folder, we’ll create our views.

Before creating files let’s take a look at the app folder structure –

Folder structure of the express js app

So first we will create home.ejs view for home page

home.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home Page</title>
</head>
<body>
    <h1>This is Home Page</h1>
</body>
</html>

Now after creating the home.js view, we will set up our views and view engine and then will render our home view.

index.js

const express = require('express');

const app = express();

// setup views and view engine
app.set('views', './views');
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    // rendering home.ejs view
    res.render('home');
})

app.listen(3000, () => console.log('Your app listening on port 3000'));

app.set('views', 'views folder path') – It defines where our views are.

app.set('view engine', 'view engine name') – It defines which view engine(template engine) we are using.

res.render('home') – Rendering the home.ejs view.

You also do that – res.render('home.ejs') but you don’t need to add the .ejs, it will be automatically added because we have already defined the EJS View Engine.


How to send dynamic data to a view

You can send dynamic data to a view by giving an object in the second parameter of the res.render method.

res.render('home', {data:"data"})

Example:

index.js

const express = require('express');

const app = express();

// setup views and view engine
app.set('views', './views');
app.set('view engine', 'ejs');

app.get('/', (req, res) => {

    let birds = ['Pigeon','Swallow','Penguin','Bald eagle','Sparrow']

    // rendering home.ejs view
    res.render('home',{

        title : "w3jar.com",
        all_birds : birds

    });
})

app.listen(3000, () => console.log('Your app listening on port 3000'));

home.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home Page</title>
</head>
<body>
    <h1><%= title %></h1>
    <ul>
        <% all_birds.forEach((bird_name) => { %>
            <li><%= bird_name %></li>
        <% }) %>
    </ul>
</body>
</html>
Browser Output

w3jar.com

  • Pigeon
  • Swallow
  • Penguin
  • Bald eagle
  • Sparrow

Click here to learn more about the EJS template engine.


Next isExpress JS Middleware

Previous is – Express JS Retrieve post data

Leave a Reply

Your email address will not be published. Required fields are marked *