Building custom middleware in Node.js - Mini Project: Build & Apply

Building custom middleware

📖 Scenario: You are creating a simple Node.js server using Express. You want to add a custom middleware function that logs the request method and URL for every incoming request.

🎯 Goal: Build a custom middleware function in Express that logs the HTTP method and URL of each request, then use it in your server.

📋 What You'll Learn

Create an Express app

Write a middleware function named logger that logs the request method and URL

Use the logger middleware in the Express app

Add a simple route / that sends a response

💡 Why This Matters

🌍 Real World

Middleware is used in real web servers to add features like logging, authentication, and error handling without changing route code.

💼 Career

Understanding middleware is essential for backend developers working with Node.js and Express to build scalable and maintainable web applications.

1

Set up Express app

Create a variable called express that requires the 'express' module. Then create a variable called app by calling express().

Node.js

const express = require('express');
const app = express();
// Your code here

Hint

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

2

Create logger middleware

Write a middleware function called logger that takes req, res, and next as parameters. Inside it, log the request method and URL using console.log, then call next().

Node.js

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

// Create logger middleware function
// Your code here

Hint

The middleware function must call next() to pass control to the next middleware.

3

Use logger middleware in app

Use the logger middleware in the Express app by calling app.use(logger).

Node.js

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

function logger(req, res, next) {
    console.log(`${req.method} ${req.url}`);
    next();
}

// Use logger middleware
// Your code here

Hint

Use app.use() to add middleware to the Express app.

4

Add a simple route

Add a GET route for / using app.get that sends the text 'Hello World' as the response.

Node.js

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

function logger(req, res, next) {
    console.log(`${req.method} ${req.url}`);
    next();
}

app.use(logger);

// Add GET / route
// Your code here

Hint

Use app.get with a callback that calls res.send to send the response.

Practice

1. What is the main purpose of custom middleware in a Node.js Express app?

easy

A. To directly send HTML pages to the client

B. To add extra processing steps between receiving a request and sending a response

C. To replace the Express router completely

D. To store data permanently in a database

Solution

1. Step 1: Understand middleware role

   Middleware functions run between receiving a request and sending a response, allowing extra processing.

2. Step 2: Identify correct purpose

   Custom middleware adds steps like logging, authentication, or modifying requests before response.

3. Final Answer:

   To add extra processing steps between receiving a request and sending a response -> Option B

4. Quick Check:

   Middleware = extra processing steps [OK]

Hint: Middleware adds steps between request and response [OK]

Common Mistakes:

• Thinking middleware sends responses directly always
• Confusing middleware with routing
• Assuming middleware stores data permanently

2. Which of the following is the correct syntax to define a simple middleware function in Express?

easy

A. app.use = function(req, res, next) { console.log('Hi'); next(); }

B. app.middleware(req, res, next) { console.log('Hi'); next(); }

C. app.use(req, res, next) => { console.log('Hi'); next(); }

D. app.use((req, res, next) => { console.log('Hi'); next(); });

Solution

1. Step 1: Recall Express middleware syntax

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

2. Step 2: Check each option

   app.use((req, res, next) => { console.log('Hi'); next(); }); correctly uses app.use with an arrow function and calls next(). Others have syntax errors.

3. Final Answer:

   app.use((req, res, next) => { console.log('Hi'); next(); }); -> Option D

4. Quick Check:

   app.use + (req, res, next) function = correct [OK]

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

Common Mistakes:

• Missing parentheses around parameters
• Assigning app.use instead of calling it
• Using arrow function without parentheses for multiple params

3. Consider this middleware code snippet:

app.use((req, res, next) => {
  req.customValue = 42;
  next();
});
app.get('/', (req, res) => {
  res.send(`Value is ${req.customValue}`);
});

What will be the response when a client requests '/'?

medium

A. Value is 42

B. Value is undefined

C. Error: req.customValue is not defined

D. Empty response

Solution

1. Step 1: Understand middleware effect on req object

   The middleware adds a property customValue with 42 to the req object and calls next() to continue.

2. Step 2: Check route handler usage

   The route handler reads req.customValue and sends it in the response string.

3. Final Answer:

   Value is 42 -> Option A

4. Quick Check:

   Middleware sets req.customValue = 42 [OK]

Hint: Middleware can add properties to req used later [OK]

Common Mistakes:

• Assuming req.customValue is lost after middleware
• Thinking next() stops execution
• Expecting error without setting property

4. Identify the error in this middleware code:

app.use((req, res, next) => {
  if (!req.headers['x-auth']) {
    res.status(401).send('Unauthorized');
  }
  next();
});

medium

A. Calling next() after sending a response causes error

B. Missing call to next() inside the if block

C. Headers should be accessed as req.header, not req.headers

D. Middleware must always send a response

Solution

1. Step 1: Analyze middleware flow

   If 'x-auth' header is missing, response is sent with 401 status, ending the request.

2. Step 2: Check next() call after response

   Calling next() after sending a response causes Express to continue processing, leading to errors.

3. Final Answer:

   Calling next() after sending a response causes error -> Option A

4. Quick Check:

   Do not call next() after res.send [OK]

Hint: Don't call next() after sending response [OK]

Common Mistakes:

• Calling next() after res.send causing double response
• Assuming headers property name is wrong
• Thinking middleware must always send response

5. You want to create middleware that logs request method and URL only for POST requests. Which code correctly implements this?

hard

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

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

C. app.use((req, res, next) => { if (req.method === 'POST') console.log(req.method, req.url); next(); });

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

Solution

1. Step 1: Check condition for POST method

   Correct comparison uses '===' and string 'POST' in uppercase.

2. Step 2: Verify logging and next call

   app.use((req, res, next) => { if (req.method === 'POST') console.log(req.method, req.url); next(); }); logs method and URL only if method is POST, then calls next() to continue.

3. Final Answer:

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

4. Quick Check:

   Use strict equality and uppercase 'POST' [OK]

Hint: Use === 'POST' to check method string correctly [OK]

Common Mistakes:

• Using single = instead of === for comparison
• Using lowercase 'post' instead of uppercase
• Using undefined POST variable without quotes