Separating routes into files in Express - Mini Project: Build & Apply

Separating routes into files

📖 Scenario: You are building a simple Express web server. To keep your code clean and organized, you want to separate your routes into different files instead of putting all routes in one file.

🎯 Goal: Create an Express app that uses a separate route file for handling requests to /users. The main app file should import and use this route file.

📋 What You'll Learn

Create a route file named users.js that exports an Express router.

In users.js, define a GET route for / that sends the text 'User list'.

In the main app file app.js, import the users.js router.

Use the imported router in app.js for the path /users.

💡 Why This Matters

🌍 Real World

Separating routes into files helps keep your server code organized and easier to maintain as your app grows.

💼 Career

Many professional Express apps use routers in separate files to manage complexity and collaborate with teams.

1

Create the users route file

Create a file named users.js. Inside it, import express and create a router using express.Router(). Then define a GET route on '/' that sends the text 'User list'. Finally, export the router using module.exports = router.

Express

# Create an Express router in users.js
# Your code here

Hint

Use express.Router() to create a router. Define routes on it like on an app. Export the router at the end.

2

Set up the main app file

In app.js, import express and create an app using express(). Also import the users.js router using require('./users'). Set the app to listen on port 3000.

Express

# Set up Express app in app.js
# Your code here

Hint

Import express and create the app. Import the users router from './users'. Use app.listen(3000) to start the server.

3

Use the users router in the app

In app.js, use app.use('/users', usersRouter) to connect the imported usersRouter to the path /users.

Express

const express = require('express');
const app = express();
const usersRouter = require('./users');

// Use the users router for /users path
# Your code here

app.listen(3000);

Hint

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

4

Add a root route to the app

In app.js, add a GET route on '/' that sends the text 'Welcome to the main page'.

Express

const express = require('express');
const app = express();
const usersRouter = require('./users');

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

// Add a GET route for '/' that sends 'Welcome to the main page'
# Your code here

app.listen(3000);

Hint

Use app.get to define a route for the root path /.

Practice

1. What is the main benefit of separating routes into different files in an Express app?

easy

A. It makes the app run faster.

B. It keeps the app organized and easier to maintain.

C. It automatically secures the routes.

D. It removes the need for middleware.

Solution

1. Step 1: Understand code organization

   Separating routes into files helps keep code clean and manageable as the app grows.

2. Step 2: Identify benefits

   This separation does not affect speed or security directly but improves maintainability.

3. Final Answer:

   It keeps the app organized and easier to maintain. -> Option B

4. Quick Check:

   Organized code = easier maintenance [OK]

Hint: Think about code clarity and maintenance benefits [OK]

Common Mistakes:

• Confusing organization with performance improvements
• Assuming route separation adds security automatically
• Thinking middleware is not needed after separation

2. Which of the following is the correct way to create a router in a separate file named users.js?

easy

A. const router = express.Router(); module.exports = router;

B. const router = new express.Router(); export default router;

C. const router = express.Router; module.exports = router();

D. const router = express.Router(); export router;

Solution

1. Step 1: Create router instance correctly

   Use express.Router() to create a new router instance.

2. Step 2: Export the router properly

   Use module.exports = router; to export it for use in other files.

3. Final Answer:

   const router = express.Router(); module.exports = router; -> Option A

4. Quick Check:

   Correct router creation and export = const router = express.Router(); module.exports = router; [OK]

Hint: Remember to call Router() and use module.exports [OK]

Common Mistakes:

• Forgetting parentheses after Router
• Mixing CommonJS and ES module syntax
• Exporting router incorrectly

3. Given the following code in users.js:

const express = require('express');
const router = express.Router();
router.get('/profile', (req, res) => {
  res.send('User Profile');
});
module.exports = router;

And in app.js:

const express = require('express');
const app = express();
const usersRouter = require('./users');
app.use('/users', usersRouter);
app.listen(3000);

What will be the response when a client requests /users/profile?

medium

A. User Profile

B. Cannot GET /users/profile

C. 404 Not Found error

D. Server crashes with error

Solution

1. Step 1: Understand route prefixing

   The router is mounted at /users, so /profile inside router becomes /users/profile.

2. Step 2: Check route handler response

   The route /profile sends 'User Profile' as response.

3. Final Answer:

   User Profile -> Option A

4. Quick Check:

   Route prefix + handler response = 'User Profile' [OK]

Hint: Remember mounted path prefixes router routes [OK]

Common Mistakes:

• Forgetting the prefix from app.use
• Expecting route at root instead of prefixed path
• Assuming 404 without checking router setup

4. You have this code in products.js:

const express = require('express');
const router = express.Router();
router.get('/list', (req, res) => {
  res.send('Product List');
});
// Missing module.exports here

And in app.js:

const express = require('express');
const app = express();
const productsRouter = require('./products');
app.use('/products', productsRouter);
app.listen(3000);

What error will occur when starting the app or accessing /products/list?

medium

A. SyntaxError due to missing export

B. TypeError: Cannot read property 'use' of undefined

C. No error, but route won't respond

D. productsRouter is undefined, causing an error

Solution

1. Step 1: Check module export in products.js

   Since module.exports is missing, require('./products') returns undefined.

2. Step 2: Understand impact in app.js

   Using undefined as router in app.use causes an error when app tries to use it.

3. Final Answer:

   productsRouter is undefined, causing an error -> Option D

4. Quick Check:

   Missing export = undefined import error [OK]

Hint: Always export router to avoid undefined imports [OK]

Common Mistakes:

• Assuming app runs without export
• Confusing syntax error with runtime error
• Not checking module.exports presence

5. You want to separate routes for /api/users and /api/products into two files: users.js and products.js. Each file exports a router with routes starting at /. How should you mount these routers in app.js to correctly handle requests to /api/users/profile and /api/products/list?

hard

A. app.use('/api', usersRouter); app.use('/api', productsRouter);

B. app.use('/users', usersRouter); app.use('/products', productsRouter);

C. app.use('/api/users', usersRouter); app.use('/api/products', productsRouter);

D. app.use('/', usersRouter); app.use('/', productsRouter);

Solution

1. Step 1: Understand router base paths

   Each router handles routes starting at /, so mounting them at specific paths adds prefixes.

2. Step 2: Mount routers with full API paths

   Mount usersRouter at /api/users and productsRouter at /api/products to match desired URLs.

3. Final Answer:

   app.use('/api/users', usersRouter); app.use('/api/products', productsRouter); -> Option C

4. Quick Check:

   Mount routers at full paths for correct URL handling [OK]

Hint: Mount routers at full URL prefixes to match routes [OK]

Common Mistakes:

• Mounting routers at wrong or incomplete paths
• Mounting both routers at same path causing conflicts
• Assuming routers handle full paths internally