Creating your own ExpressJS from scratch (Part 6) - Creating a body-parser middleware

I have not created tutorials for our Framework for a while, but It's time to return.

Understanding and Creating a Custom Body-Parser Middleware

In this tutorial, we'll dive into the creation of a custom body-parser middleware for our web framework. Before we get into the code, let's understand why this middleware is essential.

Why a Body-Parser Middleware?

The body-parser middleware is a crucial component in web applications as it allows us to transform incoming data streams from HTTP requests into accessible JavaScript objects. Understanding and creating a custom body-parser middleware is fundamental to handling incoming data effectively.

Creating the Middleware

src/body-parser.js

const BodyParser = async (req, res, next) => { // (1) let body = [] for await (const chunk of req) { body.push(chunk) } // (2) body = Buffer.concat(body).toString() // (3) if (req.headers['content-type'] === 'application/json') { req.body = JSON.parse(body) } else if (req.headers['content-type'] === 'application/x-www-form-urlencoded') { let params = new URLSearchParams(body) let entries = params.entries(); req.body = Object.fromEntries(entries) } next() } module.exports = BodyParser 

From the code sessions above

We already know how to create middleware for our Framework, It has the same middleware definition. if you don't know, please take a look at the previous tutorials.

1 - We are reading and storing the Stream object from the request.

2 - Converting the Stream object to a String

3 - Depending on the content-type we have to convert the String to a Javascript Object.

Using the Custom Middleware

Now we have to import our middleware and use it for all requests.

index.js

const BodyParser = require('./src/body-parser') app.useAll(BodyParser) app.post('/body-parser', (req, res) => { res.send(`name: ${req.body.name}, age: ${req.body.age}`) }) 

Testing the Middleware

If you make a POST request to the endpoint /body-parser with a JSON body like this:

{ "name": "Wesley Miranda", "age": 28 } 

You will receive the following response:

name: Wesley Miranda, age: 28 

You can see here how the code is looking.

In the next tutorials, we are going to create the cors and multer middleware for our framework.

I hope you like it!

See you soon!