Creating an HTTP Server

[00:00:00]
>> Okay, so finally, we're gonna write some code. First thing we're gonna do is we're gonna hop on the struggle bus, and we're gonna make a Vanilla API without any framework in Node JS. So I'm gonna hop into my editor, and we're gonna do just that. I'm going to just make a new project here.

[00:00:22]
So please feel free to follow along with me. This is pretty much the pace for the rest of the course, but like I said, the site has the code that I'll mostly be doing. I won't be looking at this as I go through, so I might write it slightly differently than what is here, but you can always catch up just by looking at this.

[00:00:41]
So let's do that. So we're gonna make a new repill here. Let me make one. I'm gonna call it course or yep, I'll call it course. And then if you've never created a new NPM project before, you could just do npm init, I'm gonna do --yes to just get through all those prompts, and I'm just gonna open this thing up in VS Code.

[00:01:11]
Okay, and then I'm just gonna create a new folder here called source to separate my source code out, and then I'm gonna make a new file called index.js. So yeah, let's write some code here. So first thing first, like I said, this is Vanilla API, we're not gonna install anything, everything we get for free.

[00:01:32]
So I'm going to require something called HTTP from HTTP. This is a built-in module for creating API's and interacting with things inside of Node JS. And let just go back to the notes here. And basically, like I said, for the most part, you can do everything from just this HTTP module, in fact, even express in any other server framework builds on top of this HTTP module.

[00:02:05]
So it's just an abstraction around it. Here in the code samples of using imports and stuff, if you wanna use ES6, if you know how to do that, please go ahead, but as I'm coding, I'm just doing require. We are gonna switch this over to TypeScript at some point, don't worry, you don't need to know TypeScript.

[00:02:23]
TypeScript is a really cool language that has optional types. Emphasis on optional, we will not be doing a bunch of type stuff, but we will be using TypeScript for a really cool tool that we'll be using that benefits heavily from using TypeScript. So we're gonna switch over to that, and we will be able to do imports.

[00:02:40]
But for now, you just do require. But yeah, let's go ahead and make that server. So what we can do is I can go down here, I can say server = http.createServer like this. And this going to receive a callback, and I'm gonna make it asynchronous. And this callback is gonna be passed a couple arguments, it's gonna be given, the first thing is typically we'll call REQ or rec or short for request.

[00:03:11]
This is the incoming request, right? So let's little talk about a little bit how server works. A server is, it's a computer that's connected to internet. And in this case, for HTTP, for this protocol, you can request information or you can request to do something on a server from any other client.

[00:03:34]
And a client is anything else, it can be another server, it can be a front end app, it can be a mobile app, it can be anything that's connected to the internet. That's basically what a client is. So a client can make a request to attempt to do something on a server, and then the server typically has to respond to that client, and then the connection is closed.

[00:03:53]
If the server doesn't respond, the connection typically times out on whatever limit that the client decided for that timeout period. So there's this whole mechanism of sending a request, and then the server responding to the request. So here's the incoming request, and then here's the response. We get this response object, I'm gonna name it res for short.

[00:04:15]
And this is typically the pattern you will see in most Node frameworks is req, res. This is a very common thing if you've ever used Next Js, you've seen this before. Well, Next JS is heavily based off of Express, which is heavily based off on HTTP. So it all just kind of works together.

[00:04:30]
So we have that. And we're gonna create some naive implementation of a router. So we want to do something when someone does a get request to a specific URL. So you may not know what a get request is right now, you may not know how URLs work, we'll get there, but for now, just follow along.

[00:04:52]
So we're gonna check to see if someone's doing a specific request. So we can say if req.method, a method is, we'll get to it, but it's just a way to show intent on what you wanna do on a server. So if someone is doing a method of get and req.url = '/' so if they just did a get request to whatever address this server hosted on, then we want to respond with something.

[00:05:26]
And you can pretty much do whatever you want here, you can send back data, you can send back a message. What I'm gonna do is I'm gonna change the status, so I can say, status code. We're gonna say 200, we'll learn about that. And I'm just gonna say res., let's say send.

[00:05:48]
Wait. Let's just say, and I was gonna say end here, let's just end it. So we'll say end and that's it. This is bare bones, super easy, its server doesn't really do anything, you can do a get request to this URL. It'll get back to 200 if you do, and then it'll close, and will close the connection.

