And at the end of this video, I'm gonna go over all of the common problems people run into with Express Middle where?

So you will make sure that you don't run into these same problems.

Let's get started now.

Now, with all of the middle where 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, atlantic dot net 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, Kyle, 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 atlantic dot net, lied down in the description below and use the code.

Kyle, when you sign up, welcome back to Webb.

Have simplified my name's Kyle and my job is to simplify the web for you so you could 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 just a little bit of code written ahead of time to save you from watching the boiler plate.

All I have is a simple express server set up, and I'm running it using node money 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 user's page.

If we go to that user's page, as you can see here and we're gonna use this to explain everything you need to know about middleware.

But before we get started, if you enjoy reading instead of watching, I have an entire bog article that goes over middle, where in depth would you can check out as well if you want to I'll have that linked down in the description below.

So getting started with middle, where I want to talk about the most basic form of middleware and exactly what middle where is because you may not be familiar with the exact definition of middleware.

Essentially all that middle where is, is it is 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 dot get processes it.

And middle, where 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 dot get users is actually a middle where, because it's happening in between the getting 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 a zap dot get for these different actions is going to be middle, where when you have your request and response variable, that is a middle where that you're writing that is going to be acting in between the response sending and getting.

So this is the most basic form of middle where but really when you think of middle where you don't think of the actions such as thes request response actions here you think of things that happened either before or after those actions.

So to get started, I want to write a very simple logging middleware and the easiest way to get started with the middle where is just to create a function.

So we're going to create a function called longer.

And here what we're gonna do is just console that log log just like that.

We're just gonna be locking out some information, whatever it is that you want along out, and this is going to take in a few different properties.

We have our request.

We have a response, and we have 1/3 variable, which is called Next.

So request in response, those air self explanatory here, the request 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 call next like this on what's going to happen is the next piece of middle where 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 middle where there's really no point in calling next because there is no other middle where to call after this.

So that is why you almost never see this next inside of your middle, where for your control, their actions.

But here we have this longer it's logging out just the text log and recalling next properly.

So, in order to use this middle where we have a few different ways, we can do it.

The first way is we can say we want this to be global middleware.

So if we say half 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 that use here, it accepts a function that takes in these three different parameters.

So it's expecting a function that takes request response in 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 middle, where is being ran and then we're calling next.

And then it's running our next piece of middle, where which is here sending out our user's page.

We can put a simple log in here, says User's Page.

And now, if I refresh, you could see it logs and then it prints out user's page just like that, and we'll also put the same thing inside of our home page as well.

So when we define a longer appear for our middle where inside of this appetite used at the global level, this is gonna be run before every single one of our other request.

So if we go to the home page, you can see we get our long being ran here as well And if I save this and refresh, you want to speak in 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 know about middle where is it?

Runs in order that you define it.

So right now we have our longer being defined first, and then our actions.

If we tell our Logar to run after our actions, you're gonna notice something interesting.

If we refresh our page, we only get home page being printed out and this Logar is never being printed.

And that's because inside of these actions were never actually calling.

Next, if we would have called next inside of here and now safe and refresh, you'll see it calls home page and then prints out our longer because in order are apt dot get happens first and then our longer happens next.

And since we're never calling next from our action, appear were never actually getting in to this longer down here.

This is why in general, when you're creating global actions such as this longer, you almost always want to put these at the very top of your file.

So they happened before all of your different controller actions.

So the next type of middle where that I want to talk about is going to be middle word that is specific to a single action.

And you can define this type of middle where by just putting it inside of this app dot get function dysfunction actually accepts essentially two things.

It accepts your path here, which in our case, is just the homeopath.

And then it accepts a list of different middleware.

Right now we're passing it one single middleware, which is our normal request.

But we wanted to pass it another middle where we're just gonna copy this pace is 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 in the next.

We're gonna log off out of here.

So what we do is we just passed this middle.

Where to our function just like this.

So we have now two middle where being passed are off middleware, and then our actual action middle, we're here.

And if we save, refresh our page on the user's version, you can see we have our log being printed because that's our very first middle where then our office being printed next?

Because it's the first in this list and then, lastly, our users pages being printed because it is the next in line of our list of middleware.

Now, something else that's really amazing about Middle.

Where is the ability for you to access the request in response parameters?

So what if we wanted to check to see if our user is actually authenticated instead of just logging out are 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 perimeter 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 weaken, exit out early and just send something along the lines of no off and we'll send that down to our user.

And now we're 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 automatically should fail this authentication check.

And if we refresh you see me get this No, off 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 user's page.

So this is super important that inside of your middle, where you're able to access your request and response in orderto either exit out.

So we never actually got to this function because we sent to the server and never called next.

Or you could just off people like this by checking your query parameters and then calling next in this example.

Same thing with our longer.

We could print out something based on a request we could print out.

For example, the original you are.

Oh, and now when we save in a refresh over here, you can see our girl gets printed out down here inside of our logger.

So that's another great use case for these different types of middle Where, But what if insight 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, True that they're user is an admin.

Because if we save this, there's no way we can access this inside of here.

This always takes request response, And next is never gonna take this true parameter that we pass in here.

So in order to get around this, where you need to do is set variables on either your request or response, because this function has access to the repressed in response variable.

So if we say request dot admin is equal to true now we're actually setting this advent 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 off.

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 middle where two other sections of our controller actions or whether it's other middle where or the final result of her action here Now, that is the basics of what middle word does.

But the biggest biggest problem that I see people run into with middle where 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 see that our function instead was set up like this.

Where what we're doing is we're calling our if and if this is true, we're saying request admin eagles true and we call next.

Otherwise, if this isn't true, we're just gonna be calling this function down here this rez dot sent to know off.

And if we save this and be coming here, we passed.

Admin equals true, and we hit.

Enter, You're gonna notice immediately a problem.

We're gonna tear it down here and essentially insane cannot set headers after they're 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 rez dot Send no off, which is why we're getting this air.

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 longer.

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 next.

And that's just for now.

remove this off walking just like this.

So we just have user's 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 on this next calls the next middle where, 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 in order before and then user's 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 exited out of this function after the next finishes.

Executing this can be a really great trick, though, because if you want to run some fordham of Middle where after every single one of your functions execute, it's really hard to do because we already know we can't just move our longer to the bottom because that's going to run into problems where we're not calling next inside of our controller actions.