 Hey, welcome everybody. Today, I'm going to show you how to use Morgan. Morgan is a Node.js middleware to help you log HTTP requests. Monitoring and reading logs can help you better understand how your application behaves. If this is something that you're interested in learning, take a round, consider liking this video and subscribing to my channel. For this tutorial, I'm going to begin by initializing a new project and installing the dependencies, but I know that most of you already know how to do this, so feel free to skip this step by using the timestamps below. And as you can see, I've already created a brand new folder and all I need to do is initialize a new project. So NPM in it, and I'm going to put the dash wife lag just to skip all the steps. So as you can see, this created this package.json file here in the project folder. And now all I need to do is install the dependencies that we need. So today, I'm going to be creating an express HTTP server and in order to do this, we need to do NPM in I for install and then express and then we need to include Morgan as well. This should take a second. And now if we jump into Visual Studio Code and click on package.json, you should see the dependencies here. Let's create our application super quickly. So I'm going to close this and create a new file. Let's call this app.js. And inside here is where I'm going to create the express HTTP server. I'm actually going to copy and paste a very basic example here. As you can see in here, I'm including express and then pretty much just listening on port 5000. I also have a very basic route, which is just the homepage. So in order to be able to run this application, all we need to do is go to the PowerShell or if you're on command line, go to command line, node app.js. App.js is the file that we just created. So we just want to run this with node.js. But press enter, you'll see that we're getting app listening on port 5000. Now we can visit this in our browser or we can use a tool like postman. I've already got postman open and there are many alternatives out there. And in fact, you can even just use the browser just to do a get request to your local host with the port number of 5000. So if I was to send this, and if I was to go to the body here, you will see that we are getting Hello World, which is exactly what we have in our application. And now we can start looking into Morgan. Okay, if we go back to Visual Studio Code, in order to use Morgan, we need to first of all include it. So under express, I'm going to do const Morgan. And then this is going to be equals require. And then this is going to be Morgan, like so. And now we should be able to start using Morgan. Now, before I do that, let me show you super quickly the official documentation, which you can visit under npmjs.com slash packages, Morgan. And if you scroll down a little bit, you will see that we have some predefined format. So for example, tiny, this tiny format includes things such as the method, which in this case is going to be get includes the URL, the status, the response content left, the response content time, and so on. So this is a very basic example. And it's very straightforward to use. So let me show you how we can do that. So if you wanted to use Morgan globally, what we can do is app.use. And then inside here, we can put Morgan. And then the format that we want to use. And in this case, I'm just going to go with tiny. As you can see, there is short depth common and combined. I'm going to go for tiny and leave it as it is. If I was to save this now, and if I go back to PowerShell, I need to restart the server because we don't have no money to do that first. So I'm going to do control and C, or if you're Mac, you can do command and C. And then if I press up, then I can just press enter to restart the application. So what I'm going to do is I'm going to put this on the top here just so you can see a little bit better. And I'm going to pull post money as well. I'm going to put it here at the bottom. And now what I'm going to do is send another get request. And let's have a look at what happens in the command line. So if I press send, you'll see that we're getting a get method. The euro that we're visiting is basically a slash, which is the homepage. The status is 200. Then the content left is 13. And the response time in milliseconds is 2.113 milliseconds, which is great. And now if I continue sending more requests, you'll see how the values change. This is how long it took to load, which is awesome. So this is a very basic use of Morgan, but let me also show you how you can use Morgan on specific routes. So if I was to go to the application here, and let's create one more route, I'm going to copy this, and I'm going to paste it here. Let's say this is the about route. And I instead of hello world, I'm just going to put about like so. And in this case, for example, let's say that we want to only use Morgan on the homepage. In order to do that, I can grab the Morgan from here with the tiny format and remove the app.use and then just paste the inside here as a middleware with a comma. So I'm going to paste inside here and don't forget the comma like so. So Morgan should be able to work on this route here, but it won't work on the about route. In order to show you this, I'm going to restart again, one more time, we need to restart node.js. So Ctrl C up, enter. And this is going to restart. I'm going to open post my one more time and send some requests. As you can see, we're getting the same stuff as before. But now if I go to the about page, that's about and send a request, you will see that we're not getting anything else. And this is because Morgan only works on the first route that we send it. And to prove you that the about is working, you can pull this up and go to the body and you'll see that we're rendering about right. This is all great. But I also want to show you how you can do custom tokens instead of using the tiny format. And in order to do this, let's jump back into Visual Studio Code, remove Morgan from here, just because I'm going to do it globally. And again, we're going to do app.use. And inside here, we're going to do Morgan. And then inside Morgan here, we're going to put the format that we wish. So for example, if you go back to the documentation, you will see how the tokens are defined. They always have a column. And then you just write the token that you want. So for example, method, euro status and so on. So if I was to do the first two, for example, I'm going to do column and then method. And then let's do column, euro, like so. So I can just do this, save it, let's go back to PowerShell, restart. And then let's open postman and send some requests. As you can see, we're getting get and then we're getting about, which is perfect. So if I wanted to add a few more, we can add them in the exactly the same method, we can do the status. And we can do res, content length. And we can do the response time is on in milliseconds. And then we can do something like, let's say the date. And for the date, the different format, I'm just going to use web, but let me show you super quickly. If I go back to the documentation and put date, you will see that the different formats such as the CLF ISO and the web, the web one looks pretty good to me. So I'm going to use this instead. Let me close this, save this application, go back to PowerShell, restart the node application and then go back to postman. Let's do some get requests. And as you can see, every time I do a get request, we're getting all of the information that I just added. And we also have the date and the time in the web format that I added. All right. So this is great. But what about if you wanted to log some custom details? For example, you might want to log a custom header, you might want to log a parameter ID and so on. Let me show you a super quick example on how we can create custom tokens. If you go back to Visual Studio Code, here at the top Morgan, dot token. And inside here, we can put the token name. So for example, I can just put type because I'm going to be grabbing, grabbing a custom header. And in order to do this, this is going to have a comma and it's going to be a function that has the request and the response like so. And then inside here, we're going to have curly brackets, return, and then the data that we want to get in this case, I'm going to get request dot headers. And then the header that I want to get is going to be content type. In order to be able to use this custom token, what I need to do. So in order to be able to use this custom type, we can just add it inside here. And let me just make some space, maybe after the date, we can add one more in here. So what I'm going to do is column type. As long as there is space between them that we should be good to go. And if I save this and restart the application, let's go back to postman and send something, you will see that we're not getting any values just yet. And this is because I actually didn't send. And if we go to postman and open the headers in here, I'm not sure if we'll be able to see now. But if I open headers, and if I create, and if I create the header that we want to pass, for example, in this case is the content type. And let's write some text, hello world, and let's send it. So if I send this, you will see that we're getting the custom header in here, hello world. And every time I send it, we get that custom header. Now you can create custom tokens for pretty much anything, a login the information that is useful to you. Now the last thing that I wanted to show you is that this is great for development purposes. But obviously, when we close the application, all of this information will be technically gone. So what you can do is actually save this into a file. And in order to do this, we can bring the Node.js file system modules. So for example, inside here, we can do const fs equals require. And then inside here, we require fs, we can also bring the path to help out with where we want to save the file. So I'm going to do const path equals require. And then we just require the path in order to save this file. What we can do somewhere around here, we can say const access log stream equals fs dot create right stream. And then inside here, we put the path joined because I want this to be inside the main directory. So I'm going to do underscore underscore dnm. And then we need to put the file name. So this is going to be something like access dot log. And after this with a comma, we can put a flag inside curly bracket. So I'm going to put a flag and basically what this flag is going to do, I'm going to put flag of a I'm basically what this a flag is going to do is going to open the file for pending. And if the file does not exist, it's going to create it. So there are different flags that you can use, but a is going to basically do that for us. And the last thing that we need to do is use this const here and tell Morgan to write the data. So after typing here, we can do comma and in curly brackets, we can do stream and then access log stream like so. And that should do the job. If I save this, and if we restart the application, let me start again, and I'm going to put this to the right side now and open the explorer here. As you can see, we already get access the log. If I look inside it, we don't get anything. But if I was to open postman and do some requests, you will see I'm going to do two requests. It's probably not refreshing. Here we go. If I click today, it refreshed. But as you can see, we're getting all of the information here. And let's say I want to go to the homepage, I'm going to do just slash here and send two more requests to three, but click on the file. It just doesn't refresh. But if I click on it, you will see that we're getting the new information here, which is great. And this is pretty much how you can get started with Morgan. Thank you very much for watching. I hope that you found this useful. Please consider subscribing and I will see you in the next one. Bye