Why middleware is Express's core concept - See It in Action

Understanding Middleware in Express

📖 Scenario: You are building a simple web server using Express. Middleware functions are the building blocks that handle requests and responses step-by-step, like a team passing a message along a chain.

🎯 Goal: Build a basic Express server that uses middleware to log requests, check a condition, and send a response.

📋 What You'll Learn

Create an Express app variable

Add a middleware function to log each request's method and URL

Add a middleware function to check if a query parameter allow equals true

Send a response with Access granted if allowed, otherwise Access denied

💡 Why This Matters

🌍 Real World

Middleware is used in real web servers to handle logging, authentication, data parsing, and more in a clean, organized way.

💼 Career

Understanding middleware is essential for backend developers working with Express or similar web frameworks to build scalable and maintainable web applications.

1

Set up Express app

Create a variable called express by requiring the 'express' module, then create a variable called app by calling express().

Express

# Your code here

Hint

Use require('express') to import Express and then call it as a function to create the app.

2

Add logging middleware

Add a middleware function to app using app.use that logs the HTTP method and URL of each request using console.log. Use parameters req, res, and next. Call next() at the end.

Express

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

// Your code here

Hint

Middleware functions take three arguments and must call next() to pass control.

3

Add access control middleware

Add another middleware function to app using app.use that checks if req.query.allow equals the string 'true'. If yes, call next() to continue. Otherwise, send a response with Access denied and do not call next().

Express

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

app.use((req, res, next) => {
    console.log(`${req.method} ${req.url}`);
    next();
});

// Your code here

Hint

Check the query parameter and decide whether to continue or send a response.

4

Add final response handler

Add a middleware function to app using app.use that sends the response Access granted. This will run only if previous middleware called next().

Express

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

app.use((req, res, next) => {
    console.log(`${req.method} ${req.url}`);
    next();
});

app.use((req, res, next) => {
    if (req.query.allow === 'true') {
        next();
    } else {
        res.send('Access denied');
    }
});

// Your code here

Hint

This middleware sends the final response if access is allowed.

Practice

1. Why is middleware considered the core concept in Express?

easy

A. Because it allows adding reusable functions to process requests and responses

B. Because it automatically generates HTML pages

C. Because it replaces the need for routing in Express

D. Because it stores data permanently in the database

Solution

1. Step 1: Understand middleware role

   Middleware functions run during request processing to handle tasks like logging, authentication, or parsing.

2. Step 2: Identify middleware's core purpose

   It allows adding reusable steps that can modify requests or responses before final handling.

3. Final Answer:

   Because it allows adding reusable functions to process requests and responses -> Option A

4. Quick Check:

   Middleware = reusable request handlers [OK]

Hint: Middleware = reusable steps for requests [OK]

Common Mistakes:

• Thinking middleware generates HTML automatically
• Confusing middleware with database storage
• Believing middleware replaces routing

2. Which of the following is the correct syntax to use middleware in Express?

easy

A. app.route(function(req, res, next) { next(); });

B. app.middleware(function(req, res) { res.send('Hi'); });

C. app.use(function(req, res, next) { next(); });

D. app.handle(function(req, res) { next(); });

Solution

1. Step 1: Recall Express middleware syntax

   Middleware is added using app.use() with a function that takes req, res, next.

2. Step 2: Match syntax to options

   Only app.use(function(req, res, next) { next(); }); uses app.use and the correct function signature.

3. Final Answer:

   app.use(function(req, res, next) { next(); }); -> Option C

4. Quick Check:

   Middleware added with app.use() [OK]

Hint: Middleware uses app.use() with (req, res, next) [OK]

Common Mistakes:

• Using app.middleware instead of app.use
• Omitting the next parameter in middleware
• Confusing app.route with middleware

3. What will be the output when this middleware is used?

app.use((req, res, next) => {
  console.log('Middleware 1');
  next();
});
app.use((req, res) => {
  res.send('Hello from Express');
});

medium

A. The server logs 'Middleware 1' and responds with 'Hello from Express'

B. The server responds with 'Middleware 1' text

C. The server throws an error because next() is missing

D. Nothing happens because middleware is not called

Solution

1. Step 1: Analyze first middleware

   It logs 'Middleware 1' and calls next(), passing control to next middleware.

2. Step 2: Analyze second middleware

   It sends the response 'Hello from Express', ending the request.

3. Final Answer:

   The server logs 'Middleware 1' and responds with 'Hello from Express' -> Option A

4. Quick Check:

   Middleware logs then sends response [OK]

Hint: Middleware logs then calls next() to continue [OK]

Common Mistakes:

• Thinking next() is missing causing error
• Expecting middleware to send response twice
• Assuming middleware does not run in order

4. Identify the error in this middleware code:

app.use((req, res, next) => {
  res.send('Hello');
  next();
});

medium

A. Missing next parameter in function

B. Middleware must return a value

C. Middleware should not use res.send()

D. Calling next() after res.send() causes an error

Solution

1. Step 1: Understand res.send() behavior

   res.send() ends the response and sends data to client.

2. Step 2: Analyze calling next() after res.send()

   Calling next() after response is sent causes Express to try to continue processing, leading to errors.

3. Final Answer:

   Calling next() after res.send() causes an error -> Option D

4. Quick Check:

   Do not call next() after sending response [OK]

Hint: Don't call next() after res.send() [OK]

Common Mistakes:

• Thinking next() is missing
• Believing middleware must return a value
• Assuming res.send() can be called multiple times

5. You want to create middleware that logs request method and URL, then passes control. Which code correctly implements this?

hard

A. app.use((req, res, next) => { next(); console.log(req.method, req.url); });

B. app.use((req, res, next) => { console.log(req.method, req.url); next(); });

C. app.use((req, res, next) => { res.send(req.method + req.url); next(); });

D. app.use((req, res) => { console.log(req.method, req.url); });

Solution

1. Step 1: Check middleware signature and behavior

   Middleware must accept (req, res, next) and call next() to continue.

2. Step 2: Verify logging and next call order

   Logging before calling next() ensures the log happens before moving on.

3. Step 3: Evaluate options

   app.use((req, res, next) => { console.log(req.method, req.url); next(); }); logs method and URL, then calls next() correctly. app.use((req, res) => { console.log(req.method, req.url); }); misses next(), app.use((req, res, next) => { res.send(req.method + req.url); next(); }); sends response prematurely, app.use((req, res, next) => { next(); console.log(req.method, req.url); }); logs after next() which may be too late.

4. Final Answer:

   app.use((req, res, next) => { console.log(req.method, req.url); next(); }); -> Option B

5. Quick Check:

   Log then next() in middleware [OK]

Hint: Log first, then call next() in middleware [OK]

Common Mistakes:

• Omitting next() parameter
• Sending response inside logging middleware
• Calling next() before logging