Use EJS as Template Engine in Node.js

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 HTML template at the client side and produce the final HTML. EJS is a simple templating language which is used to generate HTML markup with plain JavaScript. It also helps to embed JavaScript to HTML pages. To begin with, using EJS as templating engine we need to install EJS using 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 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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.
var express = require('express');
var app = express();
  
// Set EJS as templating engine
app.set('view engine', 'ejs');

chevron_right


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 request in our node project. The content of this page is:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>    

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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');
  
});

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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'});
  
});
  
var server = app.listen(4000, function(){
    console.log('listining to port 4000')
});

chevron_right


Now, We will embed name to HTML page as:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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.
var data = {name:'Akashdeep',
    hobbies:['playing football', 'playing chess', 'cycling']}
  
res.render('home', {data:data});
});
  
var server = app.listen(4000, function() {
    console.log('listining to port 4000')
});

chevron_right


The final HTML content:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Steps to run the program:

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

Output:



My Personal Notes arrow_drop_up

Hey, I am AkashdeepI am a third year undergraduate and currently pursuing a major in Computer Science and Engineering from ABES Engineering College, Ghaziabad, IndiaI have a problem solving mindset and I am interested in AlgorithmsI am preety handy with the tools such as HTML, CSS, Javascript,JQuerr

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.