Now that we have a feel for how middleware works.

Let's write some for a bigger app to give you a simple example of middleware.

Let's write an app that accepts a number from the user and doubles it like so.

Download the project files if you like to follow along.

I've used Express generator to create an express app which I then modified.

To build the app, I've already written a template file and a routes file.

The pug template generates a form with one input and a submit button.

The form submits a post request to the Express app.

Above the form is a headline element that will show the result.

Let's look at the router file.

When a user navigates to our app, Express will receive a get request.

The request will land here and the form template will be rendered.

When the form is submitted it will send a post request.

This time, the post route will handle it, and

will use the result to render the same template.

Let's look at the app file.

Remember how I said an Express app is almost all middleware?

That includes these app.use calls you see here.

bodyParser is an example of third party middleware.

It's middleware code that someone else has written.

bodyParser is really useful because it reads a form's submissions values and

places them on the request object in a property called body.

You'll probably use bodyParser frequently in your request apps

since it makes information coming in from a request much easier to access.

Let's use the body property in our custom middleware.

We'll place that here above the router.

We'll call it app.use and

pass in a function with our three parameters request, response, and next.

Inside the function, we'll use the body property given to us by bodyParser,

and we'll call the number property on that.

Why number?

Well, number is the name of the form input in the template, right here.

If our form had any other elements their values would map

to their name attributes on the body object as well.

Form values always arrive to the app as strings.

So to turn this to a number, we'll pass it to the JavaScript function parseFloat.

And we'll store all of this in a constant called num.

Now that we have a number we can double it and store the result.

Num * 2.

We'll create a property on the request object,

we'll call it doubled and store result there.

Finally let's not forget to call next.

Now that we have a double number, let's make sure template has access to it.

In the post route we'll pass an object as

the second parameter to the render function with a property doubled.

And our computed result as the value.

And just to have a peek at the template, now,

this double key is gonna hold a value when we render this template, great.

So let's store app and start our server.

Back in the browser, we'll enter 3, and we get 6.

We'll enter 100, we get 200.

Great, our app is working.

Our middleware is processing the information and

were rendering it back to the user.