Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let's package our middleware into a module. We'll also make it able to multiply our user's input by any number we wish.
Closures
To learn more about JavaScript closures, check out this Treehouse workshop. We even peek inside a piece of third-party Express middleware at the end!
You can also check out MDN's article on closures.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
While you can write middleware directly
into your app as we have done so
0:00
far, you'll usually want to pull
it out into its own module.
0:03
Let's walk through this process together.
0:08
Here's what we're going to do.
0:11
First, we'll create a separate function so
0:12
that the code isn't bundled
inside the app.use statement.
0:15
Second, I'll create a new file to
put the middleware code in and
0:19
include it in the main app using require.
0:23
Finally, I'll show you how you can make
your middleware more flexible by passing
0:27
configuration options when you call it.
0:31
Let's start this process by
cutting the function out.
0:34
And assigning it to the constant double.
0:38
Down here we'll put our double variable,
our constant in there.
0:46
Save it and let's just double check and
make sure it still works.
0:51
Great, now the next step is I am
going to cut it back out again.
0:57
Cut the function out.
1:04
And I'm gonna replace it
with a call to require.
1:07
Now, I'll need to create
a new file called double.
1:15
And I'll paste the function in here and
will set module.exports,
1:25
To equal the function so
that we export it into the app.
1:33
So now that we have it in a separate file,
1:39
let's go back and
just make sure it still works.
1:42
Great.
1:47
Now our app looks a lot cleaner
with double tucked away.
1:49
Notice double is included in
a similar style to body parser now.
1:52
There's another thing that
body parser is doing, though.
1:57
These are function calls inside app.use.
2:00
What's going on here?
2:04
This is a way to configure middleware.
2:06
Let's make our middleware configurable,
too,
2:09
to get a better idea of what's happening.
2:11
Let's make our middleware able to multiply
user input by any factor we want, double,
2:14
triple, etc.
2:19
Let's rename it multiply.
2:21
And we'll call multiply passing
in a configuration object.
2:26
The object will tell multiply how
many times to multiply the input.
2:31
Let's set it to 3 for now.
2:36
We need to make our new
multiply module a function
2:37
that returns a middleware function.
2:42
First let's replace double with
multiply throughout the app.
2:44
And then we'll make this multiplied.
2:58
So in router,
we're gonna be expecting multiplied now.
3:06
And we'll set the key to
be multiplied as well.
3:12
And then in our template,
we'll need to change that also.
3:16
So as far as what we're showing the user,
since we're going to set the multiply.
3:23
We're going to configure it to 3 for now.
3:28
Let's just say triple.
3:30
So now that we've got that changed
in the app, let's open up.
3:34
We never finished our renaming.
3:39
We're gonna open up multiply and
3:42
we're gonna return this
middleware from an outer function
3:45
The outer function takes one parameter,
config.
4:02
This will hold the configuration
object we passed in from app.
4:07
Then, instead of 2, we'll use the value
4:11
that was passed in, config.by.
4:16
An outer function that returns an inner
function is a common occurrence
4:19
in JavaScript and it's known as a closure.
4:24
Check the teacher's notes if you
want to learn more about closures.
4:27
Let's save this.
4:31
That's saved and
let's look at the browser.
4:32
If I enter 5, I get 15.
4:35
Cool.
4:39
If I decide I want my app
to multiply by ten, for
4:40
example, all I need to do
now is configure multiply.
4:44
Let's just do that now and
see what that looks like.
4:49
Great now you know a little bit
more about Express middleware and
4:54
I hope you have a better
insight into how Express works.
4:57
Don't be surprised if you see middleware
and other JavaScript frameworks as well.
5:01
It's a really useful pattern that
shows up in a lot of places.
5:06
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up