Why routing matters in Express - See It in Action

Why routing matters

📖 Scenario: You are building a simple web server that responds differently based on the URL path the user visits. This is like a restaurant where different doors lead to different rooms. Routing helps the server know which response to send for each door (URL).

🎯 Goal: Create an Express server with routes for the homepage, about page, and contact page. Each route should send a unique message to the browser.

📋 What You'll Learn

Create an Express app instance

Set up a route for '/' that sends 'Welcome to the homepage!'

Set up a route for '/about' that sends 'Learn more about us.'

Set up a route for '/contact' that sends 'Contact us here.'

Start the server listening on port 3000

💡 Why This Matters

🌍 Real World

Routing is how web servers decide what content to show when users visit different URLs. This is essential for websites and APIs.

💼 Career

Understanding routing is a key skill for backend developers working with Express or similar web frameworks.

1

Set up Express app

Create a variable called express that requires the 'express' module. Then create a variable called app by calling express().

Express

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

Hint

Use require('express') to import Express and then call it as a function to create the app.

2

Add homepage route

Use app.get with the path '/' and a callback function with parameters req and res. Inside the callback, send the text 'Welcome to the homepage!' using res.send().

Express

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

// Add route for '/' here
// Your code here

Hint

Use app.get to define a route for the homepage path '/' and send a welcome message.

3

Add about and contact routes

Add two more routes using app.get: one for '/about' that sends 'Learn more about us.', and one for '/contact' that sends 'Contact us here.'. Use req and res as parameters in the callback functions.

Express

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

app.get('/', (req, res) => {
  res.send('Welcome to the homepage!');
});

// Add routes for '/about' and '/contact' here
// Your code here

Hint

Define two more routes with app.get for '/about' and '/contact' paths, sending the specified messages.

4

Start the server

Use app.listen to start the server on port 3000. Add a callback function that takes no parameters and does nothing inside.

Express

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

app.get('/', (req, res) => {
  res.send('Welcome to the homepage!');
});

app.get('/about', (req, res) => {
  res.send('Learn more about us.');
});

app.get('/contact', (req, res) => {
  res.send('Contact us here.');
});

// Start server on port 3000
// Your code here

Hint

Use app.listen with port 3000 and an empty callback function to start the server.

Practice

1. Why is routing important in an Express application?

easy

A. It connects different URLs to specific code that sends responses.

B. It styles the webpage with CSS automatically.

C. It stores data permanently in a database.

D. It compiles JavaScript into machine code.

Solution

1. Step 1: Understand routing purpose

   Routing links URLs to the code that handles requests and sends responses.

2. Step 2: Eliminate unrelated options

   Styling, data storage, and compilation are not routing tasks.

3. Final Answer:

   It connects different URLs to specific code that sends responses. -> Option A

4. Quick Check:

   Routing = URL to response code [OK]

Hint: Routing matches URLs to code that sends responses [OK]

Common Mistakes:

• Confusing routing with styling or database tasks
• Thinking routing compiles code
• Believing routing stores data

2. Which of the following is the correct way to define a GET route for the path /home in Express?

easy

A. app.get('/home', (req, res) => { res.send('Welcome'); });

B. app.route('/home').get = (req, res) => { res.send('Welcome'); };

C. app.get('/home') { res.send('Welcome'); }

D. app.get('/home', res.send('Welcome'));

Solution

1. Step 1: Recall Express GET route syntax

   The correct syntax is app.get(path, callback) where callback has (req, res).

2. Step 2: Check each option

   app.get('/home', (req, res) => { res.send('Welcome'); }); matches correct syntax; others have syntax errors or misuse.

3. Final Answer:

   app.get('/home', (req, res) => { res.send('Welcome'); }); -> Option A

4. Quick Check:

   Correct GET route syntax = app.get('/home', (req, res) => { res.send('Welcome'); }); [OK]

Hint: Use app.get(path, (req, res) => {}) for GET routes [OK]

Common Mistakes:

• Missing arrow function or callback syntax
• Assigning instead of calling methods
• Passing response directly without function

3. What will be the output when a user visits /about given this Express code?

app.get('/about', (req, res) => {
  res.send('About us page');
});
app.get('/contact', (req, res) => {
  res.send('Contact page');
});

medium

A. 404 Not Found error

B. Contact page

C. Server crash due to missing route

D. About us page

Solution

1. Step 1: Identify the route for '/about'

   The code defines app.get('/about') to send 'About us page'.

2. Step 2: Match URL to route

   Visiting '/about' triggers the first route, sending 'About us page'.

3. Final Answer:

   About us page -> Option D

4. Quick Check:

   URL '/about' matches route sending 'About us page' [OK]

Hint: Match URL to route path to find output [OK]

Common Mistakes:

• Confusing '/about' with '/contact' route
• Expecting 404 when route exists
• Assuming server crashes without reason

4. Identify the error in this Express routing code:

app.get('/hello', (req, res) => {
  res.send('Hello World');
});
app.get('/hello') {
  res.send('Hi again');
}

medium

A. First route is missing a response.

B. Routes cannot have the same path '/hello'.

C. Second route has incorrect syntax; missing callback function.

D. res.send() cannot be used inside app.get().

Solution

1. Step 1: Check syntax of second route

   The second app.get('/hello') lacks a callback function and uses braces incorrectly.

2. Step 2: Verify other options

   First route is correct; duplicate routes are allowed; res.send() is valid inside app.get().

3. Final Answer:

   Second route has incorrect syntax; missing callback function. -> Option C

4. Quick Check:

   Syntax error in second route = Second route has incorrect syntax; missing callback function. [OK]

Hint: Check for callback function syntax in routes [OK]

Common Mistakes:

• Thinking duplicate routes are invalid
• Believing res.send() is disallowed
• Ignoring missing arrow function or callback

5. You want to create an Express app that responds with 'Hello, user!' when visiting /user/:name, where :name is any username. Which code correctly implements this dynamic routing?

hard

A. app.get('/user/name', (req, res) => { res.send('Hello, name!'); });

B. app.get('/user/:name', (req, res) => { res.send(`Hello, ${req.params.name}!`); });

C. app.get('/user/:name', (req, res) => { res.send('Hello, user!'); });

D. app.get('/user/:name', (req, res) => { res.send(req.query.name); });

Solution

1. Step 1: Understand dynamic route parameter usage

   Express uses :name to capture dynamic parts in req.params.name.

2. Step 2: Check each option

   app.get('/user/:name', (req, res) => { res.send(`Hello, ${req.params.name}!`); }); uses req.params.name correctly to personalize the message. The static '/user/name' option sends fixed text, the dynamic path with fixed 'Hello, user!' ignores the parameter, and req.query.name is for query strings (?name=foo), not path parameters (/user/foo).

3. Final Answer:

   app.get('/user/:name', (req, res) => { res.send(`Hello, ${req.params.name}!`); }); -> Option B

4. Quick Check:

   Dynamic param in path = req.params.name [OK]

Hint: Use req.params for dynamic URL parts [OK]

Common Mistakes:

• Using static path instead of dynamic parameter
• Accessing req.query instead of req.params
• Ignoring dynamic parameter in response