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
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
// (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:
The
dispatchChainas the name suggests, Will dispatch a chain of functions.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.
Now we can modify our
serverHandlerfunction, to execute the middlewares for the current route.
Testing
index.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:
First middleware function using the
nextfunction to pass to the next middleware.Second middleware function using the
nextfunction to pass to the next middleware.Controller to route without
nextfunction. Here we can return something to the client, as a message for example.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 you can see more about the middleware pattern.
Also, you can take a look at the code here
Don't hesitate to follow me to receive more content.
Thanks!
Top comments (0)