WEBVTT 00:06.150 --> 00:13.350 In this video you're going to write code in the scenario where what you've found is a directory. 00:13.350 --> 00:17.070 So first of all list delete our else statements. 00:17.070 --> 00:24.870 So whatever comes after this chunk of code will be executed if our file or our full static path corresponds 00:24.870 --> 00:26.900 to something that exists. 00:26.910 --> 00:32.310 So now we found something and we want to check if it is a directory first. 00:32.640 --> 00:35.290 So what you need to do. 00:36.060 --> 00:42.740 You can use a very useful method of s called l stats. 00:42.890 --> 00:50.210 And are we going to use the sync version because we want to execute this code and wait for the outputs 00:50.430 --> 00:51.420 before we move on. 00:52.170 --> 01:00.010 So we will apply this method to our full static path. 01:00.270 --> 01:09.780 So FS is already included in our more node modules so we're fine with that so let's see what this will 01:09.780 --> 01:10.950 return to us 01:17.210 --> 01:25.700 if I try this. 01:25.760 --> 01:34.590 Now you can see that the app has crashed and that's because this path does not exist. 01:34.610 --> 01:34.960 Okay. 01:34.970 --> 01:42.800 But we wrote some code which will destroy this into our Web page and then send a response. 01:42.800 --> 01:43.670 Dots end. 01:43.700 --> 01:52.080 Well unfortunately this will not stop your code from executing you will still execute the coming code. 01:52.080 --> 01:55.950 So to avoid this you can OD return false. 01:56.600 --> 01:57.470 So if you do that 02:05.810 --> 02:09.340 and you try then this should be fine. 02:10.700 --> 02:10.970 Okay. 02:10.980 --> 02:14.520 And it just says that this does not exist. 02:14.610 --> 02:14.930 Okay. 02:16.500 --> 02:18.530 And the app doesn't crush much. 02:18.570 --> 02:22.580 Even though you do this it's still not safe to do it this way. 02:22.680 --> 02:31.430 You still need to handle errors whenever you use a sync version of these methods. 02:31.710 --> 02:39.800 So to do that you can use a try and cache catch statements like that. 02:40.740 --> 02:51.650 And if you get an error you just console that log something like l starts sync error and then you print 02:51.980 --> 02:52.520 your error 02:56.220 --> 02:57.530 okay. 03:10.710 --> 03:18.390 Save if we try again we get only the first log. 03:18.450 --> 03:19.890 Perfect. 03:19.980 --> 03:23.770 Now let's try with a location that does exist. 03:23.970 --> 03:28.380 So I'm going to try projects for example for large projects 03:31.470 --> 03:32.200 OK. 03:32.350 --> 03:36.160 So this is the starts objects. 03:36.160 --> 03:48.310 So it contains many properties about the path so one of those properties is the size the last modified 03:48.400 --> 03:56.980 time in milliseconds so this corresponds to the Unix time version which you can obviously convert to 03:57.040 --> 04:02.930 a human readable format okay. 04:03.580 --> 04:12.810 That's another format of the modified or last modified time as the first time as well. 04:14.710 --> 04:28.090 So to check if the corresponding path is a directory you can use a method of start or the outputs of 04:28.180 --> 04:32.860 F has l start sync which is called is directory. 04:32.980 --> 04:43.440 So what we gonna do we gonna store the outputs of this inside a variable so let's call it starts 04:47.390 --> 04:56.700 and I'm going to define it are the top comments just for scope reasons. 04:57.080 --> 04:58.270 Then let's try 05:02.920 --> 05:04.530 console Dot. 05:04.570 --> 05:11.210 Log starts is directory and let's see what we get. 05:16.640 --> 05:25.450 So we get true and it's because thus is a directory and we're not sending any data. 05:25.450 --> 05:27.020 That's why you see this. 05:27.190 --> 05:42.230 So instead of console log I could try response those rights and then response dots and this time we 05:42.250 --> 05:43.620 get that printed 05:46.420 --> 05:48.190 on the web page but it doesn't work. 05:48.290 --> 05:57.010 And just because we passed a boolean to our rights method okay and concedes there. 05:57.170 --> 06:01.820 So you can only pass a arguments of type String or buffer. 06:01.820 --> 06:04.190 So let's convert this to a string 06:07.240 --> 06:11.030 like balance so let's try okay. 06:11.050 --> 06:21.160 And we get true meaning that we re getting a directory okay and just a quick change the variable here 06:21.190 --> 06:23.000 should be called stunts. 06:23.110 --> 06:27.940 Basically the code still works because it's considered this as a global variable because we started 06:27.940 --> 06:35.870 using it without using Let's var or anything else series considered as a global variable. 06:36.050 --> 06:37.280 So it still works. 06:37.280 --> 06:37.930 Okay. 06:38.120 --> 06:46.790 So the next step now is to get our contents from our templates and then update the templates with the 06:46.790 --> 06:50.460 correct title breadcrumb and table rows. 06:51.170 --> 06:55.760 So let's start by getting the content from the template. 06:58.140 --> 07:02.620 So for now I'm going to write and if statements 07:05.390 --> 07:09.150 for the starts is directory output 07:17.880 --> 07:24.950 if starts is the rectory we're going to execute the following code 07:27.720 --> 07:30.440 which is this 07:37.660 --> 07:37.910 okay. 07:37.920 --> 07:40.050 So let's get the contents. 07:40.200 --> 07:46.500 So let's see where our file is located so it's inside. 07:46.520 --> 07:52.950 Static projects files so to get the contents. 07:52.950 --> 07:57.150 We're going to read this file so let's go ahead and do this. 07:58.630 --> 08:06.100 So I'm going gonna create a variable data which obviously is going to change later so I'm going to use 08:06.130 --> 08:14.650 less instead of const and we're going to set it to the outputs of the Read file function. 08:14.650 --> 08:21.570 So we gonna use read file sync just to make sure that we wait for the outputs before executing any common 08:21.570 --> 08:22.970 code. 08:23.010 --> 08:25.380 So now we need to read this file. 08:25.380 --> 08:29.520 So we need to guess the correct location of that file. 08:29.520 --> 08:36.720 So what you can do you can use these static Bayes path which is the path of the static folder and then 08:36.780 --> 08:42.210 add to that project's files for this large index was a schedule. 08:42.310 --> 08:42.920 OK. 08:43.020 --> 08:55.380 So to do this you can use path and those join of the static base path and projects files or slash index 08:55.380 --> 09:02.400 those Ishmael and we're going to use the UTF encoding. 09:02.400 --> 09:03.930 So you really need need this. 09:03.960 --> 09:06.000 Otherwise it's not going to work. 09:06.030 --> 09:06.710 OK. 09:06.780 --> 09:10.650 So that's our data from the templates. 09:11.160 --> 09:21.620 Now to start you can just return this content and princes are the on the beach so to do that. 09:21.630 --> 09:26.400 Let's just try this so response. 09:26.450 --> 09:27.680 That's right. 09:27.830 --> 09:39.100 Data and then response dot and you can also set the stage is code if you like in the head is a response 09:39.140 --> 09:47.720 those stages code equals to hundreds so let's try this. 09:47.820 --> 09:49.880 And here we go. 09:49.880 --> 09:51.750 So this is our templates. 09:51.750 --> 09:54.450 All right. 09:54.880 --> 09:57.550 You don't see any decoration other the moments. 09:57.630 --> 10:03.230 And that's because if you go to the page source that's USGS has file. 10:03.660 --> 10:12.500 If you click on that file it says file not found and even if we found it we still don't know how to 10:12.500 --> 10:13.290 read it. 10:13.400 --> 10:14.990 And that's the purpose of this project. 10:14.990 --> 10:22.340 We want to read files if we ask for them or return the contents of folders so other moments you won't 10:22.340 --> 10:26.480 see any declaration because you can't read this ISIS file. 10:26.930 --> 10:37.850 But we are okay for now because we've got our e-mail consent where we can still see the bootstrap styling 10:37.880 --> 10:40.940 because we are using that from an external link. 10:40.970 --> 10:42.330 So that still works. 10:42.350 --> 10:47.360 So our breadcrumb for example is still working on it. 10:47.360 --> 10:55.550 The next step now is to print the correct page title so we can replace those string which is inside 10:55.580 --> 11:01.350 our AML templates with the correct name of the folder. 11:01.370 --> 11:03.650 So how do we get the name of our folder. 11:03.650 --> 11:05.620 We can get that from the path name. 11:05.660 --> 11:06.620 All right. 11:06.620 --> 11:15.410 So in this example the path name is for Slash projects and your name or the folder or the name you want 11:15.410 --> 11:20.930 to use or the title you want to use for your page is projects in that scenario. 11:20.930 --> 11:25.200 For example the name is this one. 11:25.250 --> 11:25.800 OK. 11:26.150 --> 11:31.240 So we're going to guess the full path name and then we'll extract the name from that. 11:31.640 --> 11:32.090 So 11:35.550 --> 11:40.340 first of all let's consult that log the path name just to see what we've got 11:45.390 --> 11:50.270 so that's our path name forward slash projects. 11:50.370 --> 11:54.030 Let's try with something a bit more complicated. 11:54.490 --> 11:55.120 So 11:58.530 --> 12:00.030 OK so let's try with this one actually 12:10.080 --> 12:13.740 so that's our path name OK. 12:14.000 --> 12:15.260 So that's the name we want 12:20.120 --> 12:27.830 so to do this you can split this string and your separator is going to be for Slash. 12:27.830 --> 12:34.640 So splitting the string means that you're going to be creating an array made of these elements which 12:34.640 --> 12:41.370 are separated by forward slashes inside your string so let's go ahead and do this. 12:41.400 --> 12:43.620 So this creates a 12:46.270 --> 12:48.190 variable called Path elements 12:55.290 --> 13:04.740 which will be the path name splits using the separator forward slash 13:09.000 --> 13:15.720 and let's console that log this variable 13:19.060 --> 13:27.350 so that's our array so it starts with an empty elements because we are sourcing with a forward slash. 13:27.680 --> 13:30.710 So it still considers the first item as empty. 13:30.920 --> 13:32.440 And then the next one is projects. 13:32.450 --> 13:33.740 And then the next one. 13:33.860 --> 13:35.680 Now we want this one. 13:35.840 --> 13:41.740 So a good trick here is to reverse the array. 13:41.780 --> 13:49.480 So after you create this array you can just reverse it using the reverse method. 13:49.560 --> 13:52.860 Now the name you want is going to appear at the beginning 13:56.120 --> 13:56.470 okay. 13:56.510 --> 14:03.810 So that's what we wanted and now it appears at the beginning so it's easier to get. 14:03.810 --> 14:09.740 Now this in case will still filter our array and remove any empty elements like this one. 14:09.740 --> 14:20.670 So you can replace the path elements value with the outputs of the filter outputs. 14:20.690 --> 14:29.600 So path elements filter and the function we're going to apply here for each element 14:32.180 --> 14:44.100 is going to be checking if the elements is different from an empty string so we need to make sure that 14:44.160 --> 14:49.050 we keep only elements which are different from an empty string. 14:49.470 --> 14:49.710 Okay. 14:49.740 --> 14:50.760 So let's try this now. 14:55.080 --> 14:55.880 And here we go. 14:55.920 --> 15:00.570 We got rid of any empty elements and now the elements we want is the first one. 15:01.650 --> 15:02.130 So 15:08.690 --> 15:19.180 call it for their name and that's going to be path elements elements arts index zero so let's consult 15:19.220 --> 15:26.430 a log this one and see. 15:26.720 --> 15:27.180 Here we go. 15:27.180 --> 15:29.050 We guess the correct name. 15:29.130 --> 15:30.360 Let's try something else 15:43.900 --> 15:44.250 okay. 15:44.260 --> 15:46.030 We get the correct one as well. 15:46.060 --> 15:46.820 Okay perfect. 15:47.560 --> 15:55.620 Now you will need to replace the string page title inside your templates using the fourth inning to 15:55.620 --> 15:56.720 do that. 15:56.970 --> 15:59.120 You're gonna use the replace method 16:02.820 --> 16:05.670 so we aren't replacing page title 16:08.480 --> 16:10.070 you got only one instance. 16:10.100 --> 16:12.740 So it's pretty simple with full the name 16:16.050 --> 16:20.160 so let's try and we get the correct folder name. 16:20.620 --> 16:22.400 That's our page title. 16:22.400 --> 16:24.100 So let's try it with the other one 16:28.090 --> 16:35.920 prefix in the next video you're going to build the breadcrumb for your webpage.