Create a Simple Node.js Server

[00:00:00]
>> All right, that wasn't too bad, writing a server in five minutes. However, we just wrote a server, but it doesn't really do anything cuz we don't have all the files we need to actually make it run. We don't have node, we don't have our index.html. So let's walk through how to even get to the steps to get this server to run.

[00:00:21]
So let's write this node server and then we're gonna walk through, talk about Homebrew which is how we install things on OSX. Then we're gonna solve node then we're gonna write the world's most basic HTML file, cuz you need all these things to actually get the server to run.

[00:00:37]
But let's start at the basic node server. And I'm gonna do this all in Vim. So we can do wherever, it doesn't matter in the root or not. I'm gonna use my temp directory because I like to keep my file system clean and I know I will probably clean this up later.

[00:00:53]
So I'm gonna say vi simple server. And this one is not a kind of random file like we touched, so this one's js, so we're gonna say simpleServer.js. I'm gonna go to insert mode. So the first thing we need to import from node is http. So we say http require(' http').

[00:01:19]
So that's just the library that allows us to make requests and response. And this is all built in the node, it's fantastic, we don't have to NPM install anything. Next thing we're gonna do is we're gonna import FS, which is, again, built in a node, allows us access the file system.

[00:01:35]
FS file system, pretty straightforward just like HTTP, nothing groundbreaking. So FS, and we need to we need to access the file system because, well, we're serving files. This isn't actually a necessary step, it is for this exercise but I can actually just write a response back into, I can write data back the response and I never even need to create an HTML file.

[00:02:01]
We're just doing it for this exercise because it's a little bit easier to grok the first time around. Maybe later we'll just write directly to responses and we don't need any files at all. So next up, I'm gonna be a good engineer and I'm gonna define my constants up top, and constants we like to give all caps to let people know it's a constant and it won't change.

[00:02:25]
You don't necessarily need to do this, you can just 3,000 later down the line. We will dive more into ports and why they're necessary, why we pick 3,000. But for now we're picking 3,000, 3,000 is generally accepted as the unused port for development. There's nothing that binds to 3,000.

[00:02:43]
There are some ports that we'll find out that you can't use, they're already in use like port 22 is for SSH, port 80 is for HTTP, post 443 is for HTTPS. Yeah, I used to know of so many more ports, my memory, it's just the gray hair. I forget how many ports, there's a lot.

[00:03:05]
>> 65,000 something.
>> 65,000, that sounds right. Yeah, so you're not really gonna run out of ports, the only chance you have is you might have a port collision. But lets just stick with 3,000, you may see 8,000 in some tutorials, you may see 8080, those are all fine too but we define our port.

[00:03:23]
Next let's define our server, so we'll say const server = http, built in library and not complex, we're gonna say createServer. Pretty easy and createServer is gonna take a function as an argument. Don't mind the way I code, I just like to close off my parentheses early because later, I'll be like, why isn't this working and it's always a missing bracket parentheses.

[00:03:49]
So I do it ahead of time. So say function, again, I like to do this ahead of time. So every server, it doesn't matter if it's node or tomcats or try to think as Python with Django or Flask or Ruby or Rails, it doesn't matter. Every single server has two basic things.

[00:04:18]
A request, we'll call it req, you can call it request if you want, and a response, we'll call it res. These are fundamental things of every server. The request coming in, so if someone's making a request to your server, as we said, servers just serve, respond to requests, and the response.

[00:04:35]
What do we tell the request, the person asking? So, naturally when we need to write a response, what do we do? We do it in the response. So we'll say res or response. We're gonna write to the head, which I'll talk about what it means in a second.

[00:04:55]
I'm gonna close that off early. So, we're writing to the head. So this means the response is made up of a lot of different parts. And maybe a little bit later we can dive into, we can do a console there and we can dive into what a response actually looks like.

[00:05:11]
It's very, very big, there's a lot of moving parts. But for now, we're gonna write directly into that response into the head of the response. So we're going to give it a 200. 200 is a status code. It just means, okay, everything's good. The most common status code.

[00:05:27]
I'm so excited, we're gonna dive way more into these things. We're gonna talk about request and response, we're gonna talk about status codes, why they're important. They seem trivial, but they're really important. But for now, we're just gonna say everything's okay and we wanna be good citizens, so we wanna give it a content type.

