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.3 Creating a Basic Application

All right, now is the time everybody's been waiting for. Now we're actually gonna start to write a little bit of code. It's not gonna be much. And it's not gonna do a whole lot. But we're gonna be able to get things all up and running and kinda gets some cool little tricks in here so that you can actually see an application run. So let's go ahead and start to create the directory that's gonna hold our source code and then actually start to get our server up and running. So what we're gonna do here first is we're gonna create a new folder and this folder's gonna be source or src and then within here, we need to create that entry point for our applications. We're gonna create a new file and you can call this pretty much anything you want. I'm gonna call it server.ts that's kinda to me that says, hi, I'm the entry point. This is where all the code kind of begins, this is where we should be starting. So my server.ts file is gonna be pretty simple to get started with. It really has only a couple of things that it needs to do, a couple different operations. I need to bring in Koa, I need to start my application. I need to listen on a port, so I need to pick a port that I'm gonna listen to. And then basically I'm going to log something out to the console so that you can actually see things up and running. But before I actually do that, I'm gonna show you the cool way in development anyway to get things started so that it will constantly watch your source code and then actually compile it on the file and you can see it happen right away automatically. Alright, so it seems like a lot but it's not too bad. So what we're gonna do is we're gonna do two are actually and do one import Import statement. So we're gonna import * or import everything as Koa from the Koa package. So now basically what I've done is I say give me everything from this Koa package that you've downloaded and installed for me, and just make it all accessible as this class name Koa. And so it's basically like you can see there in the tooltip, it's a Alias alright. So now that I have Koa I can go ahead and create a new app instance so I'm gonna say const app to a new instance of that Koa class. And then from there I'm going to simply get this application up and running. So I need to make it listen on a port,the port can be any port that you want you can have it be any port as long as its not already in use. So if you're already running some sort of web server or something on your machine that's listening on port 80 which is pretty typical or 443 is you're using https. And that something is already bound to that port, it's not gonna work, this application will fail. So try to pick something that you're not already using somewhere for this particular application. So I'm gonna say app.listen and I need to specify a port number and in this case, I tend to use 3000 for some reason when I was learning a lot of this that was kind of a common port, that I saw people using not really sure why. So I've kind of adopted that practice as well. So I'm gonna use app.listen on port 3,000. And then I'm simply gonna use a console.log line here. And this is not really the way I like to do logging and I'm gonna show you a better way to do logging using a Koa library, using a Koa package to be able to do some better logging when it comes to taking a look at requests and responses and things like that. But this I like to use at least when I'm getting started so I can kinda put something on the screen and say, my Koa server is up and listening on port 3000 something like that, so that should be fine. Now, that's great let's go ahead and save that but the problem is now how do we run that? Well, we could sit here and kind of do some mpm commands or some node commands and get it up and running, but then it turns into if I just mainly start this application yeah it might start but then the problem is what if I go in here and make changes? Well then I may have to stop the server, I'm gonna have to rerun it and things like that, wouldn't it be nice if I could just have something running in the background that's going to watch my source code. And if something changes just go have it all restarted, recompiled and then let's go ahead and run it automatically. And that's exactly what we're gonna take care of right now. So what we're gonna do is we're gonna go into our package.jason file, and we're going to create a new script in this script section here. Now you'll see test here, there's just kind of nothing going on, I'm just gonna say that there's no test specified, and that's actually hard-coded, and actually I'm going to show you how to write some tests on this stuff towards the end of the course, but stay tuned for that. So, what we're gonna do here is we're gonna create a new script, we can pretty much call this anything you want. I've been seeing a number of them out on the internet these days called watch-server, which is probably kind of kin to the watch command that you can do using the angular CLI or other things like that to be able to watch your source code and compile on the fly So maybe watch servers kind of match to that, I don't know, but that's what I'm going to use. And then what we're gonna do here is we're going to give a command we're gonna use one of those dependencies that we talked about before that nodemon that we gonna use to watch. So we gonna say "nodemon --watch", and then we gonna specify what is the directory? Where do we want it to watch? Now I'm using the double quotes on the outside here for a reason because on the inside I wanna use single quotes because I'm gonna specify a path here within quotes. So, I'm gonna say I want you to look inside the source directory once again we are gonna look double asterisks because I want to you at every file under that directory just like that just like we did before. So I'm gonna watch that -e I want you to look for the extensions ts and you can also have tsx extensions for TypeScript as well. So that's kind of a way to make sure you're covering all your bases there. So I'm gonna watch for those types of files and if you find changes in those types of files In those directories, what do you want to do? Well, I want to execute a particular command and this is where that ts-node is going to come into play. So we wanna execute ts-node and what do we wanna ultimately execute ts-node against? Our entry point of our application. What do we wanna actually run? We wanna run our source server.ts file, just like that. So seems like a lot going on there it's really not that bad you're basically just using nodemon to watch a certain directory for changes in files or particular extensions and then what do you want to do you want to execute a command. So that's pretty much all that's going on there nothing too crazy. So let's go ahead and save that. So ultimately, now, that we've done this, how do we actually run our application? Well, let's go back to our terminal over here, and let's go ahead clear up a little bit of space. So now what I can do is, I can use my new script, as you see here, my script, my watch server script. I can say npm run watch server just like that. And if everything has worked correctly and you don't have any glaring issues, or structural issues, or compilation problems, or whatever cuz you'll see all that here cuz it's running constantly, then you're gonna see now that you're gonna see that my co-server is up and running and listening at port 3000. Now if you see that or whatever you put down here in your file to log when it was up and running, then things would seem like it's safe to go ahead and see what our application looks like, but at this point there's really nothing happening because all we're doing is we're running and listening at port 3000. So what I can do at this point is I can actually go to local host port 3000 and you're gonna see not found. Now the reason it's not found, as we're gonna see in the next lesson is that we actually haven't created a route to handle the route of our application yet. So you're actually getting a 404 not found response back. But you wouldn't really know looking at the browser unless you went to the developer tools and look through and actually watched the traffic coming back. And that's kinda the downside to doing logging this way because I'm not seeing what's happening when I go into the browser, I can't really see what's happening. So before I go too far with this, I'm actually going to make a slight change to our application and then add in some better logging so you can actually see the request response communication going back and forth, before we continue on with our application.

Back to the top