Middleware ordering and its importance in Express - Mini Project: Build & Apply

Middleware Ordering and Its Importance in Express

📖 Scenario: You are building a simple Express server that handles requests with middleware functions. Middleware functions process requests in order, like a line of workers passing a package. The order you add middleware matters because each one can change the request or response before the next one runs.

🎯 Goal: Learn how to create middleware functions in Express and understand why the order of middleware matters by setting up middleware in the correct sequence.

📋 What You'll Learn

Create an Express app with middleware functions

Add a logging middleware that runs first

Add a middleware that adds a custom header

Add a route handler middleware that sends a response

Understand and apply correct middleware ordering

💡 Why This Matters

🌍 Real World

Middleware ordering is crucial in real Express apps to ensure logging, authentication, data parsing, and error handling happen in the right sequence.

💼 Career

Understanding middleware order helps backend developers build reliable and maintainable Express servers that behave as expected.

1

Set up Express app and logging middleware

Create an Express app by requiring express and calling express(). Then add a middleware function called logger that logs "Request received" and calls next(). Use app.use(logger) to add it to the app.

Express

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

// Your code here

Hint

Start by importing Express and creating the app. Then write a middleware function that logs a message and calls next(). Add it with app.use().

2

Add middleware to set a custom header

Create a middleware function called addCustomHeader that sets the header "X-Custom-Header" to "MiddlewareDemo" on the response object. Use app.use(addCustomHeader) to add it after the logger middleware.

Express

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

function logger(req, res, next) {
  console.log("Request received");
  next();
}

app.use(logger);

// Your code here

Hint

Create a middleware that sets a header on the response and calls next(). Add it after the logger middleware.

3

Add route handler middleware to send response

Add a route handler middleware for GET requests on "/" using app.get. This middleware should send the text "Hello from Express!" as the response. Place this after the addCustomHeader middleware.

Express

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

function logger(req, res, next) {
  console.log("Request received");
  next();
}

app.use(logger);

function addCustomHeader(req, res, next) {
  res.setHeader("X-Custom-Header", "MiddlewareDemo");
  next();
}

app.use(addCustomHeader);

// Your code here

Hint

Use app.get to add a route handler for the root path that sends a response. This should come after the other middleware.

4

Start the server and listen on port 3000

Add code to start the Express server by calling app.listen on port 3000. Add a callback that logs "Server running on port 3000" when the server starts.

Express

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

function logger(req, res, next) {
  console.log("Request received");
  next();
}

app.use(logger);

function addCustomHeader(req, res, next) {
  res.setHeader("X-Custom-Header", "MiddlewareDemo");
  next();
}

app.use(addCustomHeader);

app.get("/", (req, res) => {
  res.send("Hello from Express!");
});

// Your code here

Hint

Use app.listen with port 3000 and a callback that logs a message when the server starts.

Practice

1. Why is the order of middleware important in an Express app?

easy

A. Because middleware order determines the database connection speed

B. Because middleware order changes the port number the app listens on

C. Because middleware runs in the order it is added, affecting request flow

D. Because middleware order controls the CSS styles applied to the page

Solution

1. Step 1: Understand middleware execution

   Middleware functions run in the order they are added to the Express app.

2. Step 2: Connect order to request flow

   The order controls how requests are processed and which middleware handles them first.

3. Final Answer:

   Because middleware runs in the order it is added, affecting request flow -> Option C

4. Quick Check:

   Middleware order = request flow control [OK]

Hint: Middleware order controls request handling sequence [OK]

Common Mistakes:

• Thinking middleware order affects unrelated app settings
• Confusing middleware order with server port configuration
• Assuming middleware order changes frontend styles

2. Which of the following is the correct way to add middleware that logs requests before parsing JSON in Express?

easy

A. app.use(express.static('public')); app.use(logger);

B. app.use(express.json()); app.use(logger);

C. app.use(express.urlencoded()); app.use(logger);

D. app.use(logger); app.use(express.json());

Solution

1. Step 1: Identify middleware order for logging and parsing

   Logging middleware should run before JSON parsing to log raw requests.

2. Step 2: Check the order in options

   app.use(logger); app.use(express.json()); adds logger first, then JSON parser, which is correct.

3. Final Answer:

   app.use(logger); app.use(express.json()); -> Option D

4. Quick Check:

   Logger before parser = correct order [OK]

Hint: Put logging middleware before parsers [OK]

Common Mistakes:

• Adding parser before logger loses raw request info
• Using static middleware instead of logger for logging
• Confusing urlencoded with json parser order

3. Consider this Express code snippet:

app.use((req, res, next) => { console.log('First'); next(); });
app.use((req, res, next) => { console.log('Second'); next(); });
app.use((req, res) => { res.send('Done'); });

What will be printed in the console when a request is made?

medium

A. Second\nFirst

B. First\nSecond

C. Done

D. No output

Solution

1. Step 1: Trace middleware execution order

   The first middleware logs 'First' then calls next(), so next middleware runs.

2. Step 2: Next middleware logs 'Second' and calls next(), then final middleware sends response.

3. Final Answer:

   First\nSecond -> Option B

4. Quick Check:

   Middleware logs in order added [OK]

Hint: Middleware logs appear in order of app.use calls [OK]

Common Mistakes:

• Assuming logs appear in reverse order
• Expecting 'Done' to print in console
• Forgetting next() calls to continue middleware chain

4. Given this Express setup:

app.use(express.json());
app.use((req, res) => { res.send('Hello'); });
app.use((err, req, res, next) => { res.status(500).send('Error'); });

Why might the error handler middleware never run?

medium

A. Because the response is sent before error handler is reached

B. Because express.json() must be last middleware

C. Because error handlers must be added before normal middleware

D. Because error handlers only run on GET requests

Solution

1. Step 1: Identify middleware order and response flow

   The second middleware sends a response immediately, ending the request.

2. Step 2: Understand error handler placement

   Error handlers run only if next(err) is called before response is sent.

3. Final Answer:

   Because the response is sent before error handler is reached -> Option A

4. Quick Check:

   Response sent early blocks error handler [OK]

Hint: Send response last, error handler after all middleware [OK]

Common Mistakes:

• Placing error handler before normal middleware
• Thinking express.json() must be last
• Assuming error handlers run on all requests regardless

5. You want to add middleware that authenticates users, logs requests, parses JSON, and handles errors. Which order is best to ensure correct behavior?

hard

A. Logger, JSON parser, authenticator, error handler

B. Error handler, JSON parser, logger, authenticator

C. Authenticator, error handler, logger, JSON parser

D. JSON parser, authenticator, error handler, logger

Solution

1. Step 1: Determine middleware roles and order

   Logger should run first to record raw requests. JSON parser next to parse body. Authenticator after parsing to check user data. Error handler last to catch errors.

2. Step 2: Match order with options

   Logger, JSON parser, authenticator, error handler matches this order: logger, JSON parser, authenticator, error handler.

3. Final Answer:

   Logger, JSON parser, authenticator, error handler -> Option A

4. Quick Check:

   Order: log -> parse -> auth -> error [OK]

Hint: Log first, parse next, authenticate after, error last [OK]

Common Mistakes:

• Putting error handler before other middleware
• Authenticating before parsing JSON body
• Logging after authentication instead of before