‫Let's now learn
‫how to serve static files with Express.
‫Now what do I actually mean with static files?
‫Well, it's the files that are sitting in our file system
‫that we currently cannot access using all routes.
‫So, for example, we have this overview.html file
‫here in our public folder.
‫But right now there's no way that we can access this
‫using a browser, right?
‫And the same for these image files that we have here,
‫or the CSS or the Javascript files.
‫So let me show that to you,
‫and let me actually use the browser this time.
‫For now I'm copying this URL here
‫just to show you that it's gonna work,
‫obviously also in the browser.
‫Okay, so this is our unformatted result here,
‫from the same route.
‫But let's say that we actually want to access that HTML file
‫that I was just talking about.
‫So we can, of course, not just write
‫public and then, for example,
‫overview.html, right?
‫There's no way we can access this right now.
‫And that's simply because we didn't define any route
‫for this URL, right?
‫We do not have any handler that is associated to this route.
‫And so, if we actually want to access something
‫from our file system,
‫we need to use a built-in Express middleware.
‫So let me now show you how we can do that.
‫For example, after this one.
‫Now in this section we're actually just talking about an API
‫so we don't actually need to serve static files
‫like images or HTML, so what I just showed you.
‫But since this section is an introduction
‫to Express in general,
‫I also wanted to quickly show this content to you anyway.
‫So, as I was saying, all we have to do is
‫to use a simple built-in middleware
‫that goes like this.
‫Express dot static, because we wanna serve static files,
‫so this is an obvious name for that.
‫And so in here we pass the directory
‫from which we want to serve static files.
‫And in this case, I'm gonna use the public directory.
‫So this folder here where we have these HTML files, okay?
‫And actually let's use a template string here
‫so that I can go ahead and use the dirname variable,
‫then slash and public.
‫Give it a save and go back to the browser.
‫Then we will be able to open this overview.html.
‫Now it's not going to work in this URL here.
‫It actually has to be like this.
‫So without the public, just /overview.html.
‫So let's see, and it actually works.
‫Okay.
‫Now, why is that?
‫Why don't we need the public folder here in the URL?
‫Well, simply because when we open up a URL
‫that it can't find in any of our routes,
‫it will then look in that public folder that we defined.
‫And it sets that folder to the root.
‫Okay, so let's pretend that the root
‫is now our public folder.
‫So this here, and then the overview is in there.
‫And so that's why we have done access to it.
‫So in there we also have images, for example.
‫Let's say we wanna open image and then this pin here.
‫And we can do that.
‫So image,
‫pin png, and so here we go.
‫Here is the image.
‫Now what we can't do is this, because this is not a file.
‫This looks like a regular route,
‫and so Express actually tries to find a route handler
‫for this one, which it can't
‫because you didn't define anything.
‫All right?
‫So really it just works for static files.
‫In which case it will, again, not go into a new route,
‫but simply serve that file that we specified
‫from the public folder,
‫or in the folder that we specified here in this middleware.
‫Now take a look at the console here and see all the requests
‫that were actually done when we open up that page.
‫Let's now clear this here just so we see all the requests
‫that actually just come from that overview page.
‫So let's write again overview.html here.
‫And these images here are broken
‫and that's because this html is not supposed
‫to be served like this, all right?
‫I'm just using it now here
‫so that we get some visual feedback.
‫I'm not interested at all in the content here.
‫Now just take a look at all the requests
‫that were done for all of the assets.
‫So as I said right in the beginning,
‫for each piece that is part of the website
‫our server actually gets a separate request.
‫And you see here that most of them get this 404.
‫So that's why the links are then broken on the web page,
‫well simply because Express cannot find them in this folder.
‫But again, that's not the point here.
‫What I just wanted to show you
‫is how we can serve static files
‫from a folder and not from a route.
‫All right.
‫And so that wraps up the basic introduction to Express.
‫In the next two videos we will talk
‫about something called environment variables
‫and we will also set up ESlint in oral VS code.