Nodejs Request And Response Middleware Complete Guide

Prerequisites

Before we start, ensure you have Node.js and npm installed on your system. You can download them from nodejs.org.

Step 1: Set Up the Project

First, create a new directory for your project and initialize it with npm:

mkdir nodejs-middleware-example
cd nodejs-middleware-example
npm init -y

This will create a package.json file with default settings.

Step 2: Install Express.js

Install Express.js using npm:

npm install express

Step 3: Create a Basic Express Server

Create a file named server.js and add the following code to set up a basic Express server:

// server.js
const express = require('express');

const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

To start the server, run:

node server.js

You should see the message Server is running on http://localhost:3000. Open your browser and go to http://localhost:3000 to see "Hello, World!" displayed.

Step 4: Create and Use Custom Middleware

Middleware in Express is a function that has access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.

Let's create a custom middleware that logs the request method and URL.

Create Middleware

1. Logger Middleware:

Create a new directory named middleware:

mkdir middleware

Inside the middleware directory, create a file named logger.js:

// middleware/logger.js

function logger(req, res, next) {
  const timestamp = new Date().toISOString();
  console.log(`${timestamp} - ${req.method}: ${req.url}`);
  next(); // Call the next middleware function in the stack
}

module.exports = logger;

2. Error Handling Middleware:

Create another middleware to handle errors. Create a file named errorHandler.js inside the middleware directory:

// middleware/errorHandler.js

function errorHandler(err, req, res, next) {
  console.error(err.stack);
  res.status(500).send('Something broke!');
}

module.exports = errorHandler;

Use Middleware in the Server

Now, let's use the middleware in our server.js.

// server.js
const express = require('express');
const logger = require('./middleware/logger');
const errorHandler = require('./middleware/errorHandler');

const app = express();
const PORT = 3000;

// Use logger middleware
app.use(logger);

// Define routes
app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.get('/error', (req, res) => {
  throw new Error('Oops! Something went wrong.');
});

// Use error handling middleware
app.use(errorHandler);

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Explanation

1. Logger Middleware:

   • Logs the request method and URL with a timestamp.
   • Calls next() to pass control to the next middleware function.

2. Error Handling Middleware:

   • Logs the error stack to the console.
   • Sends a 500 status code with a "Something broke!" message.
   • Important: Error handling middleware should be placed last in the middleware stack to ensure it can catch errors from other middleware and routes.

Test the Middleware

1. Start the Server:

   node server.js
   

2. Test the Logger Middleware:

   • Visit http://localhost:3000.
   • Check your terminal for the log message, e.g., 2023-10-01T12:34:56.789Z - GET: /

3. Test the Error Handling Middleware:

   • Visit http://localhost:3000/error.
   • You should see an error message in your browser: Something broke!.
   • Check your terminal for the error stack.

Step 5: Built-in and Third-Party Middleware

Built-in Middleware

Express provides several built-in middleware functions:

1. express.json(): Parses incoming requests with JSON payloads.
2. express.urlencoded(): Parses incoming requests with URL-encoded payloads.
3. express.static(): Serves static files (e.g., HTML, CSS, client-side assets).

Example: Serve Static Files

1. Create a public Directory:

   mkdir public
   

2. Add an index.html File:

   <!-- public/index.html -->
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Static File</title>
   </head>
   <body>
       <h1>Welcome to the Static File!</h1>
   </body>
   </html>
   

3. Use express.static Middleware:

   Modify server.js to include the static middleware:

   // server.js
   const express = require('express');
   const logger = require('./middleware/logger');
   const errorHandler = require('./middleware/errorHandler');
   
   const app = express();
   const PORT = 3000;
   
   // Use logger middleware
   app.use(logger);
   
   // Serve static files from the 'public' directory
   app.use(express.static('public'));
   
   // Define routes
   app.get('/', (req, res) => {
     res.send('Hello, World!');
   });
   
   app.get('/error', (req, res) => {
     throw new Error('Oops! Something went wrong.');
   });
   
   // Use error handling middleware
   app.use(errorHandler);
   
   app.listen(PORT, () => {
     console.log(`Server is running on http://localhost:${PORT}`);
   });
   

4. Test the Static File:

   • Visit http://localhost:3000/index.html or simply http://localhost:3000 (since index.html is the default file).
   • You should see the "Welcome to the Static File!" message.

Third-Party Middleware

There are many third-party middleware packages available on npm that extend the functionality of Express. Some popular ones include:

1. body-parser: Parse incoming request bodies.
2. helmet: Set HTTP headers for security.
3. morgan: HTTP request logger middleware.

Example: Using body-parser Middleware

Since Express 4.16.0, express.json() and express.urlencoded() are built-in and you don't need body-parser for simple use cases. However, here's how you would use it if needed:

1. Install body-parser:

   npm install body-parser
   

2. Use body-parser Middleware:

   // server.js
   const express = require('express');
   const bodyParser = require('body-parser');
   const logger = require('./middleware/logger');
   const errorHandler = require('./middleware/errorHandler');
   
   const app = express();
   const PORT = 3000;
   
   // Use logger middleware
   app.use(logger);
   
   // Use body-parser middleware
   app.use(bodyParser.json()); // Parses JSON bodies
   app.use(bodyParser.urlencoded({ extended: true })); // Parses URL-encoded bodies
   
   // Serve static files from the 'public' directory
   app.use(express.static('public'));
   
   // Define routes
   app.get('/', (req, res) => {
     res.send('Hello, World!');
   });
   
   app.post('/submit', (req, res) => {
     console.log(req.body);
     res.send(`Received data: ${JSON.stringify(req.body)}`);
   });
   
   app.get('/error', (req, res) => {
     throw new Error('Oops! Something went wrong.');
   });
   
   // Use error handling middleware
   app.use(errorHandler);
   
   app.listen(PORT, () => {
     console.log(`Server is running on http://localhost:${PORT}`);
   });
   

3. Test the POST Request:

   • Use a tool like Postman or curl to send a POST request to http://localhost:3000/submit with a JSON body:

     curl -X POST http://localhost:3000/submit -H "Content-Type: application/json" -d '{"name": "John", "age": 30}'
     

   • You should see the logged data in your terminal and the response in the browser or Postman showing the received data.

Conclusion

By following these steps, you should have a good understanding of how to create and use middleware in Node.js with Express.js. Middleware is a powerful tool for managing request, response, and error handling in your web applications.