Template engine concept in Express - Mini Project: Build & Apply

Template Engine Concept with Express

📖 Scenario: You are building a simple web server that shows a personalized greeting on a webpage. Instead of writing HTML directly in your code, you will use a template engine to insert dynamic data into an HTML template.

🎯 Goal: Create an Express app that uses the EJS template engine to render a greeting message with a user's name.

📋 What You'll Learn

Create an Express app with a route for '/'

Set up EJS as the template engine

Create a template file that displays a greeting with a name

Render the template with a name variable passed from the route

💡 Why This Matters

🌍 Real World

Websites often need to show personalized or dynamic content. Template engines let you write HTML with placeholders that get filled with data when the page loads.

💼 Career

Knowing how to use template engines like EJS with Express is a common skill for web developers building server-rendered web apps.

1

Set up Express app and install EJS

Create a file called app.js. Import express and create an Express app by writing const express = require('express') and const app = express().

Express

const express = require('express')
const app = express()
// Your code here

Hint

Use require('express') to import Express and create the app with express().

2

Configure EJS as the template engine

Add the line app.set('view engine', 'ejs') to configure EJS as the template engine for the Express app.

Express

const express = require('express')
const app = express()
// Add EJS template engine setup below
// Your code here

Hint

Use app.set with 'view engine' and 'ejs' to set the template engine.

3

Create a route that renders the template

Write a route handler for GET / using app.get('/', (req, res) => { ... }). Inside, call res.render('greeting', { name: 'Alice' }) to render the greeting.ejs template with the variable name set to 'Alice'.

Express

const express = require('express')
const app = express()
app.set('view engine', 'ejs')
// Add GET / route that renders greeting.ejs with name 'Alice'
// Your code here

Hint

Use app.get with path '/' and inside the callback use res.render to send the template with data.

4

Create the EJS template file

Create a file named views/greeting.ejs. Inside, write HTML that includes <h1>Hello, <%= name %>!</h1> to display the greeting with the passed name variable.

Express

const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get('/', (req, res) => {
    res.render('greeting', { name: 'Alice' })
})
// Create views/greeting.ejs with greeting message
// Your code here

Hint

Use EJS syntax <%= name %> inside an <h1> tag to show the name.

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