Open In App

Use EJS as Template Engine in Node.js

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

EJS: EJS or Embedded Javascript Templating is a templating engine used by Node.js. Template engine helps to create an HTML template with minimal code. Also, it can inject data into an HTML template on the client side and produce the final HTML. EJS is a simple templating language that is used to generate HTML markup with plain JavaScript. It also helps to embed JavaScript into HTML pages. To begin with, using EJS as templating engine we need to install EJS using the given command: 

npm install ejs --save

Note: npm in the above commands stands for the node package manager, a place where install all the dependencies. –save flag is no longer needed after the Node 5.0.0 version, as all the modules that we now install will be added to dependencies. 
Now, the first thing we need to do is to set EJS as our templating engine with Express which is a Node.js web application server framework, which is specifically designed for building single-page, multi-page, and hybrid web applications. It has become the standard server framework for node.js.

VPS servers offer base capabilities and environment to integrate Node.js apps with developer tools and APIs. Hostinger’s VPS gives you more control and flexibility over your hosting environment.It has template build for Node.js – Ubuntu 22.04 with Node.js. This makes it super easy and swift to start. It also comes with OpenLiteSpeed server.

Javascript




// Set express as Node.js web application
// server framework.
// To install express before using it as
// an application server by using 
// "npm install express" command.
const express = require('express');
const app = express();
  
// Set EJS as templating engine
app.set('view engine', 'ejs');


The default behavior of EJS is that it looks into the ‘views’ folder for the templates to render. So, let’s make a ‘views’ folder in our main node project folder and make a file named “home.ejs” which is to be served on some desired requests in our node project. The content of this page is: 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
  
    <style type="text/css" media="screen">
        body {
            background-color: skyblue;
            text-decoration-color: white;
            font-size: 7em;
        }
    </style>
</head>
  
<body>
    <center>This is our home page.</center>
</body>
</html>


Now, we will render this page on a certain request by the user: 

Javascript




app.get('/', (req, res) => {
  
    // The render method takes the name of the HTML
    // page to be rendered as input
    // This page should be in the views folder
    // in the root directory.
    res.render('home');
  
});


Now, the page home.ejs will be displayed on requesting localhost. To add dynamic content this render method takes a second parameter which is an object. This is done as: 

Javascript




app.get('/', (req, res) => {
  
    // The render method takes the name of the HTML
    // page to be rendered as input.
    // This page should be in views folder in
    // the root directory.
    // We can pass multiple properties and values
    // as an object, here we are passing the only name
    res.render('home', { name: 'Akashdeep' });
});
  
const server = app.listen(4000, function () {
    console.log('listening to port 4000')
});


Now, We will embed the name to the HTML page as: 

html




<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <style type="text/css" media="screen">
        body {
            background-color: skyblue;
            text-decoration-color: white;
            font-size: 7em;
        }
    </style>
</head>
  
<body>
    <center>
        This is our home page.<br />
        Welcome <%=name%>, to our home page.
    </center>
</body>
</html>


It is used to embed dynamic content to the page and is used to embed normal JavaScript. Now embedding normal JavaScript: 

Javascript




app.get('/', (req, res) => {
  
    // The render method takes the name of the html
    // page to be rendered as input.
    // This page should be in views folder 
    // in the root directory.
    let data = {
        name: 'Akashdeep',
        hobbies: ['playing football', 'playing chess', 'cycling']
    }
  
    res.render('home', { data: data });
});
  
const server = app.listen(4000, function () {
    console.log('listening to port 4000')
});


The final HTML content: 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <style type="text/css" media="screen">
        body {
            background-color: skyblue;
            text-decoration-color: white;
            font-size: 5em;
        }
    </style>
</head>
  
<body>
    Hobbies of <%=data.name%> are:<br />
  
        <ul>
            <% data.hobbies.forEach((item)=>{%>
                <li>
                    <%=item%>
                </li>
                <%});%>
        </ul>
</body>
</html>


Steps to run the program: 

  • After creating all the files go to the root directory of your project folder.
  • Run the command prompt in this directory.
  • Type the node file_name.js command to run your program and see the output as displayed.

Output: 
 



Last Updated : 06 Sep, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads