1 00:00:01,210 --> 00:00:02,310 ‫Let's now learn 2 00:00:02,310 --> 00:00:05,453 ‫how to serve static files with Express. 3 00:00:06,960 --> 00:00:10,060 ‫Now what do I actually mean with static files? 4 00:00:10,060 --> 00:00:13,710 ‫Well, it's the files that are sitting in our file system 5 00:00:13,710 --> 00:00:16,810 ‫that we currently cannot access using all routes. 6 00:00:16,810 --> 00:00:20,160 ‫So, for example, we have this overview.html file 7 00:00:20,160 --> 00:00:21,850 ‫here in our public folder. 8 00:00:21,850 --> 00:00:25,000 ‫But right now there's no way that we can access this 9 00:00:25,000 --> 00:00:26,700 ‫using a browser, right? 10 00:00:26,700 --> 00:00:29,630 ‫And the same for these image files that we have here, 11 00:00:29,630 --> 00:00:32,500 ‫or the CSS or the Javascript files. 12 00:00:32,500 --> 00:00:34,770 ‫So let me show that to you, 13 00:00:34,770 --> 00:00:37,373 ‫and let me actually use the browser this time. 14 00:00:38,470 --> 00:00:41,060 ‫For now I'm copying this URL here 15 00:00:41,060 --> 00:00:42,700 ‫just to show you that it's gonna work, 16 00:00:42,700 --> 00:00:45,110 ‫obviously also in the browser. 17 00:00:45,110 --> 00:00:48,210 ‫Okay, so this is our unformatted result here, 18 00:00:48,210 --> 00:00:49,460 ‫from the same route. 19 00:00:49,460 --> 00:00:52,716 ‫But let's say that we actually want to access that HTML file 20 00:00:52,716 --> 00:00:54,570 ‫that I was just talking about. 21 00:00:54,570 --> 00:00:56,700 ‫So we can, of course, not just write 22 00:00:57,770 --> 00:00:59,943 ‫public and then, for example, 23 00:01:01,730 --> 00:01:03,670 ‫overview.html, right? 24 00:01:03,670 --> 00:01:06,197 ‫There's no way we can access this right now. 25 00:01:06,197 --> 00:01:09,500 ‫And that's simply because we didn't define any route 26 00:01:09,500 --> 00:01:11,850 ‫for this URL, right? 27 00:01:11,850 --> 00:01:16,333 ‫We do not have any handler that is associated to this route. 28 00:01:17,450 --> 00:01:19,780 ‫And so, if we actually want to access something 29 00:01:19,780 --> 00:01:21,460 ‫from our file system, 30 00:01:21,460 --> 00:01:24,043 ‫we need to use a built-in Express middleware. 31 00:01:25,740 --> 00:01:28,120 ‫So let me now show you how we can do that. 32 00:01:28,120 --> 00:01:31,603 ‫For example, after this one. 33 00:01:34,190 --> 00:01:38,110 ‫Now in this section we're actually just talking about an API 34 00:01:38,110 --> 00:01:41,140 ‫so we don't actually need to serve static files 35 00:01:41,140 --> 00:01:44,660 ‫like images or HTML, so what I just showed you. 36 00:01:44,660 --> 00:01:46,590 ‫But since this section is an introduction 37 00:01:46,590 --> 00:01:48,350 ‫to Express in general, 38 00:01:48,350 --> 00:01:52,253 ‫I also wanted to quickly show this content to you anyway. 39 00:01:53,330 --> 00:01:56,360 ‫So, as I was saying, all we have to do is 40 00:01:56,360 --> 00:01:59,380 ‫to use a simple built-in middleware 41 00:01:59,380 --> 00:02:01,090 ‫that goes like this. 42 00:02:01,090 --> 00:02:05,160 ‫Express dot static, because we wanna serve static files, 43 00:02:05,160 --> 00:02:07,500 ‫so this is an obvious name for that. 44 00:02:07,500 --> 00:02:10,170 ‫And so in here we pass the directory 45 00:02:10,170 --> 00:02:12,490 ‫from which we want to serve static files. 46 00:02:12,490 --> 00:02:15,200 ‫And in this case, I'm gonna use the public directory. 47 00:02:15,200 --> 00:02:18,910 ‫So this folder here where we have these HTML files, okay? 48 00:02:18,910 --> 00:02:21,490 ‫And actually let's use a template string here 49 00:02:21,490 --> 00:02:26,490 ‫so that I can go ahead and use the dirname variable, 50 00:02:26,520 --> 00:02:30,470 ‫then slash and public. 51 00:02:30,470 --> 00:02:33,214 ‫Give it a save and go back to the browser. 52 00:02:33,214 --> 00:02:37,130 ‫Then we will be able to open this overview.html. 53 00:02:37,130 --> 00:02:40,200 ‫Now it's not going to work in this URL here. 54 00:02:40,200 --> 00:02:42,540 ‫It actually has to be like this. 55 00:02:42,540 --> 00:02:46,290 ‫So without the public, just /overview.html. 56 00:02:46,290 --> 00:02:48,650 ‫So let's see, and it actually works. 57 00:02:48,650 --> 00:02:49,483 ‫Okay. 58 00:02:49,483 --> 00:02:50,430 ‫Now, why is that? 59 00:02:50,430 --> 00:02:53,700 ‫Why don't we need the public folder here in the URL? 60 00:02:53,700 --> 00:02:56,650 ‫Well, simply because when we open up a URL 61 00:02:56,650 --> 00:02:58,780 ‫that it can't find in any of our routes, 62 00:02:58,780 --> 00:03:02,480 ‫it will then look in that public folder that we defined. 63 00:03:02,480 --> 00:03:05,620 ‫And it sets that folder to the root. 64 00:03:05,620 --> 00:03:08,210 ‫Okay, so let's pretend that the root 65 00:03:08,210 --> 00:03:09,730 ‫is now our public folder. 66 00:03:09,730 --> 00:03:12,740 ‫So this here, and then the overview is in there. 67 00:03:12,740 --> 00:03:15,003 ‫And so that's why we have done access to it. 68 00:03:16,020 --> 00:03:18,530 ‫So in there we also have images, for example. 69 00:03:18,530 --> 00:03:23,530 ‫Let's say we wanna open image and then this pin here. 70 00:03:23,640 --> 00:03:25,053 ‫And we can do that. 71 00:03:26,980 --> 00:03:27,853 ‫So image, 72 00:03:29,620 --> 00:03:33,200 ‫pin png, and so here we go. 73 00:03:33,200 --> 00:03:34,490 ‫Here is the image. 74 00:03:34,490 --> 00:03:38,830 ‫Now what we can't do is this, because this is not a file. 75 00:03:38,830 --> 00:03:41,060 ‫This looks like a regular route, 76 00:03:41,060 --> 00:03:44,960 ‫and so Express actually tries to find a route handler 77 00:03:44,960 --> 00:03:47,070 ‫for this one, which it can't 78 00:03:47,070 --> 00:03:49,100 ‫because you didn't define anything. 79 00:03:49,100 --> 00:03:49,933 ‫All right? 80 00:03:49,933 --> 00:03:52,440 ‫So really it just works for static files. 81 00:03:52,440 --> 00:03:56,330 ‫In which case it will, again, not go into a new route, 82 00:03:56,330 --> 00:03:58,790 ‫but simply serve that file that we specified 83 00:03:58,790 --> 00:04:00,280 ‫from the public folder, 84 00:04:00,280 --> 00:04:04,043 ‫or in the folder that we specified here in this middleware. 85 00:04:05,420 --> 00:04:09,480 ‫Now take a look at the console here and see all the requests 86 00:04:09,480 --> 00:04:12,660 ‫that were actually done when we open up that page. 87 00:04:12,660 --> 00:04:15,690 ‫Let's now clear this here just so we see all the requests 88 00:04:15,690 --> 00:04:18,090 ‫that actually just come from that overview page. 89 00:04:19,090 --> 00:04:23,870 ‫So let's write again overview.html here. 90 00:04:23,870 --> 00:04:25,696 ‫And these images here are broken 91 00:04:25,696 --> 00:04:28,810 ‫and that's because this html is not supposed 92 00:04:28,810 --> 00:04:30,720 ‫to be served like this, all right? 93 00:04:30,720 --> 00:04:32,320 ‫I'm just using it now here 94 00:04:32,320 --> 00:04:34,223 ‫so that we get some visual feedback. 95 00:04:35,271 --> 00:04:38,423 ‫I'm not interested at all in the content here. 96 00:04:39,980 --> 00:04:42,800 ‫Now just take a look at all the requests 97 00:04:42,800 --> 00:04:44,950 ‫that were done for all of the assets. 98 00:04:44,950 --> 00:04:46,580 ‫So as I said right in the beginning, 99 00:04:46,580 --> 00:04:49,600 ‫for each piece that is part of the website 100 00:04:49,600 --> 00:04:52,360 ‫our server actually gets a separate request. 101 00:04:52,360 --> 00:04:55,070 ‫And you see here that most of them get this 404. 102 00:04:55,070 --> 00:04:59,260 ‫So that's why the links are then broken on the web page, 103 00:04:59,260 --> 00:05:02,270 ‫well simply because Express cannot find them in this folder. 104 00:05:02,270 --> 00:05:04,090 ‫But again, that's not the point here. 105 00:05:04,090 --> 00:05:05,650 ‫What I just wanted to show you 106 00:05:05,650 --> 00:05:07,496 ‫is how we can serve static files 107 00:05:07,496 --> 00:05:10,806 ‫from a folder and not from a route. 108 00:05:10,806 --> 00:05:11,950 ‫All right. 109 00:05:11,950 --> 00:05:15,840 ‫And so that wraps up the basic introduction to Express. 110 00:05:15,840 --> 00:05:17,300 ‫In the next two videos we will talk 111 00:05:17,300 --> 00:05:19,266 ‫about something called environment variables 112 00:05:19,266 --> 00:05:22,573 ‫and we will also set up ESlint in oral VS code.