[00:05:45]
So right now we are writing a header content type And it's the text/html. And this is just to help the browser out, to let it know, what are we sending back? I think sometimes you can infer content, it depends on the browser, but we generally want to be as explicit as possible.

[00:06:11]
So there, we just wrote a header as part of the response. Headers are not part of the response body, they're just metadata attached to the response that says, hey, are you logged in? What are the cookies you have? What's the status code, etc, etc. We can go on and on about responses.

[00:06:29]
But for now, we wrote 200, and we told it we're sending back an HTML file. Next, we're gonna create a read stream. We're not gonna write to it, we're just going to read. So we're gonna say, file system creates a readable stream. And we're gonna say this fictional file we haven't created yet, called index.html and we're just gonna pipe it into the response.

[00:06:59]
The streams and node are, well, they're not new, they were new when node was invented but streams are awesome. So instead of loading up these files and it's really small at this level, it's only gonna be less than a kilobyte. But imagine you had, I don't know, a 20 megabyte PHP file.

[00:07:18]
And if you're like, there's no such thing as a 20 megabyte PHP file, that just tells me you've never written PHP. It is absolutely possible. So in the normal days, you'd have to open that entire file. So you have to load it all in the memory, pass it into your application server or your web server, and then serve it out.

[00:07:34]
But with streams, we just start at the head of the file and we just pipe that into the next, into the response itself. So it's much faster and much more memory efficient. Cognitively, streams can be a little bit harder to deal with cuz you're not dealing with a static file that's in place, you're dealing with a stream of information.

[00:07:53]
I'm sure there's the Frontend Masters Course on OGS and where they get way in the streams and I will add it to the slides
>> Scott moss.
>> By Scott moss, also a former Netflix engineer, there's a theme here about good courses. No, no, I'm kidding. Amazing instructor and a really nice guy, yes.

[00:08:11]
>> There's a comment about wanting to get syntax highlighting in them and someone said, colon syntax space on-
>> Let's try it. I am a simple man of simple tastes, so it's :syntax dash on or just on?
>> Space on.
>> It's hard to see but that is slightly purple.

[00:08:36]
Pretty nice.
>> It does look nice.
>> There's a way, so I think I copy and pasted this code out of VS code which copied my syntax over but really want to get familiar with VI cuz this is where we're gonna be writing all that code. And you can't use VS code on your server, I mean, you can but we'll talk about that too, how to do that All right, and am I missing a bracket?

[00:09:03]
No, I think I got them all. Okay, I'm just gonna add a semicolon just because I'm a purist like that. So that's our server, great, now what? Well, the server is not actually doing anything yet, it doesn't know where to listen. So we have to open that port for it and tell it which port to listen to.

[00:09:20]
>> That's pretty straightforward, we're gonna say server.listen and we're gonna use r constant of top called PORT. And this is just for our own benefits, you don't have to write a console log. But it's nice to know when your server actually ran. Otherwise, it's just an empty process or it just looks like an empty process.

[00:09:41]
Ports and we gonna say dollar sign. PORT. Okay there you just wrote a node server and we walk through each of these lines and see what they do. Most of these we're gonna dive into a bit more about HTTP headers or response codes, things like that. But for now, yeah, that's a server in a couple of lines, but to make it run we're gonna need a little bit extra software which you may or may not have.

[00:10:14]
Some of these things, you may have if you code in your day-to-day. But if you don't, let's walk through how to actually run this right now. So I'm gonna write quit. So the file we're missing right now is the index.html. We didn't write it, let's see what the minimal response we can get to make it say, actually work in a browser.

[00:10:35]
So I'm gonna say vi index.html. And I'm gonna be a rebel here. I'm gonna say hello world and we'll see this totally invalid HTML. We'll see if it works in the browser. Okay, next we need node. I have node installed, I like to check the version just in case.

[00:10:58]
So I'm running node 16. I think the latest is 19. Doesn't really matter for this case, unless you're running something really old like eight, which I don't know have streams, but this version's okay. And you're, if you don't have node installed, let's brew install node. So we can say brew install node.

[00:11:17]
It's looking. And Node's already installed on a different version. I'm using something called NVM. I really don't want to go to the rabbit hole of tools, cuz people be like, but I'm using this, I'm using MPX to do this. But NVM is pretty awesome too, it lets you switch node versions on the fly so I can say nvm use 19.

