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.1 Creating the Basic Structure

Now let's go ahead and start to build out the actual framework or the actual structure of our application. So once again, because we're using Node and because we've installed it, then we also get access to one of my favorite tools and one of my favorite package managers these days, npm. And this is the Node package manager. And not only can you use it to manage dependencies within your application, but you can also use it to kind of start to create and initialize the structure of your application. And that's what we're gonna do right now. So the first thing that you can see here is that I have a shell open, and I am on my desktop. You can be anywhere you would like. And I'm gonna start by creating kind of my root folder that I'm gonna put all of my source code in. So right now I'm simply gonna make a directory. And you can call it anything you want. I'm gonna call this koa-tasks since we're basically creating an API that will allow us to create, read, update, and delete basic CRUD operations on tasks. And then you could obviously extend this to add other APIs to handle task lists, and really just kinda use the basic premise here on how we're creating the API to really handle any sort of topic. So task is just really a simple one to kinda follow along within the beginning. So we have now the koa-tasks directory on our desktops, so let's go ahead and go into koa-tasks. And now while we're in here, I'm gonna go ahead and use an npm command. And this is gonna be npm init. And what this is going to do, is it's going to take us through really the basic information that we need to provide in order to successfully create this application. Now it's going to know based on where you are some basic information, and it's going to prepopulate them into the defaults. And as you can see here, it's saying, well, what's the package name? And it knows that I'm in a directory known as koa-tasks, so it's going to assume that's what we wanna call it. So really, at this point, you can just hit Enter all the way down and accept all of the defaults. And that'll be fine to kinda get things started. You can obviously go back an tweak things in here if you really need to. For the most part, we're not gonna really be handling any of this stuff directly. Because all of this stuff is actually getting saved into a package.json file as you can see right here. So if you ever needed to update any of this or make any changes, you can very easily go back into this file and manually change things. But from this point on, we're really not gonna manually change anything in this file. We're really only gonna be using tools such as npm to manage the dependencies, which are gonna be kept track of in that file as well. So at the very bottom here it says is this OK, and yes is the default. So there we have it. So now we should have a file in there known as package.json, and we do. So we've successfully created that. Now the next thing that we wanna do is we wanna bring in any sort of dependencies that we're gonna need for our application or at least to kinda get things started. So in order to do that, we're gonna use npm. Now in order to really get things started with Koa, the bare-bones, absolute basic, you really only need two packages. You obviously need koa, and you're also gonna need another one called the koa-router. And that's how we're gonna be able to create routes within our application. Which are basically just if I were to go to a certain url/tasks, I want this particular part of my code to handle any routes that look like that which is basically the idea. But we'll get into that a little bit later. So let's start with the absolute basics. We're gonna have npm i for install. You can also type in install if you want. And at this point we're simply gonna say, koa and koa-router. So those are the two that we wanna install right now. We're gonna add to this as we go a little bit later, but for now this is gonna get us up and running. And then when we're going to use different libraries or different packages, I'll show you how to bring those in and which ones we're gonna be using. So now we've added those in, and that's great. We're gonna be using koa and koa-router for actually running our application while we're running it on our development machine, or running it in production, or wherever you have this application running. But there's also some things we need to do in order to run this properly from a development perspective. And as I've said before, we're gonna be using TypeScript. So in order to kinda do that we need to bring in some development dependencies. Now by default when you use npm and you say npm install, it's going to assume that those are real live prod dependencies. But now since we're gonna be doing some development dependencies, we're gonna use npm install again. But we're gonna change things just a little bit. So I'm gonna use npm i once again to install, but now I'm going to add a couple different things here. So I wanna be using TypeScript. So I want to install TypeScript. I want to install ts-node, which is actually a TypeScript kind of extension to the Node functionality, so I can get a hold of some things in there if I need to. And I'll show you how we're gonna use it and why we're gonna use that in a little bit. We're gonna need something called nodemon. Nodemon is actually an interesting tool. If you've ever done this sort of front-end development with Angular, you now you can do a watch, or something similar to that. And it will actually watch your source code for changes, and it will recompile your changes and make them live right away. Well that's all on the front-end side, but nodemon is actually used to do the very same thing on the back-end. So this is a very handy tool in development. So when you're making changes, it will actually run through your code again. And in this case, it's gonna kinda recompile our TypeScript and make our newest changes live immediately. So we can refresh our browser, do whatever it is we wanna do. And then we'll go ahead and see those changes immediately, and that's pretty cool. I'll show you how to do that in a little bit as well. Now because we're using TypeScript, and Koa is technically a JavaScript framework, there's a couple things that we need to do. We wanna be able to take advantage of the functionality that's in Koa written directly as JavaScript, but we wanna be able to take advantage of the types associated with Koa from a TypeScript perspective. And so the way that you do that is you actually use npm to install the types associated with those packages. So in order to do that you simply say @types/koa, and there's one of those for Koa as well as for Koa routes. So I can go ahead and import the, or install the types for koa-router as wel. And then it'll be good for now. And once again like I said, we're gonna add to that as we go, but like I said this is for development purposes only. I don't need all of these dependencies. I don't need TypeScript and all that stuff running in production. That's not gonna be necessary. So in order for me to make sure that I'm only doing this in the development environment I can say --save-dev. So this is gonna save these as development dependencies. So go ahead and hit Enter. It's gonna go out and fetch all of these packages and any of their dependencies. It's going to download them into the node_modules folder, which I'll show you in just a moment. And then it's going to make references to all of these within my package.json file as well. So now that we have all of our dependencies, at least for now, installed, let's go ahead and see what we're working with. So now that I'm in my koa-tasks directory, I can simply say code., and that's going to open up Visual Studio Code in that particular directory. And now we're ready to go. So let's see what we have so far. So right now all we have is the node_modules directory. As I said before, this is where all of those packages have been downloaded and installed into. And then I have my package.json file which is gonna have everything in here that we saw in that kind of initial interview as I ran the npm init command. And then you're gonna see down here we have a dependency subsection, where we have koa and the koa-router. And then in the devDependencies, we have the TypeScript types associated with those dependencies here, so that I can use them during the development process. I have nodemon, I have ts-node, and I have typescript all installed for development. So we're looking pretty good so far. Now that we have the basic structure here created, let's go ahead and start to get something up and running from a Koa perspective.

Back to the top