1 00:00:00,050 --> 00:00:00,380 All right. 2 00:00:00,380 --> 00:00:02,660 And up next, let's set up the public folder. 3 00:00:02,660 --> 00:00:07,850 And as a result, we'll be able to have some assets that are publicly available. 4 00:00:08,300 --> 00:00:13,460 As a side note, eventually, this is where our front end is going to be located. 5 00:00:13,460 --> 00:00:15,710 So basically, we'll run, build. 6 00:00:16,360 --> 00:00:24,730 In the client in our project, and then we'll transfer the complete project files to a public folder. 7 00:00:24,730 --> 00:00:27,560 And that's going to be the front end of our application. 8 00:00:27,580 --> 00:00:34,060 Now if you have worked with Common JS syntax, you know that actually the setup is very straightforward. 9 00:00:34,090 --> 00:00:37,000 You go with app dot use express static. 10 00:00:37,000 --> 00:00:44,470 So this is a special middleware that essentially makes those assets publicly available and we access 11 00:00:44,470 --> 00:00:48,700 the path and we just provide where the folder is located. 12 00:00:48,730 --> 00:00:55,150 Now since we're using ES6 syntax, we need to do a little bit of acrobatics. 13 00:00:55,150 --> 00:01:01,660 Again, the main idea is exactly the same, but you see by default we have no access to underscore, 14 00:01:01,660 --> 00:01:05,500 underscore, dirname, which essentially just points. 15 00:01:06,120 --> 00:01:11,270 To the current folder because we need to keep in mind that of course there's going to be different environments. 16 00:01:11,280 --> 00:01:16,530 So once we push this up to a production, the environment is going to be different and therefore we 17 00:01:16,530 --> 00:01:18,640 want to use the underscore. 18 00:01:18,660 --> 00:01:24,360 Underscore dirname because that will always point to the current folder and therefore we need to grab 19 00:01:24,360 --> 00:01:25,050 the dirname. 20 00:01:25,050 --> 00:01:28,080 We need to grab the file URL path. 21 00:01:28,110 --> 00:01:29,700 We also need to grab the path. 22 00:01:29,700 --> 00:01:35,460 And then we constructed Dirname first and then we just point to our folder. 23 00:01:35,460 --> 00:01:39,570 So for starters, let's just go to a route and create public folder. 24 00:01:39,570 --> 00:01:41,160 Again, this is very, very important. 25 00:01:41,160 --> 00:01:44,100 Please don't do that in a client or source or whatever. 26 00:01:44,100 --> 00:01:49,230 You want to do that in the root because again, we're back in the server and then in here. 27 00:01:50,160 --> 00:01:55,030 Let's also create a folder where we're going to upload the images. 28 00:01:55,050 --> 00:01:58,020 And in my case, I'm going to call this uploads. 29 00:01:58,110 --> 00:01:59,190 Okay, awesome. 30 00:01:59,190 --> 00:02:04,680 And now let's navigate to a server and let's do these acrobatics. 31 00:02:04,710 --> 00:02:05,980 Let's set up this code. 32 00:02:06,000 --> 00:02:09,870 So effectively we want to do some imports first. 33 00:02:10,080 --> 00:02:12,150 Again, it doesn't really matter where you do that. 34 00:02:12,150 --> 00:02:14,490 I guess I'm going to do that after Routers. 35 00:02:15,150 --> 00:02:17,610 So in here, I'm just going to say public. 36 00:02:18,690 --> 00:02:20,460 And then I'm looking for the Dirname. 37 00:02:22,070 --> 00:02:24,950 So this is coming from the Path module. 38 00:02:24,980 --> 00:02:27,200 Then we also want to grab. 39 00:02:27,920 --> 00:02:31,040 The file URL to path. 40 00:02:32,100 --> 00:02:34,320 File URL to path this one over here. 41 00:02:34,320 --> 00:02:37,980 So this is coming from the URL and then we have the path. 42 00:02:38,070 --> 00:02:40,740 So this is the entire path module. 43 00:02:41,210 --> 00:02:43,520 So we just go here with path as a side note. 44 00:02:43,550 --> 00:02:46,010 Of course we can combine them here as well if you want. 45 00:02:46,010 --> 00:02:49,040 So we can go with import path comma and then the name. 46 00:02:49,040 --> 00:02:56,450 But I'll just leave as two separate imports and I guess right above the Morgan middleware. 47 00:02:56,480 --> 00:02:58,730 Let's construct first a dirname. 48 00:02:58,730 --> 00:03:01,670 So underscore underscore Dirname. 49 00:03:02,210 --> 00:03:05,840 Then we want to go with our dirname method. 50 00:03:05,870 --> 00:03:11,480 We want to provide file URL to path and then import meta and URL. 51 00:03:11,480 --> 00:03:12,470 So that's the syntax. 52 00:03:12,470 --> 00:03:20,120 Again, with ES6 modules with Commonjs, we don't need to do such acrobatics and then we're just going 53 00:03:20,120 --> 00:03:21,830 to go with App.use. 54 00:03:22,250 --> 00:03:25,940 Then we're looking for express dot static. 55 00:03:25,940 --> 00:03:30,500 So this is a special middleware which again is available by default. 56 00:03:30,500 --> 00:03:37,640 With Express, we want to provide path dot resolve and in there we first want to provide the dirname. 57 00:03:38,420 --> 00:03:40,100 Then forward slash where? 58 00:03:40,100 --> 00:03:40,570 I'm sorry. 59 00:03:40,580 --> 00:03:41,410 Then comma. 60 00:03:41,420 --> 00:03:45,010 And then I want to point to a public folder. 61 00:03:45,020 --> 00:03:45,710 And you know what? 62 00:03:45,710 --> 00:03:51,380 I actually will move it below the Morgan middleware. 63 00:03:51,380 --> 00:03:54,950 So let me set it up over here and let me just try it out. 64 00:03:54,950 --> 00:03:58,340 So essentially I want to go back to my desktop. 65 00:03:59,630 --> 00:04:03,680 Notice this is going to be somewhere in my public notice. 66 00:04:03,680 --> 00:04:06,980 This one over here, and I'm not going to place it in uploads. 67 00:04:07,690 --> 00:04:09,970 We're going to utilize it a little bit later. 68 00:04:09,970 --> 00:04:12,820 For now, let me just grab this one over here. 69 00:04:13,150 --> 00:04:20,680 So once I have the image in the public, since I have implemented my middleware, I can actually go 70 00:04:20,680 --> 00:04:28,440 to a browser, close this one, and if I'm going to go with localhost, not 5173. 71 00:04:28,450 --> 00:04:33,190 So remember, server is on 5100. 72 00:04:33,190 --> 00:04:41,890 And then if I'll provide the name of the image, which in my case is Avatar two and then the extension. 73 00:04:41,890 --> 00:04:48,100 So let's try it out, Avatar two, and then we're looking for Web B, check it out. 74 00:04:48,130 --> 00:04:52,480 So this is one of the assets that is publicly available. 75 00:04:52,480 --> 00:04:57,430 And like I said, eventually this is where our front end is going to be located. 76 00:04:57,460 --> 00:05:03,850 Now, in our case, the reason why we set up the public is because we will utilize the uploads. 77 00:05:03,850 --> 00:05:10,970 So when we upload the image from our application from the front end, this is where we will temporarily 78 00:05:11,000 --> 00:05:13,160 store that image.