Creating an Express Router - Visual Walkthrough

Concept Flow - Creating an Express Router

Import express

↓

Create router with express.Router()

↓

Define routes on router

↓

Export router

↓

Import router in main app

↓

Use router with app.use()

↓

Server listens for requests

This flow shows how to create a router, add routes, export it, then use it in the main app to handle requests.

Execution Sample

Express

const express = require('express');
const router = express.Router();

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

module.exports = router;

This code creates a router, adds a GET route for '/hello', and exports the router.

Execution Table

Step	Action	Evaluation	Result
1	Import express	express module loaded	express object available
2	Create router with express.Router()	router = express.Router()	router object created
3	Define GET route '/hello'	router.get('/hello', handler)	Route added to router
4	Export router	module.exports = router	router ready to be imported
5	Import router in main app	const router = require('./router')	router object imported
6	Use router with app.use('/api', router)	app.use('/api', router)	Router mounted at '/api'
7	Server listens	app.listen(port)	Server ready to accept requests
8	Request to '/api/hello'	Matches router GET '/hello'	Response: 'Hello World' sent
9	Request to '/hello'	No match	404 Not Found
10	Request to '/api/goodbye'	No match	404 Not Found

💡 Execution stops after server handles requests or no matching route found.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
express	undefined	express object	express object	express object	express object	express object	express object
router	undefined	router object	router with '/hello' route	exported router	imported router	router mounted on '/api'	router handles '/hello' requests
app	undefined	undefined	undefined	undefined	app object	app with router mounted	app listening for requests

Key Moments - 3 Insights

Why do we create a router instead of adding routes directly to the app?

Creating a router lets us group routes and keep code organized. The execution_table rows 2 and 3 show router creation and route addition separate from the main app.

What happens if we request '/hello' instead of '/api/hello' after mounting the router at '/api'?

The request to '/hello' does not match any route because the router is mounted at '/api'. See execution_table row 9 where '/hello' returns 404.

How does the router know to respond with 'Hello World'?

The router has a GET route for '/hello' defined in step 3. When a request matches, the handler sends 'Hello World' as in step 8.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of 'router' after step 3?

A Undefined

B Router object without any routes

C Router object with '/hello' route added

D Router object exported

💡 Hint

Check the 'Result' column at step 3 in execution_table.

At which step does the server start listening for requests?

A Step 6

B Step 7

C Step 5

D Step 4

💡 Hint

Look for 'Server listens' action in execution_table.

If we change app.use('/api', router) to app.use('/', router), what happens to the request path for '/hello'?

A It will match and respond with 'Hello World'

B It will still return 404

C It will cause an error

D It will redirect to '/api/hello'

💡 Hint

Refer to execution_table rows 6 and 9 about router mounting and request matching.

Concept Snapshot

Create an Express router with express.Router().
Add routes to the router (e.g., router.get('/path', handler)).
Export the router module.
Import and mount the router in the main app with app.use('/prefix', router).
Requests to '/prefix/path' are handled by the router.
This keeps route code organized and modular.

Full Transcript

This lesson shows how to create an Express router to organize routes. First, we import express and create a router object. Then we add routes to this router, like a GET route for '/hello' that sends 'Hello World'. We export this router so it can be used elsewhere. In the main app, we import the router and mount it at a path prefix like '/api' using app.use. When the server listens and receives requests, requests to '/api/hello' match the router's route and respond with 'Hello World'. Requests outside the prefix or to undefined routes return 404. This modular approach helps keep code clean and manageable.