0
0
Expressframework~10 mins

Template partials and layouts in Express - Step-by-Step Execution

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Concept Flow - Template partials and layouts
Start Request
↓
Render Main Layout
↓
Insert Partials
↓
Header
↓
Render Page Content
↓
Send Complete HTML Response
When a page is requested, Express renders a main layout template. It inserts partial templates like header and footer inside the layout, then adds the page content before sending the full HTML back.
Execution Sample
Express
app.set('view engine', 'ejs');

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

// index.ejs
// <h1>Home Page</h1>
This code sets EJS as the template engine, uses a layout with header and footer partials, and renders the home page content inside.
Execution Table
StepActionTemplate ProcessedResulting HTML SnippetNotes
1Start rendering layout.ejslayout.ejs<html><body>Layout starts with html and body tags
2Include header partialheader.ejs<header><nav>Menu</nav></header>Header partial inserted
3Insert page contentindex.ejs<h1>Home Page</h1>Page content inserted where <%- body %> is
4Include footer partialfooter.ejs<footer>© 2024</footer>Footer partial inserted
5Finish layoutlayout.ejs</body></html>Close body and html tags
6Send responseFull HTML<html><body><header><nav>Menu</nav></header><h1>Home Page</h1><footer>© 2024</footer></body></html>Complete HTML sent to browser
💡 All partials and content inserted, full HTML response ready
Variable Tracker
VariableStartAfter Step 2After Step 3After Step 4Final
RenderedHTML"""<html><body>""<html><body><header><nav>Menu</nav></header>""<html><body><header><nav>Menu</nav></header><h1>Home Page</h1>""<html><body><header><nav>Menu</nav></header><h1>Home Page</h1><footer>© 2024</footer></body></html>"
Key Moments - 2 Insights
Why does the layout template include partials instead of repeating header/footer in every page?
Including partials in the layout keeps header/footer code in one place, so changes apply everywhere. See execution_table steps 2 and 4 where partials are inserted once.
What does <%- body %> mean in the layout template?
<%- body %> is where the page-specific content (like index.ejs) is inserted. Step 3 in execution_table shows page content inserted at this spot.
Visual Quiz - 3 Questions
Test your understanding
Look at the execution_table, what HTML snippet is added at Step 2?
A<h1>Home Page</h1>
B<footer>© 2024</footer>
C<header><nav>Menu</nav></header>
D<html><body>
💡 Hint
Check the 'Resulting HTML Snippet' column for Step 2 in execution_table
At which step is the page content inserted into the layout?
AStep 3
BStep 1
CStep 4
DStep 5
💡 Hint
Look for 'Insert page content' in the 'Action' column of execution_table
If the footer partial is removed, which step would be missing in the execution_table?
AStep 2
BStep 4
CStep 3
DStep 5
💡 Hint
Step 4 shows 'Include footer partial' in the 'Action' column
Concept Snapshot
Template partials and layouts in Express:
- Use a main layout template to wrap pages
- Insert partials like header/footer with include()
- Render page content inside layout placeholder
- Keeps code DRY and consistent
- Final HTML combines layout + partials + page content
Full Transcript
When Express receives a request, it renders a main layout template. This layout includes partial templates such as header and footer using include statements. The page-specific content is inserted into the layout where a placeholder like <%- body %> is placed. The rendering process builds the full HTML step-by-step: starting with layout tags, adding header partial, then page content, then footer partial, and finally closing tags. This combined HTML is sent as the response. Using partials and layouts helps keep repeated parts like headers and footers in one place, making maintenance easier and pages consistent.