Virtual path prefixes in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when accessing a virtual path?

Consider this Express setup using a virtual path prefix. What will be the response when a client requests /api/users?

Express

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

router.get('/users', (req, res) => {
  res.send('User list');
});

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

app.listen(3000);

A The server responds with 404 Not Found.

B The server responds with 'Cannot GET /users'.

C The server responds with 'User list'.

D The server crashes with an error.

💡 Hint

Remember that the router is mounted on '/api', so routes inside the router are relative to that prefix.

The router handles requests starting with '/api'. The route '/users' inside the router matches '/api/users' on the main app, so the response is 'User list'.

❓ state_output

intermediate

What is the value of req.baseUrl inside a virtual path router?

Given this Express code, what will req.baseUrl be when the route handler runs for a request to /admin/dashboard?

Express

const express = require('express');
const app = express();
const adminRouter = express.Router();

adminRouter.get('/dashboard', (req, res) => {
  res.send(req.baseUrl);
});

app.use('/admin', adminRouter);

app.listen(3000);

A "/admin"

B "/dashboard"

C "/admin/dashboard"

D "/"

💡 Hint

req.baseUrl shows the path where the router is mounted.

req.baseUrl contains the path prefix where the router is mounted, which is '/admin'.

📝 Syntax

advanced

Which option correctly mounts a router with a virtual path prefix?

Select the code snippet that correctly mounts a router on the path '/api/v1' so that routes inside the router are prefixed accordingly.

A app.use(router, '/api/v1');

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

C app.use('/api/v1' => router);

D app.use(router('/api/v1'));

💡 Hint

The app.use method takes the path prefix first, then the router.

The correct syntax is app.use('/api/v1', router);. Other options are invalid syntax or incorrect usage.

🔧 Debug

advanced

Why does this virtual path router not respond as expected?

Given the code below, why does a request to /api/products return 404 Not Found?

Express

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

router.get('products', (req, res) => {
  res.send('Product list');
});

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

app.listen(3000);

A The router.get method requires a second argument to be an array.

B The router is not mounted correctly; it should be app.use(router, '/api').

C The app.listen call is missing a callback function.

D The route path is missing a leading slash; it should be '/products'.

💡 Hint

Check the route path string inside router.get.

Route paths must start with a slash. Without it, the route does not match requests correctly.

🧠 Conceptual

expert

How does Express handle nested virtual path prefixes?

If you mount a router routerA at /api and inside it mount another router routerB at /v2, what is the full path to access a route /items defined inside routerB?

Express

const express = require('express');
const app = express();
const routerA = express.Router();
const routerB = express.Router();

routerB.get('/items', (req, res) => {
  res.send('Items v2');
});

routerA.use('/v2', routerB);
app.use('/api', routerA);

app.listen(3000);

A /api/v2/items

B /v2/api/items

C /api/items/v2

D /items/api/v2

💡 Hint

Think about how mounting routers adds path prefixes in order.

Mounting routerB at '/v2' inside routerA mounted at '/api' creates the combined path '/api/v2'. Adding '/items' gives '/api/v2/items'.

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