Use EJS as Template Engine in Node.js
Last Updated :
16 Jan, 2025
EJS (Embedded JavaScript) is a popular templating engine for Node.js that allows you to generate HTML markup with plain JavaScript. It is particularly useful for creating dynamic web pages, as it enables you to embed JavaScript logic directly within your HTML.
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.
Steps to Use EJS as Template Engine
Installing EJS
To begin with, using EJS as templating engine we need to install EJS using the given command:
npm install express ejs --save
It will install exxpress and ejs as dependency in the node.js project.
Set Up Your Node Application
JavaScript
// Filename - index.js
// Set express as Node.js web application
// server framework.
const express = require('express');
const app = express();
// Set EJS as templating engine
app.set('view engine', 'ejs');
Create the EJS Template
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
<!-- Home.ejs -->
<!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
<!-- Home.ejs -->
<!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 and run the below command
node index.js
Type the node file_name.js command to run your program and see the output as displayed.
Output:
Key Features of EJS
- Embedded JavaScript: Allows you to embed JavaScript logic directly within your HTML.
- Partial Templates: Supports partials, enabling you to reuse common template fragments (like headers and footers) across different pages.
- Layout Support: EJS can be used with layout managers to create consistent layouts across multiple views.
Conclusion
EJS is a powerful and flexible templating engine that enhances your Node.js applications by allowing you to generate dynamic HTML content with ease. Its simplicity and integration with Express make it an ideal choice for developers looking to build server-rendered web applications quickly. Whether you’re developing a simple site or a complex web application, EJS provides the tools you need to create dynamic and interactive user interfaces.
Similar Reads
<%= vs <%- in EJS Template Engine
EJS (Embedded JavaScript) is a popular templating engine that helps generate dynamic HTML content using JavaScript. It allows embedding JavaScript logic into HTML, making it a powerful tool for rendering server-side content in Node.js applications. In this article, we’ll compare <%= %> and
4 min read
How to use array of objects in EJS Template Engine ?
Arrays of objects are collections of JavaScript objects stored within an array. Each object within the array can contain multiple key-value pairs, making them versatile for organizing various types of data. For example, you might have an array of objects representing users, products, or posts in a s
3 min read
What does <%= mean in EJS Template Engine ?
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
3 min read
What is EJS Template Engine ?
EJS Template Engine or EJS is a popular template engine for web development. it is used in Nodejs. It allows you to generate dynamic content by embedding JavaScript to HTML content. EJS serves as a templating language, utilizing plan javascript to HTML. It allows the injection of data into the templ
3 min read
How to Install & Use EJS Template Engine ?
EJS (Embedded JavaScript) is mainly a templating language for JS which allows dynamic content generation in web-based applications. This EJS Template allows us to embed the JS code directly in the HTML markup, which enables the integration of data and logic into the presentation layer. We can use EJ
3 min read
How to display the JSON data in EJS Template Engine ?
EJS (Embedded JavaScript) is a templating language that allows dynamic content generation in NodeJS applications. It allows the integration of JavaScript code within HTML, making it easier to display dynamic data. To render JSON data in an EJS template, we can use EJS syntax to loop through the data
2 min read
EJS Template Engine for Express
EJS stands for Embedded JavaScript. It is a template engine designed to be used with server-side JavaScript environments like NodeJS and It is used to generate dynamic content in a web page. It simplifies the generation of HTML by allowing you to embed JavaScript code directly in HTML. In this artic
3 min read
How to use underscore.js as a template engine ?
While writing layouts for web pages, it is often the case that we require certain elements of the page to have dynamic values. For such scenarios, we use templates. Templates enable us to embed logical segments inside static HTML code, which makes the page dynamic based on the values passed in the t
3 min read
Server Side Rendering using Express.js And EJS Template Engine
Server-side rendering involves generating HTML on the server and sending it to the client, as opposed to generating it on the client side using JavaScript. This improves initial load time, and SEO, and enables dynamic content generation. Express is a popular web application framework for NodeJS, and
3 min read
How to use Template Engines in Express JS ?
Express.js is a popular web framework for Node.js that simplifies the process of building web applications. One of the key features of Express is its ability to integrate with template engines, allowing developers to dynamically generate HTML pages with data from their server. In this article, we'll
2 min read