1
00:00:00,810 --> 00:00:06,510
And once we're familiar with Rotterdam's programs and query string, that's a really kick things into

2
00:00:06,510 --> 00:00:14,970
gear and talk about middleware and ExpressJet middleware are functions that execute during the request

3
00:00:14,970 --> 00:00:15,750
to the server.

4
00:00:16,440 --> 00:00:21,170
Each middleware function has access to request and response object.

5
00:00:21,600 --> 00:00:27,720
And when it comes to functionality, literally sky is the limit in order to hammer this home.

6
00:00:27,750 --> 00:00:33,900
I have prepared quite a few examples where we cover middleware step by step since in my opinion, actual

7
00:00:33,900 --> 00:00:38,070
code examples are far more helpful than text based explanations.

8
00:00:38,600 --> 00:00:40,710
Before we continue, though, let me just stress something.

9
00:00:41,220 --> 00:00:44,130
Middleware is literally everywhere in Express.

10
00:00:44,790 --> 00:00:50,670
You can even make an argument that express apps are nothing but a bunch of middleware functions, stuff

11
00:00:50,670 --> 00:00:57,090
together to make one nice express cake or dessert if you are in that sort of thing.

12
00:00:57,510 --> 00:01:03,140
And since that is the case, middleware is not one of those topics you can just skip or avoid.

13
00:01:03,780 --> 00:01:08,150
It is at the heart and soul of express, so please don't dismiss it.

14
00:01:08,430 --> 00:01:13,590
With that said, since you encountered more than once, if you struggle with it in the beginning, don't

15
00:01:13,590 --> 00:01:13,950
panic.

16
00:01:14,160 --> 00:01:17,620
The more examples you'll do, the better you will understand it.

17
00:01:18,060 --> 00:01:26,010
Now, let me start by cleaning out my objets and this is going to be the case where I will leave the

18
00:01:26,010 --> 00:01:30,080
code, at least some of the code from the previous lecture.

19
00:01:30,420 --> 00:01:34,860
So let me delete all the middle part and I'm just going to leave Xpress.

20
00:01:35,100 --> 00:01:40,650
We are instantiated in our app and we're listening on board five thousand.

21
00:01:41,160 --> 00:01:43,680
And let's just start by adding a common here.

22
00:01:44,600 --> 00:01:51,410
For your reference, so there is a incoming request, and so far we have been just sending responses,

23
00:01:51,410 --> 00:01:51,660
right?

24
00:01:52,130 --> 00:01:54,380
So what middleware does?

25
00:01:54,770 --> 00:02:02,840
It sits in between, hence the name so middle where we're here and then we pass the response.

26
00:02:03,290 --> 00:02:05,300
So the request comes in.

27
00:02:05,690 --> 00:02:06,800
We'll do something.

28
00:02:07,250 --> 00:02:10,270
So we'll have access to the both to the request and response.

29
00:02:10,550 --> 00:02:12,010
We'll do some kind of functionality.

30
00:02:12,290 --> 00:02:18,240
Again, the most basic, you can just console lock something and then we'll send out the response.

31
00:02:18,500 --> 00:02:24,890
And again, I know it probably looks confusing at the moment, but trust me, more examples you'll do

32
00:02:25,100 --> 00:02:26,740
the better you'll understand it.

33
00:02:27,050 --> 00:02:31,140
And let's start by simple scenario, where I have two routes.

34
00:02:31,160 --> 00:02:34,210
I have the home route and I have the about road.

35
00:02:34,670 --> 00:02:37,880
And in those roads I would just want to log.

36
00:02:38,800 --> 00:02:46,500
The method that the user is using the euro, but the user is trying to access and for example, a date,

37
00:02:46,990 --> 00:02:54,000
and if you think that's silly, there's actually packages that do that because as your express apps

38
00:02:54,010 --> 00:03:01,270
grow bigger and bigger, it is very useful to see those incoming requests in that manner.

39
00:03:01,540 --> 00:03:04,720
So let's start here by setting up an app that get again.

40
00:03:04,720 --> 00:03:06,340
This is going to be my home page.

41
00:03:06,610 --> 00:03:09,700
And for the time being, I have my callback function.

42
00:03:09,940 --> 00:03:17,830
I pass it in and I just go with the rest that send and I send back the home and I'll do the same thing

43
00:03:17,830 --> 00:03:19,570
here with my about.

44
00:03:20,050 --> 00:03:25,990
So there's going to be two out at the moment and about unless is just going to say about.

45
00:03:26,320 --> 00:03:32,670
So I'll say it and it's not going to be surprised if I navigate to localhost five thousand if I refresh.

46
00:03:32,980 --> 00:03:39,460
This is my home and this is my about again something we have covered already before.

47
00:03:39,850 --> 00:03:40,960
Now here's the kicker.

48
00:03:41,920 --> 00:03:50,560
If I go with Loga and if I set up that functionality in the root for the home page, I'll also have

49
00:03:50,560 --> 00:03:52,010
to do that in the about.

