Virtual path prefixes in Express - Mini Project: Build & Apply

Virtual Path Prefixes in Express

📖 Scenario: You are building a simple Express server that serves static files and API routes. You want to organize your routes so that all API endpoints start with /api and static files are served under /static. This helps keep your URLs clean and organized.

🎯 Goal: Create an Express server that uses virtual path prefixes to serve static files under /static and API routes under /api. The server should respond with JSON data for the API and serve static HTML files from a folder.

📋 What You'll Learn

Create an Express app instance named app

Serve static files from a folder named public under the virtual path prefix /static

Create a router named apiRouter for API routes

Mount apiRouter on the virtual path prefix /api

Add a GET route /users on apiRouter that returns JSON with a list of users

💡 Why This Matters

🌍 Real World

Virtual path prefixes help organize URLs in web servers. For example, all API calls can be grouped under '/api', and static assets like images or stylesheets can be served under '/static'. This makes the server easier to maintain and the URLs clearer for users.

💼 Career

Understanding how to use virtual path prefixes in Express is essential for backend developers building REST APIs and serving static content. It is a common pattern in real-world web applications to keep routes organized and scalable.

1

Create Express app and static folder setup

Create an Express app instance called app by requiring express and calling it. Then use app.use to serve static files from the folder public under the virtual path prefix /static.

Express

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

// Your code here

Hint

Use express.static('public') inside app.use with the path prefix /static.

2

Create API router and mount it

Create a router called apiRouter by calling express.Router(). Then mount apiRouter on the app with the virtual path prefix /api using app.use.

Express

const apiRouter = express.Router();

// Your code here

Hint

Use express.Router() to create apiRouter and then mount it with app.use('/api', apiRouter).

3

Add GET /users route to apiRouter

Add a GET route /users on apiRouter that sends a JSON response with a key users and value as an array of strings: ["Alice", "Bob", "Charlie"].

Express

apiRouter.get('/users', (req, res) => {
  // Your code here
});

Hint

Use apiRouter.get('/users', (req, res) => { res.json(...) }) to send the JSON response.

4

Start the server on port 3000

Add code to start the Express server by calling app.listen on port 3000. Use an arrow function as the callback that does nothing (empty function).

Express

app.listen(3000, () => {
  // Your code here
});

Hint

Use app.listen(3000, () => {}) to start the server.

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