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.
This video doesn't have any notes.
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
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up