EJS template setup in Express - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is EJS in the context of Express?

EJS (Embedded JavaScript) is a simple templating language that lets you generate HTML markup with plain JavaScript. It helps you create dynamic web pages by embedding JavaScript code inside HTML.

beginner

How do you set EJS as the view engine in an Express app?

Use app.set('view engine', 'ejs') in your Express app setup. This tells Express to use EJS to render views.

beginner

Where should EJS template files be placed by default in an Express project?

By default, EJS template files should be placed in a folder named views at the root of your project. Express looks here to find the templates.

beginner

How do you render an EJS template from an Express route?

Use res.render('templateName', data) inside your route handler. This renders the EJS file named templateName.ejs and passes data to it for dynamic content.

beginner

What is the purpose of passing an object as the second argument to res.render()?

The object contains data that the EJS template can use to display dynamic content. Each key in the object becomes a variable inside the template.

Which line sets EJS as the template engine in Express?

A app.use('ejs')

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

C app.engine('ejs')

D app.render('ejs')

The correct way is to use app.set('view engine', 'ejs') to tell Express to use EJS for rendering views.

Where should you put your EJS files by default?

A public folder

B models folder

C views folder

D routes folder

Express looks for template files inside the views folder by default.

How do you send data to an EJS template from a route?

A res.send(data)

B res.json(data)

C res.view('template', data)

D res.render('template', data)

Use res.render('template', data) to render the template and pass data for dynamic content.

What file extension do EJS templates use?

A .ejs

B .html

C .js

D .json

EJS templates use the .ejs file extension.

Which of these is true about EJS?

A It is a JavaScript templating engine

B It is a CSS framework

C It is a database

D It is a server

EJS is a templating engine that lets you embed JavaScript inside HTML.

Explain how to set up EJS in an Express app from scratch.

Think about the steps from installing to rendering a page.

Describe how data is passed from an Express route to an EJS template and how it is used.

Focus on the connection between route and template.

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