‫Let's now use
‫a third-party middleware function
‫from npm called Morgan
‫in order to make our development life a bit easier.
‫So, as I mentioned, we're gonna use a middleware
‫called Morgan which is a very popular logging middleware.
‫So, a middleware that's gonna allow us to see request data
‫right in the console.
‫Okay, so let me go ahead and install it
‫and you will then see how that works, okay?
‫So, I don't want to now finish this process here,
‫so I'm gonna create a new terminal here in VS Code
‫and so, for that I hit this plus button here
‫and so, now we get a new terminal
‫and I don't want to update,
‫so no, and now npm install morgan.
‫Okay, now as I mentioned,
‫this logging middleware
‫is gonna make our development life a bit easier.
‫But it still is code
‫that we will actually include in our application
‫and so, that's why it's not a development dependency
‫but just a simple regular dependency,
‫okay and so, that's why I didn't specify save dev here
‫because again, it's not a dev dependency really.
‫Okay, so we have it in our package.json here now, morgan
‫and so, let's go ahead and require it in our code.
‫So, again right at the top here const morgan
‫equals require morgan
‫and you see again this kind of convention
‫that the require is gonna expose
‫if you use the same name as the package name itself.
‫So, we have our middlewares here,
‫so let's add it right after this
‫or actually write as the first one.
‫Okay, and source code is growing a little bit,
‫so let's actually go ahead
‫and add some comments here,
‫so first middlewares,
‫then down here we start having our route handlers.
‫Right, then here let's just say we have our routes.
‫And then finally down here
‫we start the server.
‫Okay, just to make our code a bit more readable
‫and easier to scan.
‫So, we have this first middleware
‫but again let's use ours before that.
‫So, of course app.use
‫and now in here we call morgan.
‫Okay and into this function,
‫we can pass an argument
‫which will kind of specify
‫how we want the logging to look like.
‫So, we can use some predefined strings for that
‫and the one that I'm gonna use is called dev.
‫And actually you can see here the different options
‫so VS Code is really smart
‫and can give me the options
‫that we can pass into this function.
‫Okay, so as I mentioned,
‫I'm gonna use the one called dev.
‫Okay and so that's actually it.
‫So, we required it
‫and then here we used it.
‫So, very simple stuff
‫but I think it's important
‫to actually try to understand how this works.
‫So, calling this morgan function
‫will return a function similar to this one here
‫and so, that makes sense
‫because while this is how a middleware function
‫has to look like and so, let me actually prove that to you
‫by looking at the source code
‫for this package
‫and that's another very nice exercise
‫from which we can actually learn quite a bit.
‫So, let's search for morgan on GitHub,
‫so usually all these packages are always on GitHub
‫and so, that's where we can then look
‫at their open source code.
‫Okay and morgan is actually a very simple package
‫and so, all we have to do is to go to this index.js file,
‫so usually that is the entry point
‫and in this case, it's kind of the only file that there is.
‫Okay, now, I'm not gonna over all of this code
‫but I want to highlight that the main export
‫from this file here is morgan,
‫so a function called morgan,
‫so let's look for that
‫and actually here it is.
‫Okay, and so when we required the package in our code,
‫what will get returned is this morgan function, right?
‫Again because they use module.export
‫and that is the default export just like we learned
‫in the requiring modules lecture one section
‫or two sections ago, right?
‫So, again this morgan function here
‫will be this morgan function here in this code, okay?
‫So, let's see what this function does
‫and I don't care about any of this implementation here,
‫what I really wanted to show you
‫is that this function actually returns another function
‫which is the logger
‫and you see that this function just has
‫our own middleware functions
‫has this very typical signature of request,
‫response and next.
‫Okay?
‫So, this function is just like our own middleware functions.
‫And so, you see that actually in the end
‫when it's ready, it also calls next,
‫so just like we do.
‫So, it's just a very regular middleware function
‫just like the ones that we write.
‫Okay?
‫So, let's go back here
‫and let's now actually see the result here in our terminal,
‫so let's go back to that first one,
‫so this is how we switch between
‫the different terminals that we have open in VS Code.
‫Give us some more space here,
‫actually clear this out
‫because you might not be able to see the bottom
‫of the screen so well.
‫And so yeah, let's now go ahead
‫and simply create some request,
‫all right, go back and here we go.
‫So, we have the information about the request
‫that we just did.
‫So, we get the HTTP method,
‫we get the URL, we get the status code,
‫the time it took to send back the response
‫and also the size of the response in bytes.
‫So, remember we could have used another option here,
‫for example, tiny was another one,
‫so that would then probably look a bit different
‫and it actually looks kind of similar here.
‫It simply doesn't do this coloring
‫of this status code
‫and also it has a slightly different order here.
‫Okay and if we did something,
‫if we caused an error, for example, a 404,
‫let's test that out by using an invalid ID here,
‫so that will then get another color here,
‫right, you can see that?
‫Let's do that again just in case you didn't see it.
‫And so, yeah, it gives us a different color.
‫And so, yeah, that can be quite useful for development.
‫You could actually even save this log
‫to a file but that's a bit too much
‫for this small example,
‫so this is more than enough
‫and you will see throughout the course
‫that it's kind of useful to actually have it here.
‫Okay, this is how we use third-party middleware
‫from npm and there is a lot of middleware on there
‫and let me actually show that to you.
‫So, on the Express site itself,
‫so expressjs.com and we actually never visited this website,
‫so it's actually quite nice,
‫so you have this Getting started
‫with a couple of articles explaining the basics
‫of Express and then you have a nice API reference
‫in our case, 4.x and so, here you have all of the methods
‫that are on the request,
‫so methods on properties of course,
‫so all of this stuff that we have,
‫for example, requests.body that we already used
‫or here on the response,
‫you have, for example, response.json
‫or response.send
‫and there's a bunch of other methods
‫and we will use many of them later on
‫but then here you have these resources
‫and the one that I wanna show you
‫is middleware and so, this is a bunch of middleware
‫that you can use
‫and that Express recommends, okay?
‫And again, we will use some of them a bit later
‫and actually Express recommends these
‫because many of these used to be built in in Express 3,
‫so in a previous version
‫but were then taken out of Express.
‫For example, body.parser is one of them
‫but actually in version four point,
‫I believe 14 or 16, it was added back
‫and so that's why we were able to do let's see,
‫where is it?
‫Yeah, that's why we were able to use expression.json
‫in order to parse the data from the body.
‫Before that, we actually would have to use the body.parser
‫from npm and use that one to parse the data from the body
‫but again, they just recently added it back
‫to reduce the confusion a bit for beginners like yourself.
‫Okay, so play around a little bit
‫with this reference.
‫Take a look at some of the stuff
‫maybe that we already did if you feel like it
‫or if not, you can always just move on
‫right to the next video.