50
00:03:52,360 --> 00:03:53,470
So let me showcase that.

51
00:03:53,830 --> 00:03:56,450
So I have a request object in there.

52
00:03:56,530 --> 00:03:57,360
I have a method.

53
00:03:57,370 --> 00:04:01,990
I have your URL and I'll simply set up the year because I don't want to deal with JavaScript time.

54
00:04:02,000 --> 00:04:03,300
So let's go with the method.

55
00:04:03,310 --> 00:04:07,140
Now that one was on request, not method property.

56
00:04:07,510 --> 00:04:12,640
Then we also have the URLs or you URL here and that is going to be a request.

57
00:04:12,640 --> 00:04:14,770
You are property like.

58
00:04:14,820 --> 00:04:19,390
So and then like I said, I'm going to go with Consed and I'll name this time.

59
00:04:19,390 --> 00:04:23,290
But in order to make it easier, I'm actually going to get a full year.

60
00:04:23,620 --> 00:04:29,920
So I'm going to go with New Date and I'll invoke it and I'll say get full year and invoke it as well.

61
00:04:30,370 --> 00:04:32,740
And of course I'm sending back home.

62
00:04:32,950 --> 00:04:34,360
Yeah that is nice.

63
00:04:34,690 --> 00:04:40,710
But before I do anything out also want to cancel log all three of them method.

64
00:04:40,720 --> 00:04:49,510
You are all as well as the time like so, so I say it and now every time user is going to hit this resource

65
00:04:49,870 --> 00:04:51,970
or I'll see that in a console.

66
00:04:52,330 --> 00:04:56,110
So there it is if I go back to my home page.

67
00:04:56,990 --> 00:05:03,890
Like so and if I refresh quite a few times there, it is now in a console, I can see that the method

68
00:05:04,160 --> 00:05:04,880
was good.

69
00:05:05,120 --> 00:05:10,310
So the user was trying to get the resource and then the path was the home page.

70
00:05:10,340 --> 00:05:11,300
That's my URL.

71
00:05:11,570 --> 00:05:14,390
And then the year is twenty, twenty one.

72
00:05:15,020 --> 00:05:15,410
Awesome.

73
00:05:16,130 --> 00:05:17,270
But here's the problem.

74
00:05:17,630 --> 00:05:22,940
If I want to have the same functionality in about what do I need to do right now.

75
00:05:23,270 --> 00:05:25,040
Well again I need to copy and paste.

76
00:05:25,670 --> 00:05:31,390
Now if I have 15 routes, does that sound like a reasonable approach?

77
00:05:31,610 --> 00:05:32,930
And of course the answer is no.

78
00:05:33,380 --> 00:05:37,040
A better solution would be if we set up a function.

79
00:05:37,940 --> 00:05:44,410
And in that function, we have all this logic and then I can just attach it willy nilly to all my roots,

80
00:05:44,540 --> 00:05:50,480
and when I say, well, it just just means that for some around, I maybe want to touch it and for some,

81
00:05:50,630 --> 00:05:51,350
maybe I don't.

82
00:05:52,100 --> 00:05:53,180
So here's the deal.

83
00:05:53,600 --> 00:06:01,040
I can go above both of my roots and I can just simply say that there's going to be a function by the

84
00:06:01,040 --> 00:06:02,210
name of Logger.

85
00:06:02,720 --> 00:06:06,200
And for the time being, we're not going to look for any parameters.

86
00:06:06,200 --> 00:06:07,820
But yes, there will be there.

87
00:06:08,240 --> 00:06:12,710
And then we just take all our unbelieve four lines of code.

88
00:06:12,710 --> 00:06:12,980
Right.

89
00:06:13,370 --> 00:06:16,710
And we just cut it out and pass it here.

90
00:06:17,270 --> 00:06:18,320
OK, awesome.

91
00:06:18,770 --> 00:06:24,110
And of course, where do we attach this function so we don't have to duplicate our code?

92
00:06:24,530 --> 00:06:29,600
And the place is following where we have the path and then we have the callback function.

93
00:06:29,960 --> 00:06:33,120
Now in between then we can stuck a middleware.

94
00:06:33,560 --> 00:06:37,100
So in this case, as you can see, I'm referencing the function.

95
00:06:37,400 --> 00:06:38,390
Please keep that in mind.

96
00:06:38,600 --> 00:06:40,450
So I'm going to go with Logger.

97
00:06:40,700 --> 00:06:42,260
That's my middleware function.

98
00:06:42,740 --> 00:06:44,840
But now there's the second question.

99
00:06:45,290 --> 00:06:50,650
Well, in the logger, I'm accessing request object.

100
00:06:50,660 --> 00:06:50,940
Right?

101
00:06:51,350 --> 00:06:53,480
So how can I do that?

102
00:06:54,170 --> 00:06:56,140
Because at the moment I'm not passing it in.

103
00:06:56,530 --> 00:07:02,540
Well, the good news is that Express passes it in to our middleware function.

104
00:07:02,870 --> 00:07:07,120
So in here I just set up the reference for my function and express.

