Template partials and layouts in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered by this Express app using EJS layout?

Given the Express app uses EJS with a layout file layout.ejs that includes <%- body %>, and the route renders index.ejs with content <h1>Welcome</h1>, what is the final HTML output?

Express

/* layout.ejs */
<!DOCTYPE html>
<html lang="en">
<head><title>Site</title></head>
<body>
<header>Header Content</header>
<main><%- body %></main>
<footer>Footer Content</footer>
</body>
</html>

/* index.ejs */
<h1>Welcome</h1>

/* Express route */
app.get('/', (req, res) => {
  res.render('index');
});

A <!DOCTYPE html><html lang="en"><head><title>Site</title></head><body><header>Header Content</header><main></main><footer>Footer Content</footer></body></html>

B <!DOCTYPE html><html lang="en"><head><title>Site</title></head><body><header>Header Content</header><main><h1>Welcome</h1></main><footer>Footer Content</footer></body></html>

C <h1>Welcome</h1>

D <html><head><title>Site</title></head><body><h1>Welcome</h1></body></html>

💡 Hint

Remember that <%- body %> in the layout is replaced by the rendered content of the view.

The layout wraps the view content inside the HTML structure. The <%- body %> placeholder is replaced by the index.ejs content, so the final output includes header, main with <h1>Welcome</h1>, and footer.

📝 Syntax

intermediate

Which EJS syntax correctly includes a partial named 'nav'?

In an EJS template, you want to include a partial file named nav.ejs. Which syntax is correct?

A <%- include('nav') %>

B <% include nav %>

C <%= include('nav') %>

D <% include('nav') %>

💡 Hint

Including a partial in EJS uses the include function with <%- %> tags to render raw HTML.

The correct syntax is <%- include('nav') %>. The <%- %> tag outputs unescaped HTML, which is needed for partials. Other options either have wrong syntax or escape the output.

🔧 Debug

advanced

Why does this Express app fail to render the layout with partials?

The Express app uses EJS with a layout and partials. The layout includes <%- include('header') %> and <%- body %>. The route renders index.ejs. However, the page shows the raw <%- include('header') %> text instead of the header content. What is the likely cause?

Express

/* layout.ejs */
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
<%- include('header') %>
<main><%- body %></main>
</body>
</html>

/* header.ejs */
<header>Site Header</header>

/* Express setup */
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
  res.render('index');
});

A The <code>body</code> variable is undefined, causing the layout to fail rendering.

B The header.ejs file is missing, so include fails silently and shows raw text.

C The layout file is rendered as a normal view, so <code>&lt;%- include('header') %&gt;</code> is not processed as EJS code.

D The Express app does not support partials by default and needs a plugin.

💡 Hint

Think about how layouts are processed and whether EJS code inside layouts is executed.

If the layout is used as a string template and not rendered through EJS, the EJS tags inside it won't be processed. This causes the include tag to appear as raw text. The layout must be rendered by EJS to process includes.

❓ state_output

advanced

What is the output when rendering nested partials in EJS?

Given layout.ejs includes header.ejs, and header.ejs includes nav.ejs, what is the final rendered output if nav.ejs contains <nav>Menu</nav> and header.ejs contains <header><%- include('nav') %></header>?

Express

/* nav.ejs */
<nav>Menu</nav>

/* header.ejs */
<header><%- include('nav') %></header>

/* layout.ejs */
<!DOCTYPE html>
<html>
<head><title>Site</title></head>
<body>
<%- include('header') %>
<main><h1>Home</h1></main>
</body>
</html>

A <!DOCTYPE html><html><head><title>Site</title></head><body><header><nav>Menu</nav></header><main><h1>Home</h1></main></body></html>

B <!DOCTYPE html><html><head><title>Site</title></head><body><header><%- include('nav') %></header><main><h1>Home</h1></main></body></html>

C <!DOCTYPE html><html><head><title>Site</title></head><body><header>&lt;nav&gt;Menu&lt;/nav&gt;</header><main><h1>Home</h1></main></body></html>

D <!DOCTYPE html><html><head><title>Site</title></head><body><nav>Menu</nav><main><h1>Home</h1></main></body></html>

💡 Hint

Remember that includes inside partials are processed recursively by EJS.

The header.ejs includes nav.ejs, so the <nav>Menu</nav> is inserted inside the header. The layout includes the header partial, so the final output nests nav inside header inside body.

🧠 Conceptual

expert

Why use layouts with partials in Express apps?

What is the main advantage of using layouts combined with partials in an Express app's templating system?

A They automatically optimize server response time by caching HTML fragments.

B They enforce strict security policies preventing XSS attacks by default.

C They enable client-side rendering of templates without server involvement.

D They allow reusing common page structure and components, reducing code duplication and easing maintenance.

💡 Hint

Think about how layouts and partials help organize repeated parts of web pages.

Layouts provide a common page structure, and partials are reusable components like headers or footers. Using them together avoids repeating the same HTML in multiple files, making the app easier to maintain and update.

Practice

1. What is the main purpose of using template partials in Express apps?

easy

A. To define the main layout structure for all pages

B. To reuse small template parts like headers or footers across pages

C. To write JavaScript logic inside templates

D. To connect the app to a database

Solution

1. Step 1: Understand what partials are

   Partials are small pieces of templates like headers or footers that you can reuse.

2. Step 2: Differentiate partials from layouts

   Layouts provide the main page structure, while partials are smaller reusable parts inside layouts or pages.

3. Final Answer:

   To reuse small template parts like headers or footers across pages -> Option B

4. Quick Check:

   Partials = reusable small template parts [OK]

Hint: Partials = small reusable pieces like header/footer [OK]

Common Mistakes:

• Confusing partials with layouts
• Thinking partials define full page structure
• Assuming partials handle backend logic

2. Which syntax correctly includes a partial named header in an EJS template?

easy

A. <%- include('header') %>

B. <%= partial('header') %>

C. <% include header %>

D. <@include header>

Solution

1. Step 1: Recall EJS partial include syntax

   EJS uses <%- include('partialName') %> to include partials with unescaped output.

2. Step 2: Check each option

   <%- include('header') %> matches the correct syntax with parentheses and quotes around 'header'.

3. Final Answer:

   <%- include('header') %> -> Option A

4. Quick Check:

   EJS partial include = <%- include('name') %> [OK]

Hint: EJS partials use <%- include('name') %> syntax [OK]

Common Mistakes:

• Omitting quotes or parentheses in include
• Using <%= instead of <%- for unescaped output
• Confusing syntax with other template engines

3. Given this Express setup using EJS with a layout:

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

// In route handler:
res.render('index', { title: 'Home' });

And the layout layout.ejs contains:

<html>
<head><title><%= title %></title></head>
<body>
<%- body %>
</body>
</html>

If index.ejs has <h1>Welcome</h1>, what will the rendered HTML look like?

medium

A. Welcome

B. Home<h1>Welcome</h1>

C. HomeWelcome

D. Error: body is undefined

Solution

1. Step 1: Understand layout and body insertion

   The layout uses <%- body %> to insert the rendered content of index.ejs unescaped.

2. Step 2: Check variable substitution

   The title variable is passed as 'Home', so <%= title %> becomes 'Home'. The body inserts <h1>Welcome</h1> as HTML.

3. Final Answer:

   <html><head><title>Home</title></head><body><h1>Welcome</h1></body></html> -> Option C

4. Quick Check:

   Layout inserts title and body correctly [OK]

Hint: Layout inserts body unescaped with <%- body %> [OK]

Common Mistakes:

• Using escaped output <%= body %> causing HTML to show as text
• Not passing title variable to template
• Assuming body variable is automatic without layout support

4. You try to use a layout in Express with EJS but get an error: ReferenceError: body is not defined. What is the likely cause?

medium

A. You forgot to use a layout engine or middleware that injects the body content

B. You used <%= body %> instead of <%- body %>

C. You named your layout file incorrectly

D. You did not install EJS package

Solution

1. Step 1: Understand how layouts work in Express with EJS

   EJS alone does not support layouts natively; you need middleware like express-ejs-layouts to inject body content.

2. Step 2: Identify cause of ReferenceError

   If body is undefined, it means the layout engine or middleware that sets body is missing or not configured.

3. Final Answer:

   You forgot to use a layout engine or middleware that injects the body content -> Option A

4. Quick Check:

   Missing layout middleware = body undefined error [OK]

Hint: Layouts need middleware to define body variable [OK]

Common Mistakes:

• Assuming EJS supports layouts without extra setup
• Confusing escaped vs unescaped output errors
• Ignoring middleware installation or configuration

5. You want to create a consistent site with a header, footer, and main content area using Express and EJS. Which approach best uses partials and layouts together?

hard

A. Use only partials for header, footer, and content without any layout file

B. Include header and footer partials directly in every page template without a layout

C. Write all HTML in each page template without partials or layouts

D. Create a layout.ejs with header and footer partials included, and insert page content in a <%- body %> area

Solution

1. Step 1: Understand roles of layouts and partials

   Layouts provide the main page structure; partials are reusable pieces like header and footer.

2. Step 2: Combine layout and partials for best practice

   Put header and footer partials inside the layout, then insert page-specific content in the body area.

3. Final Answer:

   Create a layout.ejs with header and footer partials included, and insert page content in a <%- body %> area -> Option D

4. Quick Check:

   Layout + partials = clean, consistent site structure [OK]

Hint: Use layout for structure, partials for reusable parts [OK]

Common Mistakes:

• Duplicating header/footer in every page instead of partials
• Skipping layout causing inconsistent page structure
• Mixing content and layout roles improperly