Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Understanding Express Middleware

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Middleware Basics

5:05 with Joel Kraft

Practice the basic mechanics of Express middleware.

Favicons

You might notice the fav.js file used in this basic app. You can ignore it for now, but in case you're curious why it's there, read on! When you navigate to a URL with a browser, it will usually make two requests behind the scenes. One request will be for the resource you're requesting, usually a webpage, and the other will be for a favicon file to display in the browser's tab.

This means that if a middleware function logs a message to the console with every request (as some of the ones we will write do), that message will appear twice with every page refresh! fav.js is a small piece of middleware that circumvents this issue so that we can read the output in this workshop without distraction. By the way, after you complete this workshop, you should be able to understand the code in fav.js!

Note that fav.js only exists for educational purposes, and should not be included in a production app. A real-life application should always supply a favicon to the browser.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Let's practice writing middleware. 0:00
    Here's a minimal Express app we can use. 0:02
    Download the code below to follow along. 0:05
    I'll start the app in the terminal using nodemon. 0:08
    If I go to the browser and pull up localhost:300, 0:12
    I get this message telling me the app is working. 0:16
    Great, now let's write some middleware into the app. 0:20
    Remember, to write middleware, you pass a function to app.use. 0:25
    And we'll need our three parameters, request, response, and next. 0:36
    Inside this function, let's just log One to the console. 0:43
    And then we'll call next. 0:52
    We'll look more closely into the next function soon. 0:56
    But for now, it's enough to know that 0:59
    we're just calling it to end this piece of middleware and move to the next. 1:02
    So to run this, we'll need to send a request to the app. 1:06
    Let me save this and we'll switch over. 1:10
    I'm just gonna clear my console so we can see it clearly. 1:14
    And I'm switching over to my browser, and I'm gonna make a request with the browser. 1:17
    So I'll refresh it, and that will send the request. 1:22
    And then we see we logged One, great. 1:25
    So now, let's copy this piece of middleware and paste another one below. 1:28
    And we'll log Two. 1:36
    So we'll save this, and clear out the terminal. 1:39
    And then refresh the browser, and we get One, Two. 1:45
    So I wanted to just show you that middleware always fires in order. 1:50
    So this function will always fire before this one. 1:55
    And we can also pass several functions to the same app.use call as parameters. 1:59
    So to do that, I'll just copy this function. 2:06
    And I'll place a comma and paste. 2:11
    And now we're passing two functions into this app.use call. 2:14
    And it will say, One and a half. 2:19
    So we'll expect One to fire first, or to log rather, One and a half, and then Two. 2:23
    So we'll switch back over, clear the terminal and refresh. 2:31
    And we get our middleware in order. 2:37
    So we've just seen two ways to include middleware functions in an app. 2:41
    You can call app.use as many times as you like, passing a function to each call. 2:45
    You can also pass as many functions as you want to, to a single app.use call. 2:51
    Express will always run these functions in the order they appear. 2:57
    Let's trigger middleware based on the URL or route a user visits. 3:02
    We can do this by placing the URL as the first argument to app.use. 3:07
    Let's route this first app.use to /one. 3:13
    So if I save this, clear the terminal. 3:19
    And now if I refresh, then refresh the root route of the app. 3:24
    So we won't see One, One and a half, but we do see Two. 3:29
    And that's because if you don't specify a route parameter, 3:34
    this middleware is gonna run for every route we hit. 3:38
    So now let's fire the rest of our middleware by going to /one. 3:43
    And you see that we got One, One and a half, and Two. 3:51
    You can also pass information between functions. 3:55
    Let me clear out the second function and this route. 3:59
    And we're going to modify the request object. 4:05
    So we'll add a property onto it called message, 4:08
    and we'll set it equal to, This message made it. 4:15
    Now in the second piece of middleware, we're just going to read that 4:21
    property back out, req.message. 4:28
    If I save that, clear the terminal, and refresh, This message made it. 4:32
    And middleware will often modify the request object 4:39
    to offer data to later middleware functions. 4:43
    You'll see this in action later in this workshop, 4:47
    when we use the body parser middleware. 4:49
    Body parser creates a body property on the request object 4:52
    that we can use to form a response to the client. 4:56
    Let's have a look at the next function, in the next video. 5:00

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up