Sending Notes to the Client

[00:00:00]
>> Now we need to actually create the server that will be able to grab the HTML file that we had and interpolate it with the notes that we are going to be passed down or the format of notes which are divs now, and then send that back to the client.

[00:00:20]
So let's do that. cost createServer. Server is gonna take some notes, like this. And we're just gonna return the http.createServer, like this. And request and response. This is gonna be async because we need to await reading the file, right? But first, let's get the HTML path. So const HTML_PATH = new URL(), like this.

[00:00:58]
And that's within the same directory here. So I can just say templates.html, and then imports.meta.url, and then .pathname. If you're on Windows, I think pathname breaks it, so don't use pathname. So we got that. And then now we're gonna get the template. So we're gonna say await fs.read file from the HTML path, utf-8.

[00:01:38]
All right, so we got the template. And the next thing we need to do is convert that template into the real HTML that we're gonna use, which is interpolate the template with this data once we format it. So now we're gonna say const html = interpolate this template with this object that has notes on it, which is gonna be the format notes of the notes object, like that.

[00:02:11]
Cool, I think we need to send this back. So before we send it back, actually we could do both of these in one, w could do a writeHead, which means, we could do a status and the headers at the same time. So we'll say res.writeHead, and status of 200, and then Content-Type is probably gonna be text/html, since we're sending back HTML, we want the browser to treat it like HTML.

[00:02:39]
And then lastly, we just need to send back the html, so we can just say a res.end(html). And then we'll just create one last function to start the server. So we'll say start, this also takes in notes, probably take in a port as well, that way we're not stuck to the same port.

[00:03:03]
And then all we're gonna do is just create this server. So we could say server = createServer, give in the notes, like this. And then we just need to do the same thing we did before where we listen, then we can open it, right? So let's say server.listen on the port that you gave us.

[00:03:27]
And then I'm actually going to call open inside of here. And then we'll begin to just do a log, console.log('server'). Go ahead and make an address, which will be http:localhost: to whatever port you passed in, like that, or like that. And then server on, Address, just so we can see it in a terminal to make sure it's on.

[00:04:04]
Otherwise, it'll just look like it's hanging. We won't know what's going on. And then I just wanna open that address in a browser. Last thing we gotta do in here is just make sure we export what we wanna use in another file. So I'm gonna export start. And that's the sweet thing about modules, I don't have to export any other functions in here if I don't want them to be used outside of this file.

[00:04:30]
That would essentially make these functions private, they could never be used. That also means they couldn't ever be tested either because you didn't export them. So you gotta think about that. So, probably still a good habit to export them just so you can test them, but just keep note of that.

[00:04:46]
So, okay, so now we have start, all we wanna do here now is go back to our command, scroll down to our web command here that we haven't done, and we just want to update that. So we already have a positional for port, default to 5,000. All we wanna do is just do this.

[00:05:07]
We gotta get all the notes and we gotta pass those notes to start, and then we just gotta pass in the port. So let's do that. const notes = await get, Do we have a function for that? Yes, right. getAllNotes, there we go. And then we can just say start from server, auto import that, I'm sure it did import it right.

[00:05:35]
It did, it did .js this time. Why did it do it this time? That's so weird. I mean, I'm not complaining, but why you didn't do that the first time, I don't know. argv.port, to pass in the port there. Okay, so let's try to run this and see what we broke.

[00:05:58]
So now we can type in note web, and then port is optional. I'm just not gonna do it, and let's see what happens. So, yeah, I already have something in use on 5,000, I don't know where. So I'm just gonna pick a different number. Let's just say 4001.

[00:06:22]
Boom, so 4001 here. And let's see, I don't see anything on the page. So let's see what's going on here. Okay, so we got everything running, but nothing's on the page, probably because I don't have any notes. So that would be helpful. So let's stop this, and let's make some notes.

[00:06:43]
So I'm gonna say notes new, clean my room, clean my room, clean my room, clean my room. What else do I have? I don't feel like typing anything. I know I got some other stuff in here. Here we go, I'll just do this. Cool, okay, so now I have some notes in here.

[00:07:04]
Now let's start it. 4003, cool, there we go. And I'll have a website with my notes. So then you can go here, right? You can go into your HTML, you can add a style tag, add some CSS, make it look better, do whatever you want. But basically we just server rendered some HTML, that's what we just did.

[00:07:25]
Just so you've ever heard of server side React. Yeah, that's where they got this from. We just server side rendered some stuff. So typically you probably won't use HTTP to create a server. In fact you never will. You will use something called Express most likely, which is way better and functional.

[00:07:45]
But I didn't want to talk about it in this course, because then I have to come up with a use case for using it and it'll just be trivial. In this case it makes sense to use this, but realistically you'll probably use something called Express.js or any other server language out there or server framework that's out there.

[00:08:01]
But for our purpose it works, and I really wanted you to understand how all this is working, because underneath Express, it's using HTTP anyway. So it's important to me that you understand the foundations.