Serving Static Files in Deno

[00:00:00]
>> So let's talk about serving up static files. So so far, what did we do? We returned some blank text on the body, we returned some HTML, but just an h1 and then we parsed her out with some crazy NPM package. But normally, a web server doesn't do that.

[00:00:15]
Normally, it returns like an index.html file, which is just what you would do. So how can we do that? Well, let's see. First of all, I'm gonna get rid of all this route parser stuff because it is, frankly, it's just super hacky. I don't know that I would ever do that in a production project.

[00:00:35]
And let's get rid of this. And let's get rid of this too, just get rid of all this. Now, what I wanna do instead here is I'm gonna add a new file called index.html. And then, in this file, let's make some HTML, y'all. If you didn't know, VS Code has something called Emmet built in.

[00:00:58]
And so you don't actually need, if you want a whole HTML page, you can just do this bang character and then tab, and that will just fill it all in. So this is our simple web server, My Simple Web Server. And then down here, we wanna do, I don't know, what do we wanna do?

[00:01:15]
We wanna a div that's got a class of container and container, kind of section. There we go. And then inside, just put an h1, give it a class is-size-one, Hello World. Lots of Hello World. And then I'm just gonna pull in a style sheet up here. So one of my favorite, favorite, favorite CSS frameworks is called Bulma.

[00:01:41]
Anybody heard of Bulma? Bulma is awesome, I love everything about it. It's very easy to use CSS framework. It looks great, wonderful stuff. And then let's just add some additional classes here. We're just making this look nice. Now we wanna return this file from our server here. How do we do that?

[00:02:07]
Well, there are a couple of different ways that we could do it. Sort of the most naive way for us to do this is to do it like this. If we said we have some HTML, and we want to get the HTML out of that file. Well, how can we get the HTML out of the file?

[00:02:26]
Well, the easiest way would be to just read the file. So if you remember, we've got that Deno object, and it's got these read file, refile sync methods. So we do read file and it's, what file do you wanna read? I wanna read index.html. There we go. Sorry, the IntelliSense ran a little bit slow there.

[00:02:48]
But this returns a promise, which you can see here. Promise, so we wanna await it, we're gonna await. And then, for the body right here, instead of returning all this stuff, we're just gonna return html. Now, it's important to note that this read file returns a byte array, but the body here can take a byte array, or it can take a string, either or, right?

[00:03:19]
So we can return either. It just happens to be able to handle that byte array that we just read. We don't actually need it as a string. It's not gonna be a string. And in fact, if we were to, just for fun, we can log this out. Just so you can see what this looks like Localhost, and we're gonna refresh the page.

[00:03:44]
O-oh, didn't work, what happened? Can anybody guess before we actually get up to the air? No such file or directory-
>> It's [INAUDIBLE] html. You added extra parenthesis after index.html.
>> I did, look at that. That was a nice catch. Attention to detail, wow, very impressive. All right, let's try it again.

[00:04:11]
I think it'll work this time, let's see. Hey, all right, there we go, very nice. So now we're actually returning an index page, an HTML page, and we could return all sorts of HTML. And here's the byte array. So you can see it like, this is what it actually looked like when we read it.

[00:04:29]
It's just that Deno's little respond method knows what to do with that, okay? But we don't actually even have to do this. So there is a, as part of Deno's standard library, so let's go out look at their standard library here. And if we go into the HTTP folder, we'll find a find called file_server.ts.

[00:05:00]
And so we can actually use this thing instead. So if we grab this, let's come back and let's put this here, all right? And then let's import from, and then standard library. I'm just gonna pull off the version, cuz I just want the latest version. And then we need to put it in quotes.

[00:05:26]
And then let's fetch it. Okay, and let's see what's in here. What can we import from this thing? serve file, what else do we have? That looks like it. Okay, pretty easy, serve file, I guess that's what we'll use. All right, so we can use this serve file thing to serve up static files instead of trying to read it ourselves.

[00:05:56]
And all we have to do that, to do to do that, rather, is to say so we're going to do is say const.html = serveFile. And then we're gonna pass in the req, and we're gonna pass in the file path, right? Which is index.html, and then, yeah, we need to actually respond with the html here.

[00:06:22]
And I bet you, I bet you, this is a promise. Yeah, it is, see? And so we're gonna await that and then that will work. All right, so are we still running here? Is our watch still working? It is, all right, so let's go back and, if we've done everything correctly, nothing will change.

[00:06:42]
And it doesn't, right? We refresh, and it just works. But this actually gets even simpler. We don't actually, [LAUGH] actually we don't need any of this code to do this whatsoever. We could actually just call this thing directly, and this will work. I believe what we could do here, if we were so inclined, is we could do deno run, and we're gonna allow all.

[00:07:13]
And then we can just run this file directly. And it's now listening, all right, so let's go there. Open, and it works. So I mean, Deno is a kind of a magical thing in this regard in so much as that they've thought through a lot of this stuff and a lot of this stuff kind of just works, which is is pretty freakin rad.

[00:07:41]
I don't hate it, I don't hate it at all. Very cool, all right, so just to wrap up what we did there. We imported the server, we used that. We brought in the file server. Initially, we read the file system with Deno but then we, or Deno. But then we used the file server, the built in file server to serve it.

[00:08:03]
And then eventually, we just used the file server and nothing else, nothing else. And we got the same exact result.
>> I'm a bit confused, when you directly used the serve file, [INAUDIBLE] into the [INAUDIBLE], you did not remove this awaits on file function. Is it not the same thing?

[00:08:30]
>> Well, I didn't call the app.ts file. All I did was run this file directly.
>> Okay, so but how does it know which file to look for then?
>> Because I'm in this directory, it just looks in whatever directory I'm in. So if I ran this from a different directory, it would serve up whatever index.html's in that directory, if there is one.

[00:08:53]
Otherwise, it would just 404. It's also trying to get the favor con, which we don't have.