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

3.1 Creating Your First Route

Now that we have our basic app up and running, let's go ahead and start to handle some of these routes, and let me show you how to create a handler, a very simple handler to handle that root route where we were initially getting that 404 Not Found, just like this. All right, so the way that we're gonna handle this is the first thing that we need to do is we need to do another import. So we're going to say import, we'll do the same way, we can say * as, in this case, we'll call it router from koa-router and so we're going to have this new class called router, and what we want to do is we want to create a new in instance of that router. So we'll say const router = new instance of router, like that, and after our log line, so we'll just leave that middleware in there like that, and then we can add in any more that we need to right there, which we'll do a little bit later. And then right now, we wanna use this router to be able to handle requests coming in, process them, and then give some sort of response back. So how do we do that? Well, we're gonna use this new instance of router and then we wanna use a function on the end of it. Now, what function do we use? Well, you're going to use whatever function that represents the request type or the the HTTP method that's being used in that request. So in this case, we want to handle that Route, Route for gets. In this case, we're simply going to use that get function. And then within here, we are gonna specify the path that we want to handle. So in this case, I want to handle just the root, so if somebody comes into my application and goes to the root of the application, this is the code right here, that is going to handle that request. And then what we're going to do here is we're going to basically add in the Request Handler right now. But if you've ever done any sort of node development previously, or maybe did some express development, you would come into this point, and he would put in a function, right? And then you could have all these nested functions and get this kind of call back. The callbacks of the callbacks of the callbacks and things like that. This is where we're gonna start to introduce this concept of async. And really, it's very, very simplistic in that we're going to simply use the async keyword. And then we're gonna specify this kind of function inline that's going to handle this request. And the way that we're gonna do this is we're going to handle, we're gonna take an input, and we're going to have a function body that's going to process that input and do something with it, send an output, do whatever. Now, if you've done expressed development before, once again, you'll know you've probably seen something like this before where you'll have a function and then ultimately in here, you're gonna have usually two or three parameters being passed in. It'll typically be something that represents the request, so you can get the data from the request. Something that's going to represent the response. So you can do something with that response. You can add data onto it, you can set statuses, do whatever you want. And then sometimes, you may or may not have a kind of like another callback to a next, right? You'll have that callback function, that hand that, kind of like a pointer to the next processor or handler in that pipeline. Kind of like we talked about the middleware before. Well in this case, that's kinda been gotten rid over and encapsulated into a context. And a context is a Koa kind of concept where all this functionality, all these things that you wanna do with the request, with the response, with the processing, with the middleware, with passing it along to the next handler or whatever, is all encapsulated into one concept which is this context, which is gonna be the input into this. You can call it anything you want. I tend to call it ctx. And then we're gonna specify the body of this handler. Now what is this, what does this body do? What do we want to do in this particular case? In this case, I don't really want to do much, I just want to return something, so that the user knows that I got the request processed and there is an application here. So, what we're gonna do is we're gonna do a simple response. I'm just gonna send a text string response back. And the way that we do that is we say ctx or we use that context., and we set its body property. And we set that body equal to whatever we want. So in this case, I'm gonna say Welcome to My Koa App just like that. So we go ahead and put in a couple of semi colons here. Now we have this router that we have kind of created new instance of. And now, we are handling a get request that is coming into the route, see, just like that. But now, how do we actually make this work? Because if I were to save this right now, and actually I'll show this to you, you see this is back up and running. If I come in here and refresh this page, I'm still going to get Not Found. And you're going to see that I still get a 404, well why is that? I created this route. Well, once you have created this route, you actually have to use them because they're gonna basically get processed or inserted into that pipeline as middleware. So the way that we do that is we say is app.use again and we're gonna say router, we want to use the router.routes. And what this is going to do is it's gonna compile all of the routers that have been defined or the routes that have been defined on that router and insert them in here as middleware. So now that I've added that one line, let's go ahead and save this again, you're going to see my app is restarting, it's up and running. Now we'll come back in here and we'll go ahead and refresh this. And now you're going to see that we got Welcome to My Koa app. And now we got that GET request coming in at the root and then the response is now, the default is 200. You'll see GET of the route. We did a 200, which means okay, and it processed that in seven milliseconds. And you're going to see here that the response size was 22 bytes. So, now you can see that we're actually able to process a request. Now, I would argue that this is not the best way to do this, now if you wanted to add in some generic routing in here to handle the basic requests going to the root or something like that, this will work. But typically, when you're creating APIs, you're gonna create much broader APIs that are gonna be a little bit larger than this might be. And so, what's gonna happen is you're gonna start handling more and more routes, with more and more HTTP verbs. Now, I'm gonna have to handle a put, and a post, and a delete, and whatever else you wanna do. All of sudden, this file's gonna get really, really long. And what is this file? This is the server file. This is kind of the thing that gets everything started. So I would argue that maybe you might have some very basic generic things in here. But this is not where you're going to want to put all of your routes. So what we're going to do in the next lesson is we're going to start to push these routes, make some small changes, and then push these routes into a different location, and then load them from there, so that we can kind of structure this in a little bit of a smarter way, going forward.

Back to the top