Virtual path prefixes in Express - Step-by-Step Execution

Concept Flow - Virtual path prefixes

Define app

↓

Create router

↓

Attach router with prefix

↓

Request to prefixed path

↓

Router handles request

↓

Send response

This flow shows how Express uses a virtual path prefix to route requests through a router mounted at a specific path.

Execution Sample

Express

const express = require('express');
const app = express();
const router = express.Router();
router.get('/', (req, res) => res.send('Hello from router'));
app.use('/prefix', router);

This code creates a router and mounts it on the app at the '/prefix' path, so requests to '/prefix' go to the router.

Execution Table

Step	Request URL	Router Mounted At	Match?	Handler Called	Response Sent
1	/prefix	/prefix	Yes	router.get('/')	Hello from router
2	/prefix/	/prefix	Yes	router.get('/')	Hello from router
3	/prefix/extra	/prefix	Yes	No handler	No response from router
4	/other	/prefix	No	No handler	No response from router

💡 Requests not starting with '/prefix' do not match the router and are not handled by it.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
Request URL	/prefix	/prefix	/prefix/	/prefix/extra	/other
Router Mounted At	/prefix	/prefix	/prefix	/prefix	/prefix
Match?	N/A	Yes	Yes	Yes	No
Response Sent	N/A	Hello from router	Hello from router	No response	No response

Key Moments - 2 Insights

Why does the router handle '/prefix' and '/prefix/' but not '/prefix/extra'?

Because the router is mounted at '/prefix' and only matches requests starting with that path. However, the router has a route defined only for '/', so '/prefix/extra' matches the router but does not match any route inside it, so no handler is called (see execution_table rows 1, 2, and 3).

What happens if a request URL does not start with the prefix?

The router does not match the request, so no handler inside the router runs and no response is sent from it (see execution_table row 4).

Visual Quiz - 3 Questions

Look at the execution table, what response is sent when the request URL is '/prefix/'?

A "Hello from router"

B "No response from router"

C "404 Not Found"

D "Error"

💡 Hint

Check execution_table row 2 under 'Response Sent'

At which request URL does the router NOT handle the request?

A /prefix

B /prefix/extra

C /other

D /prefix/

💡 Hint

Look at execution_table rows where 'Match?' is 'No'

If the router was mounted at '/api', which request URL would it handle?

A /prefix

B /api

C /other

D /prefix/extra

💡 Hint

Router matches requests starting with its mount path, see variable_tracker 'Router Mounted At'

Concept Snapshot

Express virtual path prefixes let you mount routers at specific paths.
Use app.use('/prefix', router) to route requests starting with '/prefix' to that router.
Router paths are relative to the prefix.
Requests not matching the prefix skip the router.
This helps organize routes under common URL segments.

Full Transcript

In Express, you can create a router and attach it to your main app at a specific path prefix. When a request comes in, Express checks if the URL starts with that prefix. If it does, the router handles the request using its defined routes. For example, mounting a router at '/prefix' means requests to '/prefix' or '/prefix/' trigger the router's handlers. Requests to '/prefix/extra' or other paths do not match the router's root route and so are not handled by it. This lets you group routes logically under a common path segment, making your app easier to manage.

Practice

1. What is the main purpose of using a virtual path prefix in Express with app.use('/prefix', router)?

easy

A. To handle errors globally in the app

B. To create a new Express app instance

C. To serve static files from a directory

D. To group routes under a common URL path for better organization

Solution

1. Step 1: Understand what app.use('/prefix', router) does

   This syntax mounts a router or middleware under the URL path '/prefix'.

2. Step 2: Identify the purpose of grouping routes

   Grouping routes under a common prefix helps organize and maintain the app's URL structure.

3. Final Answer:

   To group routes under a common URL path for better organization -> Option D

4. Quick Check:

   Virtual path prefix = route grouping [OK]

Hint: Virtual path prefixes group routes under one URL path [OK]

Common Mistakes:

• Thinking it creates a new app instance
• Confusing with static file serving
• Assuming it handles errors

2. Which of the following is the correct syntax to mount a router on the virtual path prefix '/api' in Express?

easy

A. app.route('/api', router);

B. app.use('/api', router);

C. app.mount('/api', router);

D. app.router('/api', router);

Solution

1. Step 1: Recall Express method to mount middleware or routers

   Express uses app.use(path, middleware) to mount routers or middleware.

2. Step 2: Check each option's method name

   Only app.use is the correct method; others like app.route, app.mount, and app.router are invalid or incorrect here.

3. Final Answer:

   app.use('/api', router); -> Option B

4. Quick Check:

   Mount router = app.use(path, router) [OK]

Hint: Use app.use to mount routers on paths [OK]

Common Mistakes:

• Using app.route instead of app.use
• Trying non-existent methods like app.mount
• Confusing router mounting with route definitions

3. Given the code below, what URL path will respond with 'Hello from admin'?

const express = require('express');
const app = express();
const adminRouter = express.Router();
adminRouter.get('/', (req, res) => res.send('Hello from admin'));
app.use('/admin', adminRouter);
app.listen(3000);

medium

A. http://localhost:3000/

B. http://localhost:3000/admin

C. http://localhost:3000/admin/

D. http://localhost:3000/admin/home

Solution

1. Step 1: Understand the router path and mounting prefix

   The router handles GET requests at '/' and is mounted at '/admin'.

2. Step 2: Combine prefix and router path

   The full path is '/admin' + '/' = '/admin/'.

3. Step 3: Understand URL normalization

   URLs with or without trailing slash for this route behave the same in Express, so both '/admin' and '/admin/' respond with 'Hello from admin'.

4. Final Answer:

   http://localhost:3000/admin/ and http://localhost:3000/admin -> Option C

5. Quick Check:

   Router '/' + mount '/admin' = '/admin/' and '/admin' [OK]

Hint: Combine mount path and router path for full URL; trailing slash optional [OK]

Common Mistakes:

• Ignoring trailing slash in URL
• Assuming root '/' responds without prefix
• Confusing '/admin' and '/admin/home'

4. Identify the error in this Express code snippet that tries to mount a router with a virtual path prefix:

const express = require('express');
const app = express();
const userRouter = express.Router();
userRouter.get('/profile', (req, res) => res.send('User Profile'));
app.use(userRouter, '/user');
app.listen(3000);

medium

A. The order of arguments in app.use is incorrect

B. The router path '/profile' is invalid

C. Missing app.listen call

D. Router should be created with express() not express.Router()

Solution

1. Step 1: Check the app.use argument order

   Correct syntax is app.use(path, router), but here it is reversed.

2. Step 2: Identify the correct argument order

   It should be app.use('/user', userRouter) to mount the router at '/user'.

3. Final Answer:

   The order of arguments in app.use is incorrect -> Option A

4. Quick Check:

   app.use(path, router) order matters [OK]

Hint: app.use(path, router) not app.use(router, path) [OK]

Common Mistakes:

• Swapping router and path arguments
• Thinking router path is invalid
• Forgetting to call app.listen

5. You want to create an Express app with two routers: adminRouter mounted at '/admin' and userRouter mounted at '/user'. Both routers have a route for '/' that sends different greetings. Which code correctly sets this up so visiting '/admin' and '/user' shows the correct messages?

hard

A. app.use('/admin', adminRouter);
app.use('/user', userRouter);

B. app.use(adminRouter, '/admin');
app.use(userRouter, '/user');

C. app.route('/admin', adminRouter);
app.route('/user', userRouter);

D. app.get('/admin', adminRouter);
app.get('/user', userRouter);

Solution

1. Step 1: Recall correct syntax for mounting routers with prefixes

   Use app.use(path, router) to mount routers at virtual path prefixes.

2. Step 2: Evaluate the options

   The correct code uses app.use('/admin', adminRouter); and app.use('/user', userRouter);. Distractors use invalid methods like app.route() or app.get() with routers, or reverse the path and router order in app.use().

3. Final Answer:

   app.use('/admin', adminRouter); app.use('/user', userRouter); -> Option A

4. Quick Check:

   Mount routers with app.use(path, router) [OK]

Hint: Mount routers with app.use(path, router) for multiple prefixes [OK]

Common Mistakes:

• Swapping router and path in app.use
• Using app.route or app.get to mount routers
• Not mounting routers at all