Creating your own ExpressJS from scratch (Part 2) - Middlewares and Controllers
Tags: webdev, node, javascript, tutorial
Published: 2023-04-09 19:13:02

Today I want to show you more about how to create a Web Framework like Express.js. This is part 2 of a series of a tutorial that I am creating. You missed part 1, check it out [here](https://dev.to/wesleymreng7/creating-your-own-expressjs-from-scratch-part-1-basics-methods-and-routing-a8)

We are going to apply middleware and controllers for our routes, for it We need to use the `middleware` pattern. If you want to know more about it, I will let a link at the end of this tutorial.

Let's get started.

---

## Middlewares

`src/app.js`
```js
// (1)
const dispatchChain = (request, response, middlewares) => {
    return invokeMiddlewares(request, response, middlewares)
}

// (2)
const invokeMiddlewares = async (request, response, middlewares) => {

    if (!middlewares.length) return;

    const currentMiddleware = middlewares[0];

    return currentMiddleware(request, response, async () => {
            await invokeMiddlewares(request, response, middlewares.slice(1));
    })
}
// (3) 
const serverHandler = async (request, response) => {
    const sanitizedUrl = sanitizeUrl(request.url, request.method)

    const match = matchUrl(sanitizedUrl)

    if (match) {
            const middlewaresAndControllers = routes.get(match)
            await dispatchChain(request, response, [...middlewaresAndControllers])
    } else {
            response.statusCode = 404
            response.end('Not found')
    }
}
```
**From the code sections above**:

1. The `dispatchChain` as the name suggests, Will dispatch a chain of functions.

2. This is a middleware handler, responsible to execute and remove the function from the array of middleware, till there is no more function to execute.

3. Now we can modify our `serverHandler` function, to execute the middlewares for the current route.

---

## Testing

`index.js`

```js
const App = require('./src/app')

const app = App()


app.get('/test/test2', function test() { }, function test2() { })
app.post('/test', (req, res) => console.log('test'))
app.patch('/test', (req, res) => console.log('test'))
app.put('/test', (req, res) => console.log('test'))
app.del('/test', (req, res) => console.log('test'))

// (1)
const mid1 = (req, res, next) => {
    console.log('mid1')
    next()
}
// (2)
const mid2 = (req, res, next) => {
    console.log('mid2')
    next()
}
// (3)
const controller = (req, res) => {
    console.log('controller')
    res.end('controller')
}
// (4)
app.get('/middleware', mid1, mid2, controller)



const start = async () => {
    app.run(3000)
}

start()
```

**From the code sections above**:

1. First middleware function using the `next` function to pass to the next middleware.

2. Second middleware function using the `next` function to pass to the next middleware.

3. Controller to route without `next` function. Here we can return something to the client, as a message for example.

4. Applying the middleware and controller to a route.



Middleware pattern is not so difficult to apply, in a few code lines you can use it in your application.

At this [link](https://evertpot.com/generic-middleware/) you can see more about the `middleware` pattern.

Also, you can take a look at the code [here](https://github.com/wesleymreng7/web-framework-scratch)

Don't hesitate to follow me to receive more content.

Thanks!