EJS template setup in Express - Step-by-Step Execution

Concept Flow - EJS template setup

Start Express App

↓

Set view engine to EJS

↓

Create EJS template file

↓

Define route handler

↓

Render EJS template with data

↓

Send rendered HTML to browser

↓

Browser displays HTML

This flow shows how an Express app sets EJS as the template engine, creates a template, renders it with data, and sends HTML to the browser.

Execution Sample

Express

const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
  res.render('index', { title: 'Home' });
});
app.listen(3000);

This code sets up an Express app using EJS templates and renders 'index.ejs' with a title.

Execution Table

Step	Action	Evaluation	Result
1	Start Express app	App created	Express app instance ready
2	Set view engine to 'ejs'	app.set('view engine', 'ejs')	Express uses EJS to render views
3	Define route '/'	app.get('/', handler)	Route ready to handle GET /
4	Request GET / received	Route handler called	Calls res.render('index', {title: 'Home'})
5	Render 'index.ejs' with {title: 'Home'}	EJS processes template	HTML string generated with title 'Home'
6	Send HTML response	res.send(html)	Browser receives HTML
7	Browser displays page	HTML parsed	User sees page with title 'Home'

💡 Request handled and response sent, cycle complete

Variable Tracker

Variable	Start	After Step 4	After Step 5	Final
app	undefined	Express app instance	Express app instance	Express app instance
view engine	undefined	'ejs'	'ejs'	'ejs'
route '/'	undefined	Defined	Defined	Defined
request	undefined	GET /	GET /	Handled
rendered HTML	undefined	undefined	HTML string with title 'Home'	Sent to browser

Key Moments - 3 Insights

Why do we call app.set('view engine', 'ejs') before defining routes?

Because Express needs to know which template engine to use before rendering views in route handlers, as shown in execution_table step 2 and 4.

What happens if the 'index.ejs' file is missing?

At step 5, EJS will throw an error because it cannot find the template to render, so no HTML is generated and the response fails.

How does the data { title: 'Home' } get used in the template?

During rendering at step 5, EJS replaces placeholders in 'index.ejs' with the provided data, producing HTML with the title 'Home'.

Visual Quiz - 3 Questions

Look at the execution table, what is the state of 'view engine' after step 2?

A 'ejs'

B undefined

C 'pug'

D null

💡 Hint

Check the 'view engine' variable in variable_tracker after step 2

At which step does the Express app send the rendered HTML to the browser?

A Step 4

B Step 6

C Step 5

D Step 7

💡 Hint

Look for the action 'Send HTML response' in execution_table

If the route '/' was not defined, what would happen when a GET / request arrives?

A Express crashes

B Express renders 'index.ejs' anyway

C Express sends a 404 Not Found error

D Express sends an empty response

💡 Hint

Refer to execution_table step 3 about route definition

Concept Snapshot

EJS Template Setup in Express:
1. Create Express app with express().
2. Set view engine: app.set('view engine', 'ejs').
3. Create EJS files in 'views' folder.
4. Define routes and use res.render('template', data).
5. Express renders EJS to HTML and sends to browser.

Full Transcript

This visual execution shows how to set up EJS templates in an Express app. First, the app is created and configured to use EJS as the view engine. Then, a route is defined to handle GET requests to '/'. When a request arrives, Express calls res.render with the template name and data. EJS processes the template, replacing placeholders with data values, and generates HTML. This HTML is sent back to the browser, which displays the page. Variables like the app instance, view engine setting, route, request, and rendered HTML change state step-by-step. Key moments include why setting the view engine early is important, what happens if the template is missing, and how data is used in templates. The quizzes test understanding of these steps and states.

Practice

1. What does the line app.set('view engine', 'ejs') do in an Express app?

easy

A. It creates a new EJS file in the views folder.

B. It installs the EJS package automatically.

C. It tells Express to use EJS as the template engine for rendering views.

D. It starts the Express server with EJS support.

Solution

1. Step 1: Understand the purpose of app.set

   This method configures Express settings, here it sets the template engine.

