Steps to Use EJS as Template Engine
Step 1: Setup a Node.js Project
First, create a new project and install Express and EJS:
mkdir ejs-example
cd ejs-example
npm init -y
npm install express ejs
Step 2: Create a Server with Express.js
Create a file server.js and set up a basic Express server:
const express = require('express');
const app = express();
const port = 3000;
// Set EJS as the templating engine
app.set('view engine', 'ejs');
// Define a route
app.get('/', (req, res) => {
res.render('index', { user: 'John Doe' });
});
app.listen(port, () => {
console.log(`Server running on http://localhost:${port}`);
});
Step 3: Create an EJS Template
Inside the project folder, create a folder named views. Inside views, create a file index.ejs:
<!DOCTYPE html>
<html>
<head>
<title>My EJS Page</title>
</head>
<body>
<h1>Hello, <%= user %>!</h1>
</body>
</html>
Step 4: Run the Application
Run the server using:
node server.js
Open http://localhost:3000 in the browser. You will see:
Hello, John Doe!
Key Features of EJS
1. Template Inheritance with Partials
EJS allows breaking templates into reusable components called partials.
Example: Creating a Header Partial
Create a file views/header.ejs:
<header>
<h1>My Website</h1>
</header>
Use it inside index.ejs:
<!DOCTYPE html>
<html>
<head>
<title>My EJS Page</title>
</head>
<body>
<% include header.ejs %>
<h2>Welcome, <%= user %>!</h2>
</body>
</html>
2. Loops in EJS
EJS supports loops for rendering lists dynamically.
Example: Rendering a List
<ul>
<% users.forEach(user => { %>
<li><%= user %></li>
<% }); %>
</ul>
Passing Data from Server:
app.get('/users', (req, res) => {
res.render('users', { users: ['Alice', 'Bob', 'Charlie'] });
});
3. Conditionals in EJS
EJS allows using if statements inside templates.
Example: Displaying Content Based on a Condition
<% if(isAdmin) { %>
<h2>Welcome, Admin</h2>
<% } else { %>
<h2>Welcome, User</h2>
<% } %>
Passing Data from Server:
app.get('/admin', (req, res) => {
res.render('admin', { isAdmin: true });
});
4. Output Escaping and Unescaping
EJS escapes output by default to prevent XSS attacks.
<p><%= "<script>alert('Hack!')</script>" %></p>
This will be displayed as plain text instead of running as a script.
If you need to render raw HTML, use <%- %>:
<p><%- "<strong>Bold Text</strong>" %></p>
Frequently Asked Questions
What is the use of EJS in Node.js?
EJS is used as a templating engine in Node.js to generate dynamic HTML pages by embedding JavaScript logic within HTML files.
How do I install and use EJS in an Express app?
You can install EJS using npm install ejs, set it as the template engine in Express using app.set('view engine', 'ejs'), and create .ejs files inside a views folder.
What are some alternatives to EJS?
Alternatives to EJS include Pug (formerly Jade), Handlebars.js, and Mustache.js for templating in Node.js applications.
Conclusion
In this article, we learned EJS (Embedded JavaScript) in Node.js, a templating engine that helps in generating dynamic HTML content. EJS allows developers to embed JavaScript logic directly into HTML using simple syntax. It makes web development more efficient by enabling code reuse and dynamic content rendering. Understanding EJS helps in building flexible and maintainable Node.js applications.
34+ registered 
