Learn Express Middleware In 14 Minutes

in this video I'm gonna be talking all about Express middleware and teaching you everything you need to know and at the end of this video I'm gonna go over all of the common problems people run into with Express middleware so you will make sure that you don't run into these same problems let's get started now now with all of the middl work that you're gonna be writing after this video you're gonna need somewhere to host your website and that's where today's video sponsor atlanticnet hosting comes in perfectly they have an entire year long free trial that you can take advantage of where you can try out their servers completely for free for an entire year and if you use the code Kyl when you check out you're gonna get an additional $50 of credit you can use towards hosting on top of the entire year of free hosting so make sure you check out atlanticnet link down in the description below and use the code kyle when you sign up welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this and for this video to get started I have a just a little bit of code written ahead of time to save you from watching the boilerplate all I have is a simple Express server setup and I'm running it using node month so that we get Auto refresh every time we make a change for example if I save and refresh I don't need to restart my entire server and as you can see I just have some really simple routes right now we have a home page route and a user's route which all they do is send out the text home page or the text users page if we go to that users page as you can see here and we're gonna use this to explain everything you need to know about middleware but before I get started if you enjoy reading instead of watching I have an entire blog article that goes over middleware in-depth which you can check out as well if you want to I'll have that linked down in the description below so getting started with middleware I want to talk about the most basic form of middleware and exactly what middleware is because you may not be familiar with the exact definition of middleware essentially all that middleware is is the a function or program or something that is going to run between the time that the server gets the request and the time that the server sends the request out to the client so when I click refresh here I'm sending a request to the server and that gets to the server and this app get processes it and middleware is anything that happens between the time the server gets the request and the time that the server sends out a response so in definition this function right here for our app get users is actually a middleware because it's happening in between beginning of the response and the sending of the response and that is something really important to understand with express is that every single thing you write in relation to actions such as app get for these different actions is going to be middleware when you have your request and response variable that is a middleware that you are writing that is going to be acting in between the response sending and getting so this is the most basic form of middleware but really when you think of middleware you don't think of the actions such as these request response actions here you think of things that happen either before or after those actions so to get started I want to write a very simple login middleware and the easiest way to get started with a middleware is just to create a function so we're just going to create a function called logger and in here what we're gonna do is just console dot log log just like that we're just gonna be logging out some information whatever it is that you want to log out and this is going to take in a few different properties we have our request we have a response and we have a third variable which is called next so requests in response those are self-explanatory they are the requests that's getting sent to you and the response that you're sending back but next this is actually just a function and all you need to do with the next function is just call it so for example we can call next like this and what's going to happen is the next piece of middleware in line is going to be run when you call this next function all of these different parameters up here also take in a next just like this and we can call next inside of here but since this is the last piece of middleware there's really no point in calling next because there is no other middleware to call after this so that is why you almost never see this next inside of your middleware for your control their actions but here we have this logger it's logging out just the text log and we're calling next properly so in order to use this middleware we have a few different ways we can do it the first way is we can say we want this to be global middle winner so if we say F dot use and we put in our logger here we just pass it the name of the function we want we don't actually call this function we just pass it the name of the function because app dot use here it accepts a function that takes in these three different parameters so it's expecting a function that takes request response and next so we're passing it a function that takes those and if we save here and i refresh my page you'll notice this text log gets printed out and that's because this middleware is being ran and then we're calling next and then it's running our next piece of middleware which is here sending out our user's page we can even put a simple log in here just as users page and now if i refresh you can see it logs and then it prints out users page just like that and we'll also put the same thing inside of our home page as well so when we define a logger up here for our middleware inside of this app at use at the global level this is going to be run before every single one of our other requests so if we go to the home page you can see we get our log being ran here as well and if I save this and refresh you'll notice we get our home page being printed after our lock so this is going to be global to our entire application but something really really important to note about middleware is it runs in order that you define it so right now we have our logger being defined first and then our actions if we tell our logger to run after our actions you're going to notice something interesting if we refresh our page we only get home page being printed out and this logger is never being printed and that's because inside of these actions we're never actually calling next if we were to call next inside of here and now save and refresh you'll see it calls home page and then prints out our logger because in order our app get happens first and then our logger happens next and since we're never calling next from our action up here we're never actually getting in to this logger down here this is why in general when you're creating global actions such as this logger always want to put these at the very top of your file so that they happen before all of your different controller actions so the next type of middleware that I want to talk about is going to be middleware that is specific to a single action and you can define this type of middleware by just putting it inside of this apt-get function this function actually accepts essentially two things it accepts your path here which in our case is just the home path and then it accepts a list of different middleware right now we're passing it one single middleware which is our normal request but if we wanted to pass another middleware we're just gonna copy this paste this down and we're just gonna call this off and we want to authenticate people that go to our users page here it's gonna take a request response there next we're gonna log off out of here so what we do is we just pass this middleware to our function just like this so we have now two middleware being passed our off middleware and then our actual action middleware here and if we save refresh our page on the users version you can see we have our log being printed because that's our very first middleware then our auth is being printed next because it's the first in this list and then lastly our users page is being printed because it is the next in line of our list of middleware now something else that's really amazing about middleware is the ability for you to access the request and response parameters so what if we wanted to check to see if our user is actually authenticated instead of just logging out or off well we can do that by just putting in if in here insane if our request dot query dot admin so if it has the admin query parameter set equal to the string of true so that means that we have an admin user so we can just call next and go on to the next portion of our function otherwise if for some reason we don't we can exit out early and just send something along the lines of no auth and we'll send that down to our user and now we'll just delete these save again and when i refresh I'm not passing anything in our query string that says admin is true so we're should fail this authentication check and if we refresh you see we get this no auth being printed out just like this but if I come up here and I just say admin equals true now you can see I'm getting through to the users page so this is a super important inside of your middle where you're able to access your request and response in order to either exit out so we never actually got to this function because we sent to the server and never called next or you can just off people like this by checking your query parameters and then calling next in this example same thing with our logger we could print out something based on a request we could print out for example the original URL and now when we save and refresh over here you can see our URL gets printed out down here inside of our logger so that's another great use case for these different types of middleware but what if inside of our users controller action here we wanted access to whether or not the user was an admin or not all we need to do is pass information to the function for our users but we can't actually pass this inside of our next we can't come in here and say it true that their user is an admin because if we save this there's no way we can access this inside of here this should always takes request response and next it's never going to take this true parameter that we pass in here so in order to get around this what you need to do is set variables on either your request or response because this function has access to the request and response variable so if we say request dot admin is equal to true now we're actually setting this advan true variable for our request and up here inside of this function we can just console dot log and come in here and just say user is admin equals and we just want to say request dot admin now if we save and refresh you can see user as admin equals true but if we don't have that admin section in there and we save you see that we're just getting this slash users being printed out and then no auth and this is never being called because again we're never calling next inside of the failure case of our authentication so we're able to now pass variables from our middleware to other sections of our controller actions whether it's other middleware or the final result of our action here now that is the basics of what middleware does but the biggest biggest problem that I see people run into with middleware is the fact that they misinterpret exactly how this next function call works they assume that next essentially works the same as returning from a function so instead of having our function set up like this let's say that our function instead was set up like this or what we're doing is we're calling our if and if this is true or saying request outta demand equals true and we call next otherwise if this isn't true we're just going to be calling this function down here this red send no auth and if we save this and we come in here and we pass admin equals true and we hit enter you're gonna notice immediately a problem we're getting an error down here and essentially of saying cannot set headers after they are sent to the client what's happening is we're coming in here saying admin equals true okay then we call this next function up here we call all of this code which is great this finishes executing and then our function comes back down here we finished executing next so we continue executing our code and call Res send no auth which is why we're getting this error we need to make sure that if we want to exit out of our function we need to call return to stop this from executing any further because next is going to come back and execute again as soon as the function that next calls is done executing now if we save this and refresh you can see everything works as before with no more errors and a great way to illustrate this a little bit more in depth is inside of our logger let's just come in here and log out the text of before and we're gonna log out the text of after and this is going to be before our next and then after our next and let's just for now remove this off logging just like this so we just have users page and we have before and after so if i refresh over here you see I get the text before being printed out so it's coming into the logger calling before and then it calls next and this next calls the next middleware which in our case is this function here which logs out user and then sends our user and then after that's done it comes back here and executes everything after our next which in our case is after so it's going to in order before and then users page and then after and this is super super important to understand because it's really easy to write code and forget to include a return and then you have problems where you don't actually want to call this code down here but you're accidentally calling it because you're never Xing it out of this function after the - finishes executing this can be a really great trick though because if you want to run some form of middleware after every single one of your functions executes it's really hard to do because we already know we can't just move our logger to the bottom because that's going to run into problems where we're not calling necks inside of our controller actions so what you can do instead is put your logger up at the top and then just call next immediately and then after all of your controller actions in middleware finish this is going to call after your next is finished so we're able to essentially use a middleware that's defined at the very top and have it execute after every single thing and our entire chain of middleware finishes executing which is again really useful for certain logging situations where you want to log that a request finished executing so you can maybe log out what the response is going to the user the most important takeaway from this video though is that middleware is essentially just a function which takes a request a response and a next and it will call next whenever it wants to move on to the next form of middleware and in between there it can modify the request in response however it sees fit that is essentially all middleware is but that doesn't mean that it's not powerful because you can do so much with these simple set of tools for middleware and with that said I really hope you enjoyed this video and if you did you should check out some of my other videos linked over here and subscribe to the channel for more videos just like this one thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 133,474

Rating: 4.9603438 out of 5

Keywords: webdevsimplified, node js middleware, nodejs middleware, node.js middleware, node js, nodejs, node.js, express, express nodejs, express node js, express node.js, express middleware, express middleware tutorial, middleware, middleware tutorial, middleware js, middleware js tutorial, express js middleware, express js middleware tutorial, express js tutorial, learn express middleware, learn express middleware in depth, middle ware, middle ware express, middle ware express js, js

Id: lY6icfhap2o

Length: 14min 48sec (888 seconds)

Published: Sat Mar 28 2020