How to use Express Middleware

Middleware functions are functions that execute after the server receives the request and before the controller action sends the response. Essentially it is code that executes in the middle of your request, hence the name middleware. Before I get too in-depth on the details of middleware, though, I want to set up a basic Express server with two routes.

Setting Up An Express Server

To start a Node.js project we need to run “npm init -y” in your project folder. this will create a basic package.json file with all of the default values filled in for you. after that, we need to install express by running “npm install express”. In last we need to create an app.js file with the following code.

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

app.get('/', (req, res) => {
  res.send('Home Page')
})

app.get('/users', (req, res) => {
  res.send('Users Page')
})

// Start the Server
app.listen(4000, ()=>{ console.log(`server running on port 4000`)})

This app.js file will set up the server at 4000 port. app.js has two routes, a home page route and a users page route. After that run node app.js to start the application and if everything worked you should see a message in the console saying server running on port 4000. open your browser to localhost:3000 and you should see the message Home Page. If you go to localhost:3000/users you should then see the message Users Page.

This is the basic setup for our application. whenever we make changes in an application we need to restart your server in the console to see the changes take effect.

What Is Middleware?

We talked briefly about middleware as functions that execute after the server receives the request and before the controller action sends the response, but there are a few more things that are specific to middleware. The biggest thing is that middleware functions have access to the response (res) and request (req) variables and can modify them or use them as needed. Middleware functions also have a third parameter which is a next function. This function is important since it must be called from a middleware for the next middleware to be executed. If this function is not called then none of the other middleware including the controller action will be called.

This is all a bit difficult to understand just from the text so in the next section we are going to create a logging middleware that will log the URL of the request a user makes.

Create a Logging Middleware

the middleware takes three parameters, req, res, and next, so in order to create middleware, we need to create a function that has those three inputs.

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

app.get('/', (req, res) => {
  res.send('Home Page')
})

app.get('/users', (req, res) => {
  res.send('Users Page')
})

function loggingMiddleware(req, res, next) {
  console.log('Inside Middleware')
}
// Start the Server
app.listen(4000, ()=>{ console.log(`server running on port 4000`)})

We have defined a basic middleware function but currently, the application is not using it. Suppose we make this middleware execute before every single controller action by adding it to the application level. This can be done by using the use function on the app variable like this.

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

app.use(loggingMiddleware)
app.get('/', (req, res) => {
  res.send('Home Page')
})

app.get('/users', (req, res) => {
  res.send('Users Page')
})

function loggingMiddleware(req, res, next) {
  console.log('Inside Middleware')
}
// Start the Server
app.listen(4000, ()=>{ console.log(`server running on port 4000`)})

The application is now using the middleware that we defined and if we restart our server and navigate to any of the pages in our app you will notice that in the console the message Inside Middleware appears. This is great, but there is a slight problem. The application now loads forever and never actually finishes the request. This is because in our middleware we are not calling the next function so the controller action never gets called. We can fix this by calling next after our logging.

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

app.use(loggingMiddleware)

app.get('/', (req, res) => {
  res.send('Home Page')
})

app.get('/users', (req, res) => {
  res.send('Users Page')
})

function loggingMiddleware(req, res, next) {
  console.log('Inside Middleware')
  next()
}
// Start the Server
app.listen(4000, ()=>{ console.log(`server running on port 4000`)})

after restarting the server you will notice that everything is logging correctly, and the web page is properly loading. The next thing to do is to actually log out the URL that the user is accessing inside the middleware. This is where the req variable will come in handy.

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

app.use(loggingMiddleware)

app.get('/', (req, res) => {
  res.send('Home Page')
})

app.get('/users', (req, res) => {
  res.send('Users Page')
})

function loggingMiddleware(req, res, next) {
  console.log(`${new Date().toISOString()}: ${req.originalUrl}`)
  next()   
}
// Start the Server
app.listen(4000, ()=>{ console.log(`server running on port 4000`)})

Conclusion

That is all about middleware. Middleware is incredibly powerful for cleaning up code and making things like user authorization and authentication much easier, but it can be used for so much more than just that because of the incredible flexibility of middleware.