[00:06:11]
So that's the API. The next thing we have to do is we have to start this. So we can go down here, and we can say server.listen. And we have to put in some magical number here, we'll talk about this number in a minute, but I'm just gonna put a four-digit number, I'm gonna put 5.

[00:06:27]
Well, I'm going to put 3001, you can put the same if you want, and then I'm gonna put a call back after it. And then it's called back I'm just gonna put a log that just says server on localhost:3001 like that. Okay, any questions on this so far?

[00:06:56]
And if you thought this was tedious, and you don't wanna make API's and note now after me showing you. Yeah, that's the point, no one should wanna make API's like this, that's why you use frameworks. And it gets way more tedious when [LAUGH] you actually wanna do real things like posting, and updating, and creating, and deleting, and input validation.

[00:07:18]
You just gotta be creating your own framework, I went down that path it's not fun, you might as well just use something else Okay, so no questions on that, let's try to start this thing. Yes?
>> Why did you use async in the createServer?
>> Yeah, I use async in the createServer because I was going to do something async and then halfway through it, I decided not to.

[00:07:41]
So yeah, I'm very random. I'm live coding, so yeah, I was like, I'm gonna I'm gonna send something back, async was like, wait, no, that I don't wanna do that. That's just too much, I don't that's just extra, it's getting in the way, so I don't actually be a async, it's not hurting if it's there if I'm not using it.

[00:08:00]
So it's totally fine. Le's try to start this API or start the server. So you can go to your terminal, assuming you have Node installed, for this course, it's probably best to have at least Node Version 14. If you don't have at least Node Version 14, I recommend it, you could probably get away with 10, for the most part, I think, you could probably get away with 10.

[00:08:24]
But to be safe, you wanna have at least Node Version 14. I recommend using NVM Node Version Manager, I think there's another one called IN, never use that one, but I've heard really good things about it to manage your node versions and just switch to Node Version 14.

[00:08:40]
It works on Windows or Mac. And if you don't know what version you're on, you could decide which or you decide about node desktop version, it'll tell you. I'm rocking 16.13.1. But yeah, if you have node, you can just type out node, you can type source and then the path of that file like this.

[00:09:03]
And if you do it right, you're gonna see a log that says server on HTTP localhost:3000. And if you've ever worked at a terminal before, you're probably used to running some type of command. And then the terminal running that command and then the terminal closes and it goes back to a prompt.

[00:09:22]
Well notice that my terminal did not go back to a prompt, it's just sitting here, right? That's the difference between the server and some scripts that you would write in Bash or whatever your language of choice, a server is always on, and we'll talk about that in a minute.

[00:09:37]
Okay, so now that I have that, on Mac, I know you can command click pretty much any URL and the terminal to go to it in the browser. But if not, just copy this URL and go to it in the browser, and mine just crapped out. Here we go.

[00:09:54]
So you can see that I tried to do a GET request to it and we know it's working because I got an error here, res.statusCode200 is not a function. That wasn't me thinking that it's Express, so we can't do that. I'm actually just going to delete that and just do and I'm just gonna stop my server.

[00:10:12]
It already stopped because it died, I was gonna start it up again, and then I'm just gonna go back and refresh. I'm just gonna refresh and you just gonna get a blank page here, you're gonna get nothing. And that's I know the server's working because it didn't die.

[00:10:26]
Now, what I can do to verify that is I can actually either send something back or I just put a log here. I'm gonna put a log here in the server that just says console.log hello from server. And unlike a frontend app, this log isn't gonna show up in the browser's console, right, it's gonna show up in the terminal.

[00:10:46]
So if I wanna see where this is logging from, I would need to stop my server and start it again. Go back to the browser, initiate that get request, so I'm gonna refresh my page that's gonna initiate the request, go back to the terminal and then I should see hello from server.

[00:11:05]
So we created a server, we register to get request to URL of just slash, we sent a log to the output of the terminal and then we ended the request. And then we initiated that request by going to the browser and typing into the server by hitting Enter, which if you didn't know, actually does a get request when you go to a URL in a browser.

[00:11:26]
That get request then triggered this handler, which then logged hello from server. And that's the basics of a server. Every API from here on out that you're ever gonna work on is just this, but times ten, but it's the same concept. Incoming requests, you match it based off some combination of something, and then you respond with whatever information you feel like you wanna respond with.

[00:11:51]
And how you do it is, that's where the details are.