[00:11:45]
I think I have 19 installed and I just switched another version very nice. I highly recommend nvm but that's not the purpose of this, we really don't have to go down that rabbit hole. I did use something called Homebrew, which if you haven't used it, I'm about to blow your mind again.

[00:12:00]
[LAUGH] There's a whole world of things to make your life easier. And let's use our Google Foo here. And I'm gonna do everything as I do in incognito, not cuz I'm doing anything nefarious. I just do this by default, I'm really against tracking on the internet. That's a whole other rant I'll go into, but this type of Homebrew.

[00:12:26]
So, consult Homebrew, you can just copy this to your terminal. I won't to cuz I already have Homebrew installed and who knows what happen if I try to install it twice. But Homebrew is a package manager for Mac Os. Similar to kind of MPM is the node package manager, Homebrew does that too.

[00:12:44]
It's not in anything official, I wouldn't say, Apple's not like, yeah, we own Homebrew. But if you've never used Homebrew, it is fantastic for installing things. It makes life so much easier. So if you want to install Homebrew, you brew installed node and then now we have node installed.

[00:13:03]
You don't have to use nvm if you don't want to, I think you can brew install nvm too. So you can you can kind of do it lots. Okay, so hopefully you all have Homebrew installed and let's jump back here. So now I'm gonna say, node simpleServer.js. Hey, work the first time, that almost never happens.

[00:13:26]
So usually I'm missing something, but this is only a few lines. And so let's navigate back to our browser, so we're gonna use localhost. I'm going to say port 3000. The colon gives it a port, look at that. Our non-HTML page works. In case you didn't know, browsers are really familiar with parsing HTML.

[00:13:49]
You can kind of do whatever you want, you can make up tags and it'll work. It'll just ignore them if it doesn't understand it. In this case, we're just writing simple texts. Nothing super advanced here. However, this is might be the simplest HTML file I've ever made. It's not proper HTML.

[00:14:08]
So hopefully you got this far, you wrote a server, you wrote a really simple HTML file, you installed all the files and now you have your server running. From here the possibilities are endless, I expect you to have Netflix written in the next couple of days. Now that you know how to do this, yeah.

[00:14:25]
>> [INAUDIBLE]
>> Yeah, probably a weekend project I would say, a little more advanced. Next weekend will be some sort of AI like ChatGPT 4, we're on the way here. If you're wondering what local host is, that's just your local computer. I can also type 127, 0.0, hey look at that, the same as localhost.

[00:14:54]
Localhost is just a shortcut for 127.0.0.1. That is a reserved IP, all computers have it, it's just a loopback command. It just says look at the open ports on my local machine. There are a few other reserved IPs, what's one? This isn't my network so I'm gonna say 192.168, I don't know it's gonna pop up here, .0.1.

[00:15:22]
Will it work? I don't know, probably won't work. That's usually 1, 2 or 192.168.0.1 is usually your router. It could be 198.168.1.1.2. So go home and try that out and see what pops up. It's probably gonna be your router, your modem. So these are just local addresses that are well known, if you're, Jem, how do you remember all these things?

[00:15:47]
I don't know, I've just done it enough times that these things kind of build into your muscle memory.
>> I'd like to imagine that the browser engineers appreciate how bad we are, and so it's like as permissive a definition of HTML as possible.
>> [LAUGH] Browsers are probably the most forgiving software on the planet.

[00:16:12]
They let you get away with pretty much anything. And couple that with the fact that JavaScript, one of its core features is its backwards compatible. So that web page you wrote in 2002 in JavaScript will still work today. I mean, it's absolutely incredible, I will gush on about this later but the internet in my opinion is man's greatest achievements.

[00:16:33]
It's just the amount of work and collaboration cooperation to make all these things happen, all these different pieces of technology work together, without some overviewing government governing body. It's just, it's unparalleled. We've never achieved anything else like it in humanity. Anyways, I'm going on, you can tell I love what I do and I love Full Stack and diving into these things.

[00:16:56]
So hopefully, if you got stuck on something, double check your code, you might be missing a quotation mark or closing a bracket, something like that. Again, the node version doesn't matter as long as it's high enough. The default that you install with brew should be high enough to run a readable stream.