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.