1
00:00:00,025 --> 00:00:03,930
While you can write middleware directly
into your app as we have done so

2
00:00:03,930 --> 00:00:08,520
far, you'll usually want to pull
it out into its own module.

3
00:00:08,520 --> 00:00:11,070
Let's walk through this process together.

4
00:00:11,070 --> 00:00:12,750
Here's what we're going to do.

5
00:00:12,750 --> 00:00:15,430
First, we'll create a separate function so

6
00:00:15,430 --> 00:00:19,820
that the code isn't bundled
inside the app.use statement.

7
00:00:19,820 --> 00:00:23,770
Second, I'll create a new file to
put the middleware code in and

8
00:00:23,770 --> 00:00:27,250
include it in the main app using require.

9
00:00:27,250 --> 00:00:31,420
Finally, I'll show you how you can make
your middleware more flexible by passing

10
00:00:31,420 --> 00:00:34,190
configuration options when you call it.

11
00:00:34,190 --> 00:00:36,953
Let's start this process by
cutting the function out.

12
00:00:38,577 --> 00:00:40,771
And assigning it to the constant double.

13
00:00:46,494 --> 00:00:51,810
Down here we'll put our double variable,
our constant in there.

14
00:00:51,810 --> 00:00:55,790
Save it and let's just double check and
make sure it still works.

15
00:00:57,531 --> 00:01:04,170
Great, now the next step is I am
going to cut it back out again.

16
00:01:04,170 --> 00:01:05,260
Cut the function out.

17
00:01:07,020 --> 00:01:09,520
And I'm gonna replace it
with a call to require.

18
00:01:15,256 --> 00:01:18,758
Now, I'll need to create
a new file called double.

19
00:01:25,296 --> 00:01:30,316
And I'll paste the function in here and
will set module.exports,

20
00:01:33,300 --> 00:01:37,290
To equal the function so
that we export it into the app.

21
00:01:39,300 --> 00:01:42,344
So now that we have it in a separate file,

22
00:01:42,344 --> 00:01:46,029
let's go back and
just make sure it still works.

23
00:01:47,909 --> 00:01:49,120
Great.

24
00:01:49,120 --> 00:01:52,560
Now our app looks a lot cleaner
with double tucked away.

25
00:01:52,560 --> 00:01:56,130
Notice double is included in
a similar style to body parser now.

26
00:01:57,230 --> 00:02:00,510
There's another thing that
body parser is doing, though.

27
00:02:00,510 --> 00:02:04,330
These are function calls inside app.use.

28
00:02:04,330 --> 00:02:05,280
What's going on here?

29
00:02:06,390 --> 00:02:08,240
This is a way to configure middleware.

30
00:02:09,330 --> 00:02:11,720
Let's make our middleware configurable,
too,

31
00:02:11,720 --> 00:02:13,770
to get a better idea of what's happening.

32
00:02:14,790 --> 00:02:19,700
Let's make our middleware able to multiply
user input by any factor we want, double,

33
00:02:19,700 --> 00:02:21,320
triple, etc.

34
00:02:21,320 --> 00:02:22,688
Let's rename it multiply.

35
00:02:26,079 --> 00:02:31,030
And we'll call multiply passing
in a configuration object.

36
00:02:31,030 --> 00:02:34,730
The object will tell multiply how
many times to multiply the input.

37
00:02:36,200 --> 00:02:37,660
Let's set it to 3 for now.

38
00:02:37,660 --> 00:02:42,150
We need to make our new
multiply module a function

39
00:02:42,150 --> 00:02:44,870
that returns a middleware function.

40
00:02:44,870 --> 00:02:48,419
First let's replace double with
multiply throughout the app.

41
00:02:58,021 --> 00:03:00,393
And then we'll make this multiplied.

42
00:03:06,304 --> 00:03:10,118
So in router,
we're gonna be expecting multiplied now.

43
00:03:12,484 --> 00:03:14,950
And we'll set the key to
be multiplied as well.

44
00:03:16,510 --> 00:03:21,194
And then in our template,
we'll need to change that also.

45
00:03:23,231 --> 00:03:28,160
So as far as what we're showing the user,
since we're going to set the multiply.

46
00:03:28,160 --> 00:03:30,480
We're going to configure it to 3 for now.

47
00:03:30,480 --> 00:03:31,498
Let's just say triple.

48
00:03:34,252 --> 00:03:39,980
So now that we've got that changed
in the app, let's open up.

49
00:03:39,980 --> 00:03:42,230
We never finished our renaming.

50
00:03:42,230 --> 00:03:45,198
We're gonna open up multiply and

51
00:03:45,198 --> 00:03:50,498
we're gonna return this
middleware from an outer function

52
00:04:02,238 --> 00:04:05,500
The outer function takes one parameter,
config.

53
00:04:07,110 --> 00:04:11,173
This will hold the configuration
object we passed in from app.

54
00:04:11,173 --> 00:04:16,023
Then, instead of 2, we'll use the value

55
00:04:16,023 --> 00:04:19,942
that was passed in, config.by.

56
00:04:19,942 --> 00:04:24,042
An outer function that returns an inner
function is a common occurrence

57
00:04:24,042 --> 00:04:27,490
in JavaScript and it's known as a closure.

58
00:04:27,490 --> 00:04:31,240
Check the teacher's notes if you
want to learn more about closures.

59
00:04:31,240 --> 00:04:32,200
Let's save this.

60
00:04:32,200 --> 00:04:33,792
That's saved and
let's look at the browser.

61
00:04:35,203 --> 00:04:39,770
If I enter 5, I get 15.

62
00:04:39,770 --> 00:04:40,960
Cool.

63
00:04:40,960 --> 00:04:44,430
If I decide I want my app
to multiply by ten, for

64
00:04:44,430 --> 00:04:47,780
example, all I need to do
now is configure multiply.

65
00:04:49,110 --> 00:04:51,488
Let's just do that now and
see what that looks like.

66
00:04:54,102 --> 00:04:57,890
Great now you know a little bit
more about Express middleware and

67
00:04:57,890 --> 00:05:01,910
I hope you have a better
insight into how Express works.

68
00:05:01,910 --> 00:05:06,470
Don't be surprised if you see middleware
and other JavaScript frameworks as well.

69
00:05:06,470 --> 00:05:09,640
It's a really useful pattern that
shows up in a lot of places.