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.