Mounting routers with app.use in Express - Mini Project: Build & Apply

Mounting Routers with app.use in Express

📖 Scenario: You are building a simple Express web server that handles different groups of routes separately. To keep your code organized, you want to use routers for different parts of your site.Think of routers like different departments in a store, each handling their own tasks. You will mount these routers on your main app using app.use.

🎯 Goal: Create two routers, one for /users and one for /products, then mount them on the main Express app using app.use.

📋 What You'll Learn

Create an Express app

Create a router called usersRouter with a GET route at / that sends 'Users Home'

Create a router called productsRouter with a GET route at / that sends 'Products Home'

Mount usersRouter on /users path using app.use

Mount productsRouter on /products path using app.use

💡 Why This Matters

🌍 Real World

In real web apps, routers help organize code by grouping related routes. For example, user-related routes go in one router, product-related routes in another.

💼 Career

Knowing how to mount routers with <code>app.use</code> is essential for building scalable Express applications and is a common task in backend web development jobs.

1

Create the Express app and usersRouter

Write code to create an Express app by calling express() and assign it to app. Then create a router by calling express.Router() and assign it to usersRouter. Add a GET route on usersRouter for path / that sends the text 'Users Home'.

Express

import express from 'express';

// Create the Express app
// Your code here

Hint

Use const app = express() to create the app. Use const usersRouter = express.Router() to create the router. Then add a GET route on usersRouter with usersRouter.get('/', (req, res) => { res.send('Users Home') }).

2

Create the productsRouter with a GET route

Create a router called productsRouter by calling express.Router(). Add a GET route on productsRouter for path / that sends the text 'Products Home'.

Express

import express from 'express';

const app = express();
const usersRouter = express.Router();

usersRouter.get('/', (req, res) => {
  res.send('Users Home');
});

// Create productsRouter and add GET route
// Your code here

Hint

Use const productsRouter = express.Router() to create the router. Then add a GET route on productsRouter with productsRouter.get('/', (req, res) => { res.send('Products Home') }).

3

Mount usersRouter on /users path

Use app.use to mount usersRouter on the path /users.

Express

import express from 'express';

const app = express();
const usersRouter = express.Router();

usersRouter.get('/', (req, res) => {
  res.send('Users Home');
});

const productsRouter = express.Router();

productsRouter.get('/', (req, res) => {
  res.send('Products Home');
});

// Mount usersRouter on /users
// Your code here

Hint

Use app.use('/users', usersRouter) to mount the router on the /users path.

4

Mount productsRouter on /products path

Use app.use to mount productsRouter on the path /products.

Express

import express from 'express';

const app = express();
const usersRouter = express.Router();

usersRouter.get('/', (req, res) => {
  res.send('Users Home');
});

const productsRouter = express.Router();

productsRouter.get('/', (req, res) => {
  res.send('Products Home');
});

app.use('/users', usersRouter);

// Mount productsRouter on /products
// Your code here

Hint

Use app.use('/products', productsRouter) to mount the router on the /products path.

Practice

1. What is the main purpose of using app.use to mount routers in Express?

easy

A. To automatically generate HTML pages

B. To directly send responses without defining routes

C. To group related routes under a common base path for better organization

D. To replace the Express app with a router

Solution

1. Step 1: Understand what app.use does

   app.use mounts middleware or routers at a specified path, grouping routes.

2. Step 2: Identify the benefit of mounting routers

   Mounting routers organizes routes under a base path, making code cleaner and easier to maintain.

3. Final Answer:

   To group related routes under a common base path for better organization -> Option C

4. Quick Check:

   Mount routers = group routes [OK]

Hint: Mount routers to group routes under one path [OK]

Common Mistakes:

• Thinking app.use replaces the app
• Believing it sends responses directly
• Confusing mounting with automatic page generation

2. Which of the following is the correct syntax to mount a router named userRouter on the path /users using app.use?

easy

A. app.use('/users', userRouter);

B. app.use(userRouter, '/users');

C. app.get('/users', userRouter);

D. app.mount('/users', userRouter);

Solution

1. Step 1: Recall the app.use syntax

   The correct syntax is app.use(path, router) to mount a router at a path.

2. Step 2: Match the correct order and method

   app.use('/users', userRouter); uses app.use('/users', userRouter); which is correct. Others have wrong order or method.

3. Final Answer:

   app.use('/users', userRouter); -> Option A

4. Quick Check:

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

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

Common Mistakes:

• Swapping router and path order
• Using app.get instead of app.use
• Using non-existent app.mount method

3. Given the following code, what URL path will respond with 'User list'?

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

userRouter.get('/', (req, res) => res.send('User list'));

app.use('/users', userRouter);

medium

A. /users/

B. /

C. /user/

D. /users/list

Solution

1. Step 1: Understand router path and mounting

   The router defines a GET route at '/' which is relative to where it is mounted.

2. Step 2: Combine mount path and router route

   Since userRouter is mounted at '/users', the full path is '/users/' to reach the route.

3. Final Answer:

   /users/ -> Option A

4. Quick Check:

   Mount path + router route = full URL [OK]

Hint: Router path '/' + mount '/users' = '/users/' [OK]

Common Mistakes:

• Ignoring mount path and using '/' alone
• Confusing '/user/' with '/users/'
• Assuming '/users/list' without route defined

4. What is wrong with this code snippet?

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

router.get('/info', (req, res) => res.send('Info page'));

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

medium

A. Missing app.listen call

B. Router cannot have routes with '/info' path

C. app.use cannot mount routers

D. The arguments to app.use are in the wrong order

Solution

1. Step 1: Check app.use argument order

   The correct order is app.use(path, router), but here it is reversed.

2. Step 2: Identify the error cause

   Passing router first and path second causes Express to treat router as middleware without a path, leading to unexpected behavior.

3. Final Answer:

   The arguments to app.use are in the wrong order -> Option D

4. Quick Check:

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

Hint: app.use(path, router) order is strict [OK]

Common Mistakes:

• Swapping router and path in app.use
• Thinking router paths can't have '/info'
• Ignoring missing app.listen (not related here)

5. You want to mount two routers, adminRouter and userRouter, so that /admin/dashboard and /users/profile work correctly. Which code correctly mounts both routers?

hard

A. app.use(adminRouter, '/admin');\napp.use(userRouter, '/users');

B. app.use('/admin', adminRouter);\napp.use('/users', userRouter);

C. app.use('/admin/dashboard', adminRouter);\napp.use('/users/profile', userRouter);

D. app.get('/admin', adminRouter);\napp.get('/users', userRouter);

Solution

1. Step 1: Understand mounting routers at base paths

   Mount routers at base paths like '/admin' and '/users' so their internal routes append correctly.

2. Step 2: Check each option for correct syntax and paths

   app.use('/admin', adminRouter);\napp.use('/users', userRouter); uses app.use('/admin', adminRouter); and app.use('/users', userRouter);, which is correct. app.use(adminRouter, '/admin');\napp.use(userRouter, '/users'); swaps arguments, C mounts at full paths (not base), D uses app.get which is incorrect for mounting routers.

3. Final Answer:

   app.use('/admin', adminRouter); app.use('/users', userRouter); -> Option B

4. Quick Check:

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

Hint: Mount routers at base paths with app.use(path, router) [OK]

Common Mistakes:

• Swapping router and path in app.use
• Mounting routers at full nested paths
• Using app.get instead of app.use for routers