Express JS - What the Heck is Middleware

right next up in our series on Express I'm going to be talking about middleware so what the hell is middleware middleware is how Express handles a sequence of functions so we can be listening for like the get request and maybe there's also a post request maybe we've got three or four and get requests on different URLs so how does it Express deal with the fact that there's this sequence sometimes there's going to be things that you want to process on every request like if it's a course request something that you have to handle the headers and make sure that somebody is allowed to make the request maybe there's a thent ocation going on and you need to make sure that every request has been validated or authenticated this is the purpose of middleware it's like a series of functions that we can call so I've built a basic starter Express project I just have a folder I did in my npm in it to create my package JSON file I've installed Express I created my starter app dot J's file so you can see here that I've required Express and I've I've run the Express method to get my app object and I'm listening on port 3000 so there's my starter I also created a file called middle GS I could have called it anything just this is the name that I chose inside of here I've got two functions and I'm exporting those two functions so over here we're importing them using require for the middle file they're both in the same folder I'm bringing these same things in now I can use these as middleware so here we can say app dot use and inside of here I can say on every request that comes in I want to call this function so this function coming from over here this is the one that I want to use and now every single request that comes in is going to call this function whenever there's a request coming in so we can open up our terminal here we can start our node app okay there it is it's running now I'm gonna do a curl request let's move this over a little bit there we go and we'll curl HTTP local host on port 3000 there's my request coming in and you can see this function ran now nothing else has happened and you can see there's no response here yet it's just sort of hung and it's waiting it doesn't know what to do next so let's move on to solve that problem now just slide that down a little bit there we go uses great when it's the first step in the process I can add middleware functions in that I'm gonna use on every call but I don't have to use them on every single call I could but I don't need to let's see I've got an app dot get handling this and we've got our request on our response objects if inside of here I was saying response dot send and we're sending back some data there we go now a request for this if we were to start up our server again listening on the port and now we send it in we get the actual response we are getting this response from the server wonderful but I want to apply this middleware on every request if I come back in here save it run it again I'm back to that same problem where the request just sort of hangs I never get a response which doesn't work for me so how do I get this to move from this on to my next function this function that we're using inside of all of these by the way inside of get post and so on all of these these are middleware as well they just tend to be the last middleware function in a long list of functions that can be running in the background over here the cool thing about this function when I'm using it as middleware is it gets the same things as this one so inside of here I'm actually getting the request object and the response object so if I wanted to write out console dot log let's see my request dot method that's gonna write out to get call for me so again we run this now I'm still not getting a response here but there it is there's the get I actually do have the request and response objects here alright let's kill that again so how do I get from here to here that was what we were trying to solve by the third parameter next every time you have a middleware function there is going to be a function that is passed along xpress looks at all the middleware being used and creates a sequence and says ok this is the order they were added so this is the order that functions are going to run and every time I call one of these functions I'm going to tell them what's the next function in the list so in here I can add next now it's gonna go from using this to my route and then this will be the next function now you don't see this in any of my other examples that I've done up until now because we don't need next when we get to the end here when we're sending the response that's it we're done we're at the end there's nothing else we need to do so why have next inside of here I could put it there but I'm not using it so there is no point in doing that so we'll leave it out save that now let's run this again now that we've got this changed we've added next we're calling next this time when I run it it's listening and we run our curl command there we go now it got the response and it's done so this middleware function was called it ran it came back and then it said oh ok here's the route that we're actually handling I'm gonna call this function and we're sending the response and that sort of ends the process our servers still listening but the client is happy the client got their response so that's one way of adding middleware with use this applies it to everything with get and post and all these other methods the first parameter is the route that we're looking for the endpoint but we can list as many middleware functions as we want so inside of here I could say hey I'm gonna call the how middleware and then I'm gonna call sup again so to prevent the problem that we had up here again we're going to pass in the request object the response object and the next function so we can call next every time this is called it's going to automatically call next so we should get sup with the method get' so we should get those two lines then how should run was you'd see how you doing and then sup again to get and some then our response should be sent back so we'll save this killer server start it over again and when we do our curl there we have it gets up so that's the sup function running then we've got the howl and then we've got sup running again and after all of that after the three functions have run then this final bit of middleware this final function is going to run and the send method is going to actually send the response to the server one common one that we may see if I kill this again I'm gonna npm install one called course there's an NPM package called course I should have said save as well but inside of here I can now because I've installed it I can say Const course equals require course that will be in my NPM modules folder okay I'm just going to clear these two out and we're gonna add our cores in so once we have this imported then just like our sub function we're going to add this in so it handle every one of our course requests so we're calling this as a middleware function this is going to run and then it will call next as well just like suck did so every one of our requests there we go we're listening run it again and there we go now this is adding in the appropriate headers so that we don't have cores issues when we're making our Ajax requests to the servers and again this could also be added inside of here as another one of the functions the middleware functions all right so there are hundreds of middleware functions that are out there things that you can add in to help you there's different parsers there's cookie middleware there's a cookie person middleware course authentication passports one that we can add in lots and lots and lots and as I go on with the Express series I'll start showing how to use some of these other middleware functions but for now that's the idea behind middleware it is just simply functions that get called in order with app dot use we can apply middleware functions to everything and inside of our methods for the various methods so get post put patch delete and so on with the route you can just list them all off here so these are the functions that I'm calling and inside those functions remember to use the next method so that will actually move on to the next one all right if you have any questions feel free to leave those in the comments down below and as always thanks for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 18,195

Rating: 4.9679146 out of 5

Keywords: MAD9014, MAD9022, web development, JavaScript, JS, CSS, HTML, steve flix, steveflix, web dev, tutorial, express, expressjs, express js tutorial, express tutorial, introduction to express js, mad9124, node js, node js tutorial, node web servers, middleware, express middleware, express middleware tutorial

Id: MIr1oxQ3pao

Length: 10min 32sec (632 seconds)

Published: Thu Jan 23 2020