ejs template in Node JS

EJS Template in Node JS with Example

by

Hi friends, in this tutorial you will learn how to use ejs template in Node JS with an example to render HTML files with the help of a template engine without using any html extension. In order to proceed, let us discuss ejs template.

Also read, How to install Express js in vs code with an example

ejs template is an embedded javascript template engine by which we can display HTML files directly from the folder of your root directory. In this case, the folder name should be “views” by default.

Also read, Write a file into a specific folder in Node JS example

Steps to use ejs template in Node JS

Step 1:- Install the ejs npm package using the below command in the terminal as shown below.

use ejs template in Node JS

Step 2:- Now, you can see the ejs dependency inside the package.json file as shown below.

use ejs template in Node JS

Step 3:- Now, initialize the express JS packages and modules using the const keyword as shown below.

const express = require('express');

Step 4:- Now, declare another variable “data” to use the feature and functionality of express JS as shown below.

const data = express();

Step 5:- Now it is time to create the folder inside the root directory of your project as shown below.

use ejs template in Node JS

Step 6:- Now, create an HTML file inside that folder with the .ejs extension and paste the HTML code below.

about.ejs

<html>
    <title></title>
    <head></head>
    <body>
        <h2>Welcome to about us page</h2>
    </body>
</html>

Step 7:- Now, it is time to initialize the ejs template engine with the help of the set() method as defined below.

data.set('view engine','ejs');

Step 8:- Now, we will use the route along with the request and response parameter to call the HTML file without any html extension as shown below.

data.get('/about',(req,resp)=>{
   resp.render('about');
});

Step 9:- if you want to send some data to the HTML page then you can do so as given below.

data.get('/about',(req,resp)=>{
   //send the data to the html page
   const userdetails = {'name':'Robin','phone':9706417934}
   resp.render('about',{userdetails});
});

Step 10:- Now, update the about.ejs file as shown below.

<html>
    <title></title>
    <head></head>
    <body>
        <h2>Welcome to about us page</h2>
        <h3>Username: <%= userdetails.name %></h3>
        <h4>Username: <%= userdetails.phone %></h4>
    </body>
</html>

Complete Code:- (node js file)

const express = require('express');
const data = express();
data.set('view engine','ejs');
data.get('/about',(req,resp)=>{
   //send the data to the html page
   const userdetails = {'name':'Robin','phone':9706417934}
   resp.render('about',{userdetails});
});
data.listen(3000);

Now, go to the browser and type http://localhost:3000/about and press ENTER then you can see the output as shown below.

Conclusion:- I hope this tutorial will help you to understand the concept. If there is any doubt then please leave a comment below.


Leave a Comment