105
00:07:07,130 --> 00:07:08,600
We'll do that behind the scenes.

106
00:07:08,870 --> 00:07:17,540
It will supply the Iraq, whereas and also indexed and you'll see in a second why we need this next

107
00:07:17,720 --> 00:07:19,080
function as well.

108
00:07:19,490 --> 00:07:21,890
So again, we don't have to do anything.

109
00:07:21,890 --> 00:07:22,730
We just pass here.

110
00:07:22,730 --> 00:07:25,040
The Middleware Express applies them.

111
00:07:25,400 --> 00:07:31,360
But of course it's our job to access them as parameters and then set up our logic.

112
00:07:31,610 --> 00:07:33,350
So for the time being, I'm not going to do anything.

113
00:07:33,350 --> 00:07:39,020
With the next hour, we'll save and we should see something where in the console.

114
00:07:39,230 --> 00:07:44,500
I'm still going to get my log, but the problem is going to be in the browser.

115
00:07:44,870 --> 00:07:47,360
So if I navigate back and if I refresh.

116
00:07:48,180 --> 00:07:50,640
Notice something where I have the spinner.

117
00:07:51,360 --> 00:07:53,340
OK, so what's happening here?

118
00:07:53,730 --> 00:08:00,080
Well, I successfully logged, but I didn't pass it on to the next mindblower.

119
00:08:00,390 --> 00:08:01,110
So here's the deal.

120
00:08:01,170 --> 00:08:08,070
When you work with middleware, you must, must, must, must, must pass it on to a next maneuver.

121
00:08:08,340 --> 00:08:13,290
Unless you're terminating the whole cycle by sending back the response and the worry.

122
00:08:13,300 --> 00:08:15,930
There's going to be examples where we do that as well.

123
00:08:16,230 --> 00:08:23,340
So for now, just keep in mind that when you have a Millewa where you set up some kind of logic, unless

124
00:08:23,340 --> 00:08:29,520
you're sending back the response yourself, for example, since I have access to your response, I simply

125
00:08:29,520 --> 00:08:32,640
can go with a dart and send.

126
00:08:32,850 --> 00:08:35,919
And again, I'm going to come up with testing or whatever.

127
00:08:35,919 --> 00:08:39,230
It doesn't really matter what we send back, if we refresh notice.

128
00:08:39,510 --> 00:08:43,140
Doesn't really matter if I try to access the home page.

129
00:08:43,380 --> 00:08:46,850
Since I have my middleware, I'm actually sending back detesting.

130
00:08:46,860 --> 00:08:52,620
And this is why the middleware is so, so powerful because you can literally do whatever you want over

131
00:08:52,620 --> 00:08:52,850
here.

132
00:08:53,190 --> 00:08:58,230
You can set up all kinds of cool logic and you have two options.

133
00:08:58,230 --> 00:09:05,160
Either you pass it on to the next Mendler, which in our case of course are going to be our methods

134
00:09:05,190 --> 00:09:12,510
or get methods, or you simply terminate the whole cycle and you just say Nazan and I'm sending back

135
00:09:12,750 --> 00:09:13,820
my own data.

136
00:09:14,070 --> 00:09:16,080
So let's not be brutal over here.

137
00:09:16,280 --> 00:09:19,260
I will actually remove this line of code.

138
00:09:19,470 --> 00:09:28,120
And if I want to pass it on to the next function, meaning in our case that is going to be my method

139
00:09:28,590 --> 00:09:29,090
douget.

140
00:09:29,250 --> 00:09:32,760
I simply go next and we have to invoke it again.

141
00:09:33,150 --> 00:09:34,290
Please keep that in mind.

142
00:09:34,290 --> 00:09:38,030
There's going to be more functionality later in these middleware functions.

143
00:09:38,030 --> 00:09:41,060
But you always, always either you terminate.

144
00:09:41,700 --> 00:09:48,720
So either you send back your own response or you pass it on to the next minute or not is very crucial.

145
00:09:49,020 --> 00:09:52,860
So now if I go again to my homepage, there it is.

146
00:09:52,860 --> 00:09:55,530
I successfully navigate to my homepage.

147
00:09:55,750 --> 00:09:57,900
I can clearly see that that is my response.

148
00:09:58,230 --> 00:10:05,010
And I also successfully log in my console, the method, the URL, as well as the full year.

149
00:10:05,430 --> 00:10:13,470
And now, of course, instead of adding this logic line by line to every request since we can go, and

150
00:10:13,470 --> 00:10:18,260
I say, yep, I would like to invoke the logger here as well.

151
00:10:18,660 --> 00:10:26,580
So if we go to localhost five thousand and if we're brave enough and we navigate about Verity's now,

152
00:10:26,580 --> 00:10:32,450
I have get requests about Yoro as well as the full year.

153
00:10:32,880 --> 00:10:39,960
Hopefully that gives you a good initial understanding how the metal works and how we can talk about

154
00:10:39,960 --> 00:10:41,680
more complicated topics.