Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:18Length:1.9 hours
Introduction to koa javascript framework 400x277
  • Overview
  • Transcript

2.4 Adding Some Better Logging

Anytime you are creating web apps, especially REST APIs, it's nice to be able to see what the requests and responses look like without having to constantly open up browsers or use third-party tools. In this lesson, I'll show you another package that will give you some better logging while you are building your app.

2.4 Adding Some Better Logging

So as we said in the last lesson, we kind of did accomplish something, we did get our application up and running with just four lines of code, actually, three lines of code and a log line, which is pretty good. And we were able to see it up and running, because we created a new script within our package.json file. That was known as watchServers, that was good, and then we were able to go to a browser and actually go navigate to port 3000 on localhost where it's actually listening, but then we got this not found and what do we get that? It's kinda hard to understand that sometimes when you're building these web applications and it helps to have some better login at times. So what I'm gonna show you now is actually a nice little logger that I've started to use in these Koa applications, that I'm really starting to like. And it's pretty configurable, you can make changes to it, and you can do all sorts of cool stuff with it. I'm I'm just gonna get it very rudimentary so that you can see how it works, and then you can obviously go from there and tweak it more if you would like. So what I'm gonna do now is I'm actually gonna start my server cuz I'm gonna do some kind of behind the scenes stuff, so I'm gonna use Ctrl+C and I'm gonna clear this out. So now what I wanna do is I want to use this npm again and I wanna do two installations. So I'm gonna do npm install and I wanna to install koa-logger. Now the Koa logger is a library for logging, shockingly enough, but what this is gonna do is this is what is known as middleware in the world of Koa. And if you've ever done the sort of for Express development you're gonna know that you can do Express middleware. And basically what middleware is, it's a library. It's some code that you insert into kind of the middle of your application that ultimately is used by your application and run through all the time. So if you imagine your application is kind of a long pipe, and along that pipe you have different pieces of functionality. And the requests come into that pipe and things are done with that request as it comes in. And the middleware is basically functionality that you can stick into the middle of that pipe that the request is always gonna run through. Now it might not do anything with that request, but it always runs through that middleware. And you can have as many pieces of middleware running in your application as you want. And you're gonna see how this is gonna work right now as a matter of fact. So, we have added in our Koa lager, which is nice, but once again, we're using another Koa package, some Koa types that we might wanna take advantage of from the TypeScript perspective. So when you get into this habit, if you start adding in Koa libraries and doing things and Koa packages into your production dependencies, it's usually a pretty good idea to add into the development dependencies the types for that particular package. So we're also going to do an npm install and you can do the --save dev in the beginning too, you don't always have to put it at the end if you don't want to. In this case we wanna bring in the types for the koa-logger as well and that will update the package.json file for the dev dependency section. All right, so we've done all that, great, we have this logger great, I mentioned middleware blah, blah, blah what does it actually do how do we use it. Well, it's actually quite simple, so all you need to do is go into your server.ts file right here and actually this would be a good time to show you the watch command. So now that I've brought in some other dependencies, let's go ahead and run our npm watch-server again. So this is gonna get up and running. So you're gonna see my koa server is up and running, listening on port 3000. Now let's go back into our server.ts file and I'm actually gonna shrink this down a little bit so you can see this happening in real time. And I'm wanna bring this over a little bit, okay, so now what I wanna do is I wanna take this new logger and I wanna insert it into this pipeline that we were talking about and I want to use it as middleware, so how do we do that? Well, the first thing we're gonna do is we are actually going to import it. So I'm gonna say Import logger and that gonna be, I'm gonna use the required syntax here, see you can kind of mix and match the syntax here if you want. You can use anything that you're familiar with, its gonna work just fine. So I'm wanna bring in the logger at this point and now what I wanna do is I wanna use that middleware. So after I have created by instance of my Koa app, but before I've started listening in here is kind of free rein, I can once again use any of these middleware. And the way that we'll use middleware in Koa and in Express kind of too, we're gonna say app.use and then within here we can use as you can see any sort of middleware that we want. So in order for me to do that, I'm simply gonna say I wanna use that logger. So now I've made some changes here and now you see nothing is really happened over here. But as soon as I make a change here and save that, usually in a moment, you're gonna see, it's just restarting due to changes. And then it's gonna run that command ts node on source server.ts and now once again, my Koa server is up and running and listening on port 3000. Okay, big deal, but now if I come back over here and go ahead and refresh this. You still see, Not Found, but not you're seeing the basic implementation, the default functionality of the Koa logger. You see two things here, you see the incoming request, you're gonna see two things, you're going to see the HTTP verb that was used. The action that was used for that particular request. In this case it was get, the arrows to the left mean that's incoming and then to the right means outgoing. So you're gonna see here that the incoming request was for a get request at the root, that's what that slash means. So, it's kind of like the default if I were to have a slash in here it'll remove it, but that's just kinda the default you'll see here. And then to the right means the outgoing response to that get for the root was a 404. And the first time it took seven milliseconds, the second time it took one millisecond. So this is just the default configuration, the default way that logger works, and for our particular purposes this is gonna work just fine. Once again, you can look a the documentation for it. You can extend it, you can show more things and do other things with it, but for now, this is gonna be just fine. So that's where that 404 is coming from, and technically the reason you're getting that 404 Not Found is because we're not actually handling any requests coming into the root of our application, that slash of our application,. And that's what I'm gonna show you how to actually handle in the next lesson.

Back to the top