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 see middleware at work in a larger Express application. The mechanics from this basic example can be applied to build much more sophisticated applications.
Now that we have a feel for
how middleware works.
0:00
Let's write some for a bigger app to
give you a simple example of middleware.
0:03
Let's write an app that accepts a number
from the user and doubles it like so.
0:08
Download the project files
if you like to follow along.
0:16
I've used Express generator to create
an express app which I then modified.
0:19
To build the app, I've already written
a template file and a routes file.
0:24
The pug template generates a form
with one input and a submit button.
0:29
The form submits a post
request to the Express app.
0:35
Above the form is a headline
element that will show the result.
0:39
Let's look at the router file.
0:43
When a user navigates to our app,
Express will receive a get request.
0:45
The request will land here and
the form template will be rendered.
0:50
When the form is submitted
it will send a post request.
0:56
This time,
the post route will handle it, and
0:59
will use the result to
render the same template.
1:03
Let's look at the app file.
1:06
Remember how I said an Express
app is almost all middleware?
1:09
That includes these app.use
calls you see here.
1:13
bodyParser is an example
of third party middleware.
1:17
It's middleware code that
someone else has written.
1:20
bodyParser is really useful because it
reads a form's submissions values and
1:24
places them on the request object
in a property called body.
1:28
You'll probably use bodyParser
frequently in your request apps
1:33
since it makes information coming in
from a request much easier to access.
1:37
Let's use the body property
in our custom middleware.
1:43
We'll place that here above the router.
1:46
We'll call it app.use and
1:49
pass in a function with our three
parameters request, response, and next.
1:52
Inside the function, we'll use the body
property given to us by bodyParser,
2:00
and we'll call the number
property on that.
2:05
Why number?
2:08
Well, number is the name of the form
input in the template, right here.
2:09
If our form had any other
elements their values would map
2:17
to their name attributes
on the body object as well.
2:20
Form values always arrive
to the app as strings.
2:25
So to turn this to a number, we'll pass
it to the JavaScript function parseFloat.
2:28
And we'll store all of this
in a constant called num.
2:41
Now that we have a number we can
double it and store the result.
2:48
Num * 2.
2:55
We'll create a property
on the request object,
2:57
we'll call it doubled and
store result there.
3:01
Finally let's not forget to call next.
3:05
Now that we have a double number,
let's make sure template has access to it.
3:08
In the post route we'll pass an object as
3:14
the second parameter to the render
function with a property doubled.
3:17
And our computed result as the value.
3:27
And just to have a peek at the template,
now,
3:33
this double key is gonna hold a value
when we render this template, great.
3:36
So let's store app and start our server.
3:42
Back in the browser,
we'll enter 3, and we get 6.
3:49
We'll enter 100, we get 200.
3:54
Great, our app is working.
3:58
Our middleware is processing
the information and
4:00
were rendering it back to the user.
4:02
You need to sign up for Treehouse in order to download course files.
Sign up