res.render for templates in Express - Mini Project: Build & Apply

Using res.render to Display Templates in Express

📖 Scenario: You are building a simple web server using Express.js. You want to show a welcome page to users using a template.

🎯 Goal: Create an Express app that uses res.render to display a template called welcome with a message.

📋 What You'll Learn

Create an Express app instance called app

Set the view engine to pug

Create a route for / that uses res.render to show the welcome template

Pass a variable called message with the value 'Hello, visitor!' to the template

💡 Why This Matters

🌍 Real World

Web servers often use templates to create dynamic HTML pages that show different content depending on the user or situation.

💼 Career

Knowing how to use res.render and templates is essential for backend web developers working with Express.js to build user-friendly websites.

1

Set up Express app and import express

Write code to import express and create an Express app instance called app.

Express

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

Need a hint?

Use require('express') to import Express and call it to create app.

2

Set the view engine to pug

Add code to set the view engine of app to 'pug' using app.set.

Express

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

Need a hint?

Use app.set('view engine', 'pug') to tell Express to use Pug templates.

3

Create a route that renders the welcome template

Write a route handler for GET / on app that calls res.render to render the template named 'welcome' and passes an object with message set to 'Hello, visitor!'.

Express

const express = require('express');
const app = express();
app.set('view engine', 'pug');
// Your code here

Need a hint?

Use app.get('/', (req, res) => { res.render('welcome', { message: 'Hello, visitor!' }) }).

4

Add code to start the server on port 3000

Add code to make app listen on port 3000 using app.listen.

Express

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.get('/', (req, res) => {
    res.render('welcome', { message: 'Hello, visitor!' });
});
// Your code here

Need a hint?

Use app.listen(3000) to start the server on port 3000.