What is EJS | Lecture 12

EJS (Embedded JavaScript)

1. What is EJS?

EJS is a template engine used with Express.js.

 It helps us show dynamic data inside HTML.

Simple Meaning:

HTML + JavaScript = EJS

2. Why do we use EJS?

Without EJS:

• We send plain HTML

• No dynamic data

With EJS:

• We can show data from backend

• Reuse HTML

• Make pages dynamic

Example:

Show user name from server in HTML.

3. Install EJS

npm install ejs

4. Setup EJS in Express

app.js

const express = require("express");
const app = express();

app.set("view engine", "ejs");

app.listen(3000, () => {
  console.log("Server running");
});

view engine tells Express to use EJS.

5. Folder Structure for EJS

project/
│── app.js
│── views/
│     └── home.ejs
│     └── about.ejs

EJS files must be inside views folder

6. First EJS Page

app.js

app.get("/", (req, res) => {
  res.render("home");
});

views/home.ejs

<h1>Welcome to EJS</h1>

7. Send Data from Server to EJS

app.js

app.get("/", (req, res) => {
  res.render("home", { name: "Aakash" });
});

home.ejs

<h1>Hello <%= name %></h1>

Output:

Hello Aakash

8. EJS Tags (MOST IMPORTANT)

Tag	Meaning
<%= %>	Show output
<% %>	Logic only
<%- %>	Show HTML

9. Variable Example

<p>Course: <%= course %></p>

10. If-Else in EJS

<% if (age >= 18) { %>
  <p>You can vote</p>
<% } else { %>
  <p>You cannot vote</p>
<% } %>

11. Loop in EJS (Very Common)

app.js

app.get("/students", (req, res) => {
  res.render("students", {
    students: ["Rahul", "Neha", "Amit"]
  });
});

students.ejs

<ul>
  <% students.forEach(student => { %>
    <li><%= student %></li>
  <% }) %>
</ul>

12. Show Object Data

app.js

res.render("profile", {
  user: {
    name: "Aakash",
    age: 25
  }
});

profile.ejs

<p>Name: <%= user.name %></p>
<p>Age: <%= user.age %></p>

13. Include Header & Footer (Very Important)

views/partials/header.ejs

<h1>My Website</h1>
<hr>

views/partials/footer.ejs

<hr>
<p>© 2025</p>

Use in page

<%- include("partials/header") %>

<h2>Home Page</h2>

<%- include("partials/footer") %>

 Helps in reuse of code

14. Forms with EJS

form.ejs

<form action="/submit" method="POST">
  <input type="text" name="username">
  <button>Submit</button>
</form>

app.js

app.use(express.urlencoded({ extended: true }));

app.post("/submit", (req, res) => {
  res.send(req.body.username);
});

15. Static Files with EJS

Folder

public/
│── style.css

app.js

app.use(express.static("public"));

Use in EJS

<link rel="stylesheet" href="/style.css">

16. EJS vs HTML

HTML	EJS
Static	Dynamic
No JS logic	JS logic
No data	Backend data