WEBVTT 00:06.170 --> 00:13.010 In this video you're going to get the path name and then decoded and converted to a full static path 00:13.430 --> 00:16.560 which you will search inside your static folder. 00:16.610 --> 00:19.230 So let's start by getting the path name. 00:19.610 --> 00:26.610 So to get the path name you will need to get the RL first and then extract the path name from there. 00:26.660 --> 00:29.880 So you are l can be found inside the request object. 00:29.900 --> 00:36.430 So if you can so the log request that you are. 00:36.620 --> 00:38.330 This is where you can find your. 00:38.330 --> 00:43.880 You are able now to guess the path name we will need to pass this. 00:43.880 --> 00:44.550 You are. 00:45.050 --> 00:50.160 So let's check first was our your URL is. 00:50.560 --> 00:52.330 So you've got two requests here. 00:52.430 --> 00:56.270 The normal one but we expect and the Oracle here is forward slash. 00:56.600 --> 00:59.510 And the second request for the file we can file. 01:00.020 --> 01:02.480 So other moments we are in local host. 01:02.480 --> 01:05.400 That's why you see the URL like this. 01:05.570 --> 01:10.270 Now if you want steep path name let's 01:12.800 --> 01:16.310 pass the url. 01:16.610 --> 01:23.450 So instead of request those URL we're gonna use you URL dot pass of requests those url. 01:23.510 --> 01:26.770 So we're using the oral model as we used before. 01:26.780 --> 01:33.180 So we need to require this module here 01:36.960 --> 01:39.960 by requiring you oral. 01:40.540 --> 01:48.680 So now let's save and relaunch our app and here we go. 01:48.740 --> 01:54.910 Or the first request that our your URL or past your honor. 01:55.340 --> 02:01.180 And you can see the path name right then that's our set second request and you can see the Pi the the 02:01.200 --> 02:03.190 path name right there. 02:03.500 --> 02:03.730 Okay. 02:03.740 --> 02:11.480 So now to guess the path name we just need to guess the path named property of those objects. 02:11.480 --> 02:23.670 Now just an extra thing to bear in mind this method can take an extra parameter which is a billion false 02:23.730 --> 02:25.700 or two by default. 02:25.740 --> 02:33.630 It's false and this will help you if you want to manipulate the query which is attached to your U.R.L.. 02:33.660 --> 02:43.170 So at the moment we don't have any query there but if we add a query like name equals John for example 02:45.080 --> 02:50.610 then the query is gonna be right there and you're getting a string. 02:50.660 --> 03:00.640 Now if you says this to true instead of the default value which is false and you try this again then 03:00.640 --> 03:06.480 your query property is going to be returned as an object which is easier to manipulate. 03:06.580 --> 03:08.540 And this is just something to remember. 03:08.620 --> 03:11.320 So you can leave it like that or just delete it. 03:12.060 --> 03:12.310 Okay. 03:12.310 --> 03:21.580 So now to guess the path name we want this dot partly so let's make sure that we've got everything right 03:23.790 --> 03:26.680 so that's the correct path named for our requests. 03:26.700 --> 03:28.720 Let's see if we can pardon me. 03:28.810 --> 03:29.480 Okay. 03:29.490 --> 03:34.570 So we're gonna store this inside a variable I'm going to call name 03:37.320 --> 03:37.870 okay. 03:37.890 --> 03:42.240 And just to stop this requests in the future 03:45.520 --> 03:51.820 well the request is still gonna be there but we will just say that if the path name is advance then 03:51.880 --> 03:53.120 we're not going to continue to Kate. 03:53.290 --> 04:03.580 So if we call on those Iko just stop so if the path name equals 04:06.250 --> 04:12.880 what we call in those Iko just return false for example or just return if you like. 04:13.110 --> 04:16.260 Right now let's console dots along the path name 04:21.210 --> 04:26.730 and let's see what we get okay. 04:26.780 --> 04:33.160 Now we can see only the path name corresponding to our normal requests. 04:33.880 --> 04:34.240 Okay. 04:34.270 --> 04:39.170 So let's try something else. 04:39.270 --> 04:40.440 Here you go. 04:40.440 --> 04:42.990 Perfect. 04:42.990 --> 04:47.760 Now the next step is to decode our our path name. 04:48.060 --> 04:51.650 So why would you need to decode your path name. 04:51.660 --> 04:52.350 So let's have a look. 04:52.350 --> 04:58.140 As one example where the path name is something 05:00.680 --> 05:01.280 like 05:06.780 --> 05:12.600 this for example so let's try that path name and see once we get 05:15.620 --> 05:15.940 okay. 05:15.970 --> 05:18.500 So let's try that. 05:18.550 --> 05:21.880 So this is what you get for the path name. 05:22.000 --> 05:33.520 Now if you try later on to convert this to a full static path and look for a folder like this on your 05:33.520 --> 05:41.110 computer then your computer is not gonna be able to recognize these percentages like this. 05:41.350 --> 05:48.880 Now you will really need to decode this path names so that's it's understandable by your server or your 05:48.880 --> 05:50.030 computer. 05:50.170 --> 05:55.450 So to do this you will need a function 06:01.090 --> 06:06.740 called decode your eye components. 06:07.120 --> 06:17.440 So this function will decode a your components which is previously created by encode. 06:17.470 --> 06:19.050 You are a component. 06:20.440 --> 06:27.160 This applies to this kind of patterning or this kind of string. 06:28.230 --> 06:32.300 So let's go ahead and use this. 06:32.310 --> 06:43.620 Function and apply it to our path name and see what we get. 06:43.720 --> 06:44.040 Okay. 06:44.050 --> 06:45.370 So here we go. 06:45.370 --> 06:47.190 So that's the original path name. 06:47.330 --> 06:50.660 And this is the decoded one which makes more sense. 06:50.800 --> 06:52.780 Our computer. 06:52.780 --> 06:58.850 Now we will need to change the value of the path named variable to this new value. 06:58.930 --> 06:59.440 Okay. 06:59.560 --> 07:00.970 So we going to set a path. 07:00.970 --> 07:06.020 Name equals the new value like that. 07:06.040 --> 07:13.810 Now just bear in mind that we used the concepts at the beginning and now since we're changing the variable 07:14.050 --> 07:14.910 we need to use. 07:14.950 --> 07:16.580 Let's. 07:16.840 --> 07:17.850 Okay. 07:18.100 --> 07:25.840 Now the next step is to guess the corresponding full static path located in our static wallet. 07:26.470 --> 07:26.980 So 07:29.780 --> 07:38.660 for this example here we're going to looking we're gonna be looking for this path inside the for the 07:38.780 --> 07:39.950 static. 07:39.950 --> 07:40.400 Okay. 07:40.550 --> 07:47.930 So we're gonna guess the full static path of the static for that first and then we can R2 it's the pathway 07:47.990 --> 07:51.820 like that's so let's go ahead and do this. 07:51.820 --> 08:02.690 So first of all we need the full static path of this for the static so to get that's let's create a 08:02.750 --> 08:12.880 variable on the top for our static vs path and call it static Bayes path. 08:13.660 --> 08:18.710 So inside this variable we're gonna store the full path of these task folder. 08:18.860 --> 08:28.440 So first we need to get the current path of our current file respond those chairs. 08:28.470 --> 08:39.150 So let's try this so I'm going to console the log a global variable which is called their name and let's 08:39.150 --> 08:44.080 see what we get. 08:44.310 --> 08:52.000 Okay so this is the for static path of our current file respond. 08:52.020 --> 08:57.740 Logic is but we aren't interested in the static folder which is located 09:00.380 --> 09:00.920 right there. 09:00.950 --> 09:06.080 So we need to go up one folder then access our static folder. 09:06.710 --> 09:15.020 Now to do that we're going to need the path module the path module has got a very useful method for 09:15.020 --> 09:18.100 that which is the joint method. 09:18.440 --> 09:21.090 So what you do is 09:26.870 --> 09:27.560 you join 09:30.590 --> 09:40.220 several chunks so it starts with ideal name variable and then we're gonna go up one folder using the 09:40.220 --> 09:47.660 two adults and then we're gonna go to these toxic folder like that's 09:51.550 --> 09:52.590 so if you try this 09:57.920 --> 10:10.400 one area because we haven't included our path in the modules. 10:11.230 --> 10:12.050 Okay. 10:12.120 --> 10:21.050 And let's try now so you can see that now you're getting the correct full static path of our static 10:21.050 --> 10:21.510 folder. 10:22.390 --> 10:28.360 Okay perfect so this is the correct value we are looking for. 10:28.780 --> 10:36.270 So let's set our variable static based path to this one. 10:36.530 --> 10:46.520 Okay so now we have caused the static base path and we are ready to build the full static path of our 10:46.520 --> 10:56.310 folder or requested for that or file using that variable so to do that we're going to join 11:02.790 --> 11:14.480 the for static path or stunt or static based path with the path me like that's so let's console that 11:14.490 --> 11:27.290 like this and see what we get. 11:27.450 --> 11:37.770 OK so this is the four paths we are getting and it starts with the false static path of the static folder 11:38.160 --> 11:44.470 and then the path name which we extracted from the request. 11:44.670 --> 11:46.550 And this is exactly what we needed. 11:46.770 --> 11:52.770 Okay so let's store this inside a variable which we'll call 11:55.450 --> 11:57.060 for static 12:02.870 --> 12:04.020 for we continue. 12:04.020 --> 12:07.840 Let's learn a bit more about the node path module. 12:07.950 --> 12:16.680 So I'm going to create a folder and call it playground. 12:16.790 --> 12:27.200 We're going gonna play a little bit with some code so let's call this one path those chairs and let's 12:27.200 --> 12:29.240 require the path module 12:36.380 --> 12:47.600 so you know how to use path both join to join two folders or two paths. 12:47.630 --> 13:01.090 So for example if I join node and something else like projects one then if I run this 13:08.450 --> 13:10.800 I get node for large projects one. 13:11.190 --> 13:11.410 Okay. 13:11.420 --> 13:17.950 So this will concatenate the two parts in a very easy way. 13:17.960 --> 13:24.410 Now you can also try another method which is very useful as well called normalize. 13:24.440 --> 13:29.150 So if you use path dot normalize and you apply it to something like 13:32.830 --> 13:34.630 a folder like this one 13:39.780 --> 13:40.370 OK. 13:40.370 --> 13:40.850 So 13:46.870 --> 13:53.310 for instance so basically what we're doing here we're going up one folder then we're going up another 13:53.310 --> 14:00.480 folder then we're going to node then we're going up one folder again and then we're going to built in 14:00.570 --> 14:02.430 modules efforts. 14:02.430 --> 14:09.390 So what normalize is going to do is going to convert your input to the shortest path that leads to the 14:09.390 --> 14:11.820 same destination. 14:11.820 --> 14:13.110 So it's gonna be a lot easier. 14:13.410 --> 14:24.430 So let's try this and this is where you get so that is the same as dance in a shorter way. 14:24.480 --> 14:29.100 Now let's try another method which is resolved. 14:29.190 --> 14:34.350 So if you try path dot resolve applied to 14:38.810 --> 14:46.350 let's say go back one for the and again let's use the same one actually 14:50.590 --> 14:54.840 so let's see what we get. 14:55.540 --> 15:04.840 So basically what he's doing it's actually returning the full destination of the path in your system. 15:04.840 --> 15:13.260 So in my case it's returning this path which is tossing from the root directory of my computer. 15:13.260 --> 15:13.560 Okay. 15:16.250 --> 15:22.700 So hopefully this gave you an idea about the path module and I believe this is a good way to learn things 15:23.570 --> 15:24.770 when you need them. 15:24.770 --> 15:26.930 So now let's go back to our projects 15:31.070 --> 15:40.160 and the next step is to search the for static path inside our static folder and see if we can find anything 15:40.240 --> 15:41.890 there. 15:42.050 --> 15:49.650 Now before I continue I'm going to install a third party module only for development purposes. 15:49.760 --> 15:55.220 Now as we agreed we will use only node modules for our up. 15:55.560 --> 16:00.030 But here we are just installing something just for our own development. 16:00.080 --> 16:02.370 And there's gonna be Node 1. 16:02.480 --> 16:08.960 Now as you noticed every time I had to restart the app whenever I made changes. 16:08.960 --> 16:11.540 Now there is a good tool to avoid that. 16:11.540 --> 16:13.070 It's called Node one. 16:13.070 --> 16:26.610 So if you go to Google and you just look for NPM Node 1 and then go to that link then this is the Web 16:26.620 --> 16:31.050 page of these two. 16:31.120 --> 16:39.130 Now NPM will help us manage third party modules which you can use with note. 16:39.130 --> 16:44.670 Now this is gonna be covered later on in detail but for now let's just install this one and use it. 16:44.860 --> 16:47.110 So the installation is pretty easy. 16:47.110 --> 16:54.250 We're gonna need to install this globally in our system okay so that we can use it on any project. 16:54.460 --> 17:05.000 So to do that you just copy that comment and this will install the two globally on your system. 17:05.020 --> 17:13.500 So now let's wait for it to get installed. 17:13.520 --> 17:18.240 Now if you get an error like this this means thus you are not locked in US routes. 17:18.380 --> 17:24.140 So I'm going to use sudo and run the command again. 17:24.310 --> 17:25.950 He's going to ask me for my password. 17:27.980 --> 17:32.950 So let's try again and this time it works. 17:33.010 --> 17:33.520 Okay. 17:33.580 --> 17:42.910 So now I'm going to run the app using nude in so instead of node and you will see that whenever I make 17:42.910 --> 17:47.960 a change to the app for example if 17:55.400 --> 17:55.880 it's a 17:59.570 --> 18:07.300 make a change in the and then I try but then you can see the changes applied immediately. 18:07.300 --> 18:10.020 So I didn't have to restart the app manually. 18:10.030 --> 18:11.480 No one does that for us. 18:11.830 --> 18:23.470 Okay so let's go to our next step which is to check if the full site static path corresponds to something 18:23.500 --> 18:25.290 inside the static folder. 18:25.280 --> 18:36.130 So to do this you can use the method exists sync of the FS module so we gonna do this synchronicity 18:37.190 --> 18:44.640 because we want to wait for the outputs before we can execute any coming code. 18:44.930 --> 18:48.760 So this will be applied to the full static path. 18:48.770 --> 18:51.050 Let's not forget to include f s 18:53.750 --> 18:54.720 okay. 18:54.880 --> 18:59.890 And now this will return true or false. 18:59.890 --> 19:08.990 So we're gonna check if the opposite s or that's meaning that's it doesn't exist then we'll just log 19:09.320 --> 19:14.470 something like this does not exist. 19:14.720 --> 19:24.990 Then I'm going to delete dance from there and copy it right there and send 4 0 4 file not found. 19:25.010 --> 19:26.750 Let's add and else statements 19:30.220 --> 19:32.930 saying file found for now. 19:35.210 --> 19:36.740 OK so let's try. 19:38.400 --> 19:44.550 OK so it seems that the file is found and if we try something not their file not find perfect the next 19:44.550 --> 19:49.140 video you're going to check is whatever you found is actually a file or a directory.