Template partials and layouts in Express

Introduction

Template partials and layouts help you reuse parts of your web pages easily. They keep your code clean and save time by avoiding repetition.

When you want the same header or footer on many pages.

When you want to keep your page structure consistent across your site.

When you want to update a common part of your site in one place.

When you want to break a big page into smaller, manageable pieces.

When you want to organize your templates better for teamwork.

Syntax

Express

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

// In your main layout file (e.g., layout.ejs):
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <%- include('partials/header') %>
  <main>
    <%- body %>
  </main>
  <%- include('partials/footer') %>
</body>
</html>

Use <%- include('path/to/partial') %> to insert partial templates.

Layouts usually have a placeholder like <%- body %> where page content goes.

Examples

This inserts the navbar partial into your template.

Express

<%- include('partials/navbar') %>

A simple layout with header, footer, and a body placeholder.

Express

<!-- layout.ejs -->
<html>
  <body>
    <%- include('partials/header') %>
    <%- body %>
    <%- include('partials/footer') %>
  </body>
</html>

A page template whose rendered content is inserted into the layout (e.g., via manual rendering or a layout library).

Express

<!-- page.ejs -->
<h1>Welcome!</h1>
<p>This is the home page.</p>

Sample Program

This Express app uses EJS templates with a layout and partials for header and footer. The index.ejs page uses the layout, which includes the header and footer partials. This keeps the page structure consistent and easy to update.

Express

const express = require('express');
const app = express();
const path = require('path');

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.get('/', (req, res) => {
  res.render('index', {}, (err, indexHtml) => {
    if (err) {
      console.log(err);
      return res.status(500).send('Something went wrong');
    }
    res.render('layout', { title: 'Home Page', body: indexHtml });
  });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

// Directory structure:
// views/
//   layout.ejs
//   index.ejs
//   partials/
//     header.ejs
//     footer.ejs

// layout.ejs content:
// <!DOCTYPE html>
// <html lang="en">
// <head>
//   <meta charset="UTF-8">
//   <meta name="viewport" content="width=device-width, initial-scale=1.0">
//   <title><%= title %></title>
// </head>
// <body>
//   <%- include('partials/header') %>
//   <main>
//     <%- body %>
//   </main>
//   <%- include('partials/footer') %>
// </body>
// </html>

// index.ejs content:
// <h1>Welcome to the Home Page</h1>
// <p>This page uses a layout and partials.</p>

// partials/header.ejs content:
// <header>
//   <h2>Site Header</h2>
// </header>

// partials/footer.ejs content:
// <footer>
//   <p>Site Footer © 2024</p>
// </footer>

Important Notes

Make sure your partials folder is inside your views folder for easy includes.

Use <%- include() %> to render raw HTML from partials, not escaped text.

Layouts help keep your site consistent and make updates faster.

Summary

Template partials let you reuse small parts like headers and footers.

Layouts provide a main structure where page content fits in.

Using both keeps your code clean and your site consistent.

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