2. Step 2: Identify what 'view engine' setting does

   Setting 'view engine' to 'ejs' tells Express to use EJS to render view files automatically.

3. Final Answer:

   It tells Express to use EJS as the template engine for rendering views. -> Option C

4. Quick Check:

   app.set('view engine', 'ejs') = Use EJS [OK]

Hint: Remember: app.set('view engine', 'ejs') enables EJS rendering [OK]

Common Mistakes:

• Thinking it installs EJS automatically
• Confusing it with creating files
• Assuming it starts the server

2. Which of the following is the correct way to render an EJS template named index.ejs with Express?

easy

A. res.render('index.ejs')

B. res.view('index')

C. res.send('index.ejs')

D. res.render('index')

Solution

1. Step 1: Recall how Express renders templates

   Express uses res.render with the template name without extension.

2. Step 2: Identify correct syntax

   Passing 'index' (without '.ejs') is correct; Express adds the extension automatically.

3. Final Answer:

   res.render('index') -> Option D

4. Quick Check:

   Use res.render('templateName') without extension [OK]

Hint: Use template name without extension in res.render() [OK]

Common Mistakes:

• Including the .ejs extension in res.render()
• Using res.send() instead of res.render()
• Using non-existent res.view() method

3. Given this Express code snippet, what will be the output in the browser?

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

app.get('/', (req, res) => {
  res.render('greeting', { name: 'Sam' });
});

And the greeting.ejs file contains:

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

medium

A. Hello, <%= name %>!

B. Hello, Sam!

C. Error: name is not defined

D. Hello, !

Solution

1. Step 1: Understand data passing to EJS

   The object { name: 'Sam' } passes 'Sam' as the value for 'name' in the template.

2. Step 2: Interpret EJS syntax in template

   <%= name %> outputs the value of 'name' safely, so it becomes 'Sam'.

3. Final Answer:

   <h1>Hello, Sam!</h1> -> Option B

4. Quick Check:

   EJS <%= %> inserts variable value [OK]

Hint: EJS <%= %> inserts passed data values directly [OK]

Common Mistakes:

• Expecting raw template tags to show in output
• Forgetting to pass data object to render
• Confusing <%= %> with <% %> (no output)

4. What is wrong with this Express setup for EJS?

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

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

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

medium

A. The template name in res.render should not include the '.ejs' extension.

B. EJS must be required explicitly with require('ejs').

C. app.set should be called after app.get.

D. res.render cannot be used inside app.get.

Solution

1. Step 1: Check usage of res.render

   res.render expects the template name without the file extension.

2. Step 2: Identify the error in code

   Passing 'home.ejs' includes extension, which causes Express to look for 'home.ejs.ejs'.

3. Final Answer:

   The template name in res.render should not include the '.ejs' extension. -> Option A

4. Quick Check:

   Use res.render('templateName') without extension [OK]

Hint: Never add .ejs extension in res.render() call [OK]

Common Mistakes:

• Adding .ejs extension in res.render()
• Thinking require('ejs') is mandatory
• Changing app.set order unnecessarily

5. You want to render a list of users dynamically in an EJS template. Which setup correctly passes the users array and renders it inside users.ejs?

const users = ['Anna', 'Bob', 'Cara'];

app.get('/users', (req, res) => {
  // What goes here?
});

Choose the correct code to replace // What goes here?.

hard

A. res.render('users', { users: users });

B. res.render('users.ejs', { users });

C. res.send('users', { users });

D. res.render('users', users);

Solution

1. Step 1: Understand how to pass data to EJS

   Data must be passed as an object with keys matching template variables.

2. Step 2: Check correct syntax for res.render

   Use res.render('templateName', { key: value }) without file extension.

3. Final Answer:

   res.render('users', { users: users }); -> Option A

4. Quick Check:

   Pass data as object in res.render(template, data) [OK]

Hint: Pass data as object: res.render('name', {key: value}) [OK]

Common Mistakes:

• Including .ejs extension in template name
• Passing array directly instead of inside object
• Using res.send instead of res.render