1 00:00:06,320 --> 00:00:07,520 Welcome back. 2 00:00:07,550 --> 00:00:13,240 Let's get started with how we can save static files using Node.js. 3 00:00:13,250 --> 00:00:16,309 And to be more specific, Express server. 4 00:00:16,490 --> 00:00:19,040 So back to Visual Studio Code. 5 00:00:19,070 --> 00:00:27,120 I have already created a simple project with Simple Express server and I'll provide this file for you. 6 00:00:27,140 --> 00:00:31,940 But if you want to use your own server, you can go ahead and do that. 7 00:00:31,970 --> 00:00:35,490 So let's look through the code step by step. 8 00:00:35,510 --> 00:00:41,360 We have the first route, we say home route, and it's just saying welcome home. 9 00:00:41,390 --> 00:00:49,280 Likewise, about us is sending about us to the client and outpost sending create post and then get form 10 00:00:49,280 --> 00:00:51,750 sending this text says get form. 11 00:00:51,800 --> 00:00:55,070 And until this point, there is nothing new here. 12 00:00:55,100 --> 00:00:58,420 Well, because we are focusing on saving this file. 13 00:00:58,430 --> 00:01:02,570 That is why I have provided the starter template for you. 14 00:01:02,750 --> 00:01:10,730 So the cool thing here is that inside the folders you can see that we have a folder called public and 15 00:01:10,730 --> 00:01:13,170 inside we have subfolders. 16 00:01:13,190 --> 00:01:19,290 The first one is CSS with a few lines of CSS and the main CSS also. 17 00:01:19,310 --> 00:01:25,100 And inside the images I have one image called doc dot jpeg. 18 00:01:25,250 --> 00:01:33,290 And for the pages it contains couple of HTML templates about an outpost and then the index. 19 00:01:33,440 --> 00:01:39,400 So the whole logic is that we are going to configure our server to serve these files. 20 00:01:39,410 --> 00:01:41,510 So let's get started. 21 00:01:41,870 --> 00:01:44,840 Make sure that your server is up and running. 22 00:01:44,870 --> 00:01:46,850 And now back to the server. 23 00:01:46,880 --> 00:01:49,760 So how can we save this file? 24 00:01:50,030 --> 00:01:59,000 Well, by default, Express does not allow us to search status files unless we do a little bit configuration 25 00:01:59,000 --> 00:02:01,400 with few lines of code. 26 00:02:01,430 --> 00:02:02,570 So let's see. 27 00:02:02,570 --> 00:02:05,600 The first step is let's give it a beautiful command. 28 00:02:05,600 --> 00:02:06,170 Say it. 29 00:02:06,170 --> 00:02:08,180 Serve static. 30 00:02:10,360 --> 00:02:14,140 Fires from the. 31 00:02:15,690 --> 00:02:17,610 Public fora. 32 00:02:18,120 --> 00:02:25,560 So always have a look at the folder that you want to save, which is the public, which is the parent 33 00:02:25,560 --> 00:02:27,500 of any subfolders. 34 00:02:27,510 --> 00:02:29,220 So we are going to save this one. 35 00:02:29,220 --> 00:02:30,540 How can we do it? 36 00:02:30,570 --> 00:02:33,030 And you are going to use a middleware. 37 00:02:33,150 --> 00:02:35,360 As we discussed in the previous video. 38 00:02:35,370 --> 00:02:45,480 So here we go, we provide app dot use and inside here we are going to use Xpress dot static. 39 00:02:45,750 --> 00:02:53,790 And this one is a function that you pass in the folder that we want to save, which is public. 40 00:02:53,970 --> 00:03:02,880 So now any folders or files inside the folder is being watched or can be saved by our server. 41 00:03:03,270 --> 00:03:08,240 Now that we are done with that, the next step is our routes. 42 00:03:08,250 --> 00:03:09,870 How can we render? 43 00:03:10,170 --> 00:03:17,620 So let's get back to the browser and hit our endpoint 3000 and I see where come home because this is 44 00:03:17,620 --> 00:03:23,340 the port that we use, which is 3000 and at home we are rendering. 45 00:03:23,340 --> 00:03:25,310 This text is welcome. 46 00:03:25,320 --> 00:03:29,940 So what about if we want to add more text into the Ms. We cannot. 47 00:03:29,940 --> 00:03:33,750 That is why Gwendolyn eight pages comes into play. 48 00:03:33,900 --> 00:03:41,130 So now inside the home page here we want to display the index dot html. 49 00:03:41,190 --> 00:03:48,330 If I right click an open left server, let's see, this is a home page that we want to save. 50 00:03:48,480 --> 00:03:51,970 So now how can we do it inside our root? 51 00:03:51,990 --> 00:03:52,980 Here we go. 52 00:03:53,100 --> 00:04:00,270 So back to our roots inside the home root here, Instead of just sending some static text like this 53 00:04:00,270 --> 00:04:04,710 one, we are going to display the HTML page. 54 00:04:05,100 --> 00:04:06,130 So here we go. 55 00:04:06,150 --> 00:04:10,750 Let me give it a beautiful command says Display a HTML page here. 56 00:04:10,770 --> 00:04:12,660 So how are we going to do it? 57 00:04:13,020 --> 00:04:19,649 Express Make it pretty simple by using a method on the response called st file. 58 00:04:19,950 --> 00:04:27,810 Meaning we are sending a file to the client and the file we need to pass in the location of the file. 59 00:04:27,930 --> 00:04:33,750 So how are we going to locate the path of the file we need to save? 60 00:04:34,200 --> 00:04:41,670 Well, it is inside our public and then inside that we have pages folder and after that we have what 61 00:04:41,670 --> 00:04:47,130 is called the index dot HTML, and that is what we want to serve. 62 00:04:47,550 --> 00:04:55,920 So to be able to get into that, unless you provide what is called dir name, that is the parent working 63 00:04:55,950 --> 00:04:56,740 directory. 64 00:04:56,760 --> 00:05:05,370 So if you try to console dot log, the dir name, underscore, underscore dir name, let's see what 65 00:05:05,370 --> 00:05:06,270 we have. 66 00:05:06,300 --> 00:05:11,580 We have talked about the path module before, but don't worry, let's try to revisit. 67 00:05:11,820 --> 00:05:12,240 All right. 68 00:05:12,240 --> 00:05:16,290 I get some error here because for this function I'm not passing anything. 69 00:05:16,290 --> 00:05:17,820 So let me comment that one. 70 00:05:17,820 --> 00:05:23,070 And now let me send again and now back to my terminal. 71 00:05:23,280 --> 00:05:32,540 I see the path to the file and this is the home of my parent working directory, which is this the folder. 72 00:05:32,550 --> 00:05:39,360 And now inside that I want the public pages and then index. 73 00:05:39,360 --> 00:05:40,980 So here we go. 74 00:05:40,980 --> 00:05:43,320 So for the rest dot send file. 75 00:05:43,350 --> 00:05:52,290 First of all, I'll provide the name, underscore, underscore name and then I'm going to contact plus 76 00:05:52,290 --> 00:05:54,390 then here locate the path. 77 00:05:54,390 --> 00:05:58,090 So here I want to go into the public. 78 00:05:58,110 --> 00:06:06,420 So the first step is that first we need to enter into the main folder and from there we also want to 79 00:06:06,420 --> 00:06:07,530 locate a folder. 80 00:06:07,530 --> 00:06:14,610 So from here we go to the public and from public we go to pages and then to the index. 81 00:06:14,700 --> 00:06:15,720 That is a path. 82 00:06:15,720 --> 00:06:23,190 So the first one here represent, underscore, underscore, journey, and then the next folder is this 83 00:06:23,190 --> 00:06:23,550 one. 84 00:06:23,550 --> 00:06:27,150 So let's go ahead and configure it. 85 00:06:27,150 --> 00:06:31,860 So back to the route here, provide public. 86 00:06:32,590 --> 00:06:38,830 For restless pages and for a slash index darts mirror. 87 00:06:38,860 --> 00:06:43,960 Make sure you type the exact name as we see in the folders. 88 00:06:43,990 --> 00:06:46,610 So now let's get back to the browser. 89 00:06:46,630 --> 00:06:48,370 And now let's refresh it. 90 00:06:48,520 --> 00:06:50,590 And I see some error. 91 00:06:50,590 --> 00:06:53,440 Says that the file is not found. 92 00:06:53,470 --> 00:06:58,310 You can see here a not meaning no file or directory found inside that. 93 00:06:58,330 --> 00:07:00,370 So what is the problem? 94 00:07:00,550 --> 00:07:02,260 Let's try to debug that. 95 00:07:02,290 --> 00:07:07,510 The problem here is because we need to provide the forward slash like that. 96 00:07:07,600 --> 00:07:15,160 And we are able to save the images, the CSS, and then the HTML. 97 00:07:15,370 --> 00:07:22,090 So if we try to remove or comment this one if express is going to save those file. 98 00:07:22,100 --> 00:07:30,310 So now let's refresh it and you can see that, well, I'm able to save the HTML, but the asset cannot 99 00:07:30,310 --> 00:07:34,010 be saved unless we tell experts to do that. 100 00:07:34,030 --> 00:07:40,770 So what about if we want to also display the get form? 101 00:07:40,780 --> 00:07:42,460 How are we going to do it? 102 00:07:42,580 --> 00:07:45,670 Well, you can put this video and give it a try. 103 00:07:48,480 --> 00:07:49,140 All right. 104 00:07:49,140 --> 00:07:50,910 I believe we're able to do it. 105 00:07:51,420 --> 00:07:53,910 If not, follow me to paradise. 106 00:07:54,180 --> 00:07:54,600 All right. 107 00:07:54,600 --> 00:07:56,120 So now the same process. 108 00:07:56,130 --> 00:07:57,720 Our copy, this one. 109 00:07:57,960 --> 00:08:01,690 And now inside the is it get form? 110 00:08:01,710 --> 00:08:02,910 Yeah, get form here. 111 00:08:03,360 --> 00:08:05,480 And next is I replace this one. 112 00:08:05,490 --> 00:08:09,860 The difference here is the page, which is the add post. 113 00:08:09,870 --> 00:08:16,380 So here are going to be as add posts and save it. 114 00:08:16,410 --> 00:08:18,150 Now let's refresh it. 115 00:08:18,270 --> 00:08:23,370 And now when I click on add posts where cannot get the post. 116 00:08:23,370 --> 00:08:24,930 What is the problem? 117 00:08:25,260 --> 00:08:28,440 What about if you go to get form? 118 00:08:28,980 --> 00:08:30,800 I think the navigation is wrong. 119 00:08:30,810 --> 00:08:36,370 Let's do it manually and I'll show you how I implement the navigation when I hit send. 120 00:08:36,390 --> 00:08:42,600 Now I have the form because this is a route that renders the form. 121 00:08:42,840 --> 00:08:46,290 So what about the navigation? 122 00:08:46,770 --> 00:08:52,200 For example, if I go to the homepage here we see I have some navigation. 123 00:08:52,200 --> 00:08:53,850 How am I able to do it? 124 00:08:53,850 --> 00:09:00,290 And this really crucial and I will show you how we do navigation inside Node.js. 125 00:09:00,360 --> 00:09:01,020 All right. 126 00:09:01,020 --> 00:09:08,160 So the next point is let's try to render the board as they are about as templates. 127 00:09:08,160 --> 00:09:11,760 So again, we can pause this video and give it a shot. 128 00:09:14,730 --> 00:09:15,620 All right. 129 00:09:15,630 --> 00:09:17,540 I believe we're able to do it. 130 00:09:17,550 --> 00:09:19,650 Otherwise, follow me into paradise. 131 00:09:19,650 --> 00:09:21,270 So I'll copy this one. 132 00:09:21,420 --> 00:09:25,290 And next is inside the about page. 133 00:09:25,290 --> 00:09:30,330 I will replace this one and change this one to about. 134 00:09:30,330 --> 00:09:31,890 And that is save it. 135 00:09:31,890 --> 00:09:40,380 And now if I go to about when I refresh it and I see my about page, I don't want to make this video 136 00:09:40,380 --> 00:09:40,860 long. 137 00:09:40,860 --> 00:09:44,490 So in the next video, let me show you how we can do navigation. 138 00:09:44,490 --> 00:09:47,880 When I click a link, I want to go to a specific route.