Template engine concept in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Express template?

Given the following Pug template and Express route, what will be the HTML output sent to the browser?

Express

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

// Pug template 'greet.pug':
// h1 Hello #{name}!
// p Welcome to our site.

A <h1>Hello #{name}!</h1><p>Welcome to our site.</p>

B <h1>Hello !</h1><p>Welcome to our site.</p>

C <h1>Hello Alice!</h1><p>Welcome to our site.</p>

D <h1>Hello Alice</h1><p>Welcome to our site.</p>

💡 Hint

Remember that Pug replaces #{variable} with the value passed in render locals.

The Pug template uses #{name} to insert the value of 'name' from the render call. Since 'Alice' is passed, it outputs 'Hello Alice!'.

📝 Syntax

intermediate

Which option correctly sets EJS as the template engine in Express?

Choose the correct code snippet to configure Express to use EJS templates located in the 'views' folder.

A

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

B

app.engine('ejs', require('ejs').renderFile);
app.set('views', './templates');

C

app.set('view engine', 'ejs');
app.set('views', './templates');

D

app.engine('html', require('ejs').renderFile);
app.set('views', './views');

💡 Hint

The default views folder is './views' and setting 'view engine' to 'ejs' enables EJS.

Option A correctly sets the view engine to 'ejs' and the views folder to './views'. Other options either set wrong folders or engine names.

🔧 Debug

advanced

Why does this Handlebars template render '{{name}}' literally instead of the value?

Express route: app.get('/user', (req, res) => { res.render('profile', { username: 'Bob' }); }); Handlebars template 'profile.hbs':

User: {{name}}

A Because the template file extension should be '.handlebars' not '.hbs'.

B Because Handlebars requires triple braces {{{name}}} to render variables.

C Because Express does not support Handlebars by default and needs extra setup.

D Because the template uses {{name}} but the data key is 'username', so 'name' is undefined.

💡 Hint

Check if the variable names in the template match the keys in the data object.

The template tries to render {{name}}, but the data passed has 'username'. Since 'name' is undefined, Handlebars outputs it literally.

❓ state_output

advanced

What is the output of this EJS template with conditional rendering?

Express route: app.get('/status', (req, res) => { res.render('status', { loggedIn: false }); }); EJS template 'status.ejs': <% if (loggedIn) { %>

Welcome back!

<% } else { %>

Please log in.

<% } %>

A <p>Welcome back!</p>

B <p>Please log in.</p>

C <p><% if (loggedIn) { %>Welcome back!<% } else { %>Please log in.<% } %></p>

D SyntaxError due to missing closing tags

💡 Hint

Look at the value of 'loggedIn' and which block runs in the EJS template.

Since loggedIn is false, the else block runs, rendering '

Please log in.

'.

🧠 Conceptual

expert

Which statement best describes how template engines improve Express app development?

Select the most accurate explanation of the role of template engines in Express.

A They allow embedding JavaScript code directly in HTML files to generate dynamic content on the server before sending to the client.

B They convert client-side JavaScript into server-side code to improve performance.

C They automatically cache all static files to speed up page loading without server processing.

D They replace Express middleware to handle HTTP requests more efficiently.

💡 Hint

Think about how templates combine data and HTML on the server.

Template engines let you write HTML with placeholders and JavaScript logic to create dynamic pages before sending them to the browser.

Practice

1. What is the main purpose of using a template engine in Express?

easy

A. To improve server performance by caching files

B. To combine HTML with data and create dynamic web pages

C. To handle database connections automatically

D. To replace JavaScript code in the backend

Solution

1. Step 1: Understand what template engines do

   Template engines allow mixing HTML with data to generate dynamic content.

2. Step 2: Identify the main purpose in Express

   Express uses template engines to render HTML pages with data, making pages dynamic.

3. Final Answer:

   To combine HTML with data and create dynamic web pages -> Option B

4. Quick Check:

   Template engine purpose = dynamic HTML generation [OK]

Hint: Template engines create HTML pages with data dynamically [OK]

Common Mistakes:

• Thinking template engines handle databases
• Confusing template engines with performance tools
• Believing template engines replace backend code

2. Which Express method is used to render a template with data?

easy

A. res.render()

B. res.sendFile()

C. res.json()

D. res.redirect()

Solution

1. Step 1: Recall Express response methods

   Express has methods like res.sendFile, res.json, res.redirect, and res.render.

2. Step 2: Identify the method for templates

   res.render() is specifically used to render templates with data.

3. Final Answer:

   res.render() -> Option A

4. Quick Check:

   Render templates = res.render() [OK]

Hint: Use res.render() to send templates with data [OK]

Common Mistakes:

• Using res.sendFile() for templates
• Confusing res.json() with rendering HTML
• Trying to use res.redirect() to show templates

3. Given this Express code snippet, what will be the rendered output if the template shows <h1>Hello, <%= name %></h1> and res.render('greet', { name: 'Sam' }) is called?

medium

A. Hello,

B. Hello, <%= name %>

C. Hello, Sam

D. Error: Template variable not found

Solution

1. Step 1: Understand template variable usage

   The template uses <%= name %> to insert the value of 'name'.

2. Step 2: Check the data passed to the template

   The code passes { name: 'Sam' }, so 'Sam' replaces <%= name %>.

3. Final Answer:

   <h1>Hello, Sam</h1> -> Option C

4. Quick Check:

   Template variable replaced by 'Sam' [OK]

Hint: Variables in templates show passed data values [OK]

Common Mistakes:

• Thinking template tags show as text
• Assuming missing variables cause errors
• Ignoring passed data object

4. What is the error in this Express code snippet for rendering a template?

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

medium

A. Template name should be a variable, not a string

B. The route path '/hello' is invalid

C. res.render() cannot be used inside app.get()

D. Missing curly braces around data object in res.render()

Solution

1. Step 1: Check res.render() syntax

   res.render() expects the template name and a data object in curly braces.

2. Step 2: Identify the mistake in data argument

   The code passes name: 'Alex' without curly braces, which is invalid syntax.

3. Final Answer:

   Missing curly braces around data object in res.render() -> Option D

4. Quick Check:

   Data object must be wrapped in {} [OK]

Hint: Always wrap data in {} when passing to res.render() [OK]

Common Mistakes:

• Omitting curly braces for data object
• Thinking template name must be variable
• Believing res.render() can't be used in routes

5. You want to create a page that shows a list of users using a template engine in Express. Which approach correctly passes the user list to the template for rendering?

hard

A. res.render('users', { users: ['Anna', 'Ben', 'Cara'] });

B. res.render('users', ['Anna', 'Ben', 'Cara']);

C. res.render('users', users = ['Anna', 'Ben', 'Cara']);

D. res.render('users', { 'Anna', 'Ben', 'Cara' });

Solution

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

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

2. Step 2: Check each option's syntax

   res.render('users', { users: ['Anna', 'Ben', 'Cara'] }); correctly passes an object with key 'users' and an array value.

3. Final Answer:

   res.render('users', { users: ['Anna', 'Ben', 'Cara'] }); -> Option A

4. Quick Check:

   Pass data as object with keys [OK]

Hint: Pass data as an object with named keys to res.render() [OK]

Common Mistakes:

• Passing array directly without object
• Using assignment inside res.render()
• Using invalid object syntax