Serving Files

[00:00:00]
>> Now, we need to see how to solve that. Well, to do that, what we need to do is to access a utility function from the HTTP package that will let us create a file server. A file server will automatically serve to the user all the files in the file system.

[00:00:21]
Be careful the folder you pick for that. We don't want user to get access to our whole file system. So for that, we create that object, it's http.FileServer, and we need to specify the root. And for that, we're going to just talk to our http package and we'll ask for a directory.

[00:00:47]
And the directory will be the public folder that we have here, okay? So that's a kind of a handle that will automatically look into the file system for every request to see if the file is there or not. So we don't need to handle this manually like reading the URL, go into the file system, see if it's there or not, because it's a pretty common pattern, okay?

[00:01:12]
You do that directly from the framework. In Node.js, you don't have this automatic thing, for example. You have it in Express.js, in a static thing, but that's the framework, okay? So then we are going to add another handle. And we're going to say that, for the root folder, I will use fs as my handle.

[00:01:34]
But in this case, it's not a function, it's a type. So instead of using HandleFunc, we're going to use just Handle. So there are two ways to handle routes. Here, with sub nukes that we have in Go, we can parse 100 as a function or we can parse a Type that should conform to an interface, remember interfaces?

[00:01:59]
That means that that Type should have a method that at the end is a function. So, okay, and in this case, we're using that version. By the way, can we call more than one time handler, HandlerFunc? Yes, as many as you want. And actually, the system will look to the pattern and we'll pick the first one that matches like most of the routing systems.

[00:02:26]
So now, I run my app again. I go back to Chrome, well, let's open it here. 3333, close the other tabs as well. And if I try Hello, I'm still seeing my handle function. And if I go to the route, I'm getting the Front Team Museum website with the mushy, HTML, CSS, and everything.

[00:02:56]
So pretty simple, right? You just pick the folder and that's all. Do you have any question? Is this server-side rendering? No, this is statically serving a folder. But we can do one more step. If you look at this website, how the website is built, when you look at the HTML, it has a main section and then a couple of articles.

[00:03:26]
So each thing you see on the screen, it's an article, okay? So it's an exhibition in this fake museum. So it's an article, and when you open the article, it's just a couple of HTML. H2, a paragraph, and an image, nothing fancy, okay? Is that in the HTML?

[00:03:43]
So if you look at the page source in the HTML, you only have one article in the HTML. The rest of the articles are actually coming from JavaScript. So it's a client-side render solution. JavaScript is downloading a JSON, and it's parsing the JSON and is injecting HTML on the fly.

[00:04:05]
But that's not so performant, because we need the user has to wait for JavaScript to load to then go and grab a JSON. And then when we have the JSON, it needs to generate that HTML dynamically. So that's bad for performance. And if you're interested in why that's bad for performance, you can check the other course that I have here at Frontend Masters, Advanced Web Performance.

[00:04:34]
But now, we are setting that this is bad for performance, so we can do server-side rendering. That is, maybe we can actually inject in the HTML all the articles directly from an aesthetic collection that you have somewhere. It can be a database, a JSON, whatever. Makes sense? So I want to create all these articles server-side, so the browser will receive just HTML.

[00:05:03]
We can even get rid of JavaScript at all. So we can get rid of the script.js and see the same thing on the screen.