Middleware in Context

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