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

Need a 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

Need a 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

Need a 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

Need a hint?

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