WEBVTT 00:05.860 --> 00:09.730 In this video you're going to serve the file to the user. 00:09.880 --> 00:14.570 So first of all we are going to address the general scenario. 00:14.860 --> 00:22.420 And then after that we're going to treat specific scenarios where the file is for example an audio or 00:22.420 --> 00:25.610 video file or a PDA file and so on. 00:25.660 --> 00:33.010 So first of all let's remove these lines of code. 00:33.110 --> 00:36.250 We don't need these anymore. 00:36.260 --> 00:46.570 So first let's create an object for the headers so we're going to store the headers inside this object. 00:46.580 --> 00:50.940 So I'm going to call it Het. 00:51.720 --> 00:58.200 So the reason why I'm using an object here is because once we treat the general scenario and then we 00:58.200 --> 01:02.980 move to specific cases then we're going to add some changes to these objects. 01:03.000 --> 01:16.740 And this will make our code really well structured so the next step is to set the response code or response 01:16.740 --> 01:19.050 status code. 01:19.050 --> 01:23.690 So let's use a variable status code for those. 01:23.690 --> 01:30.050 So again I'm using letters instead of concerts because this might change later on in the other scenarios. 01:30.050 --> 01:38.540 So for example when you are streaming video a video by chunks then this will change. 01:38.550 --> 01:41.170 Now let's start filling our heads. 01:41.170 --> 01:53.700 So first of all we've got the MIME type of our file so we can use that to set what is called the content 01:54.030 --> 01:54.810 type header 01:57.890 --> 01:58.840 All right. 01:58.870 --> 02:07.670 We can do that for all file types so inside the head objects we're gonna have a new property. 02:07.670 --> 02:10.820 I'm going to call it content type 02:13.950 --> 02:23.910 I'm going to say that to the mime value now you will need to read the contents of your file and then 02:24.200 --> 02:25.770 display it's on the web page. 02:26.730 --> 02:31.120 Basically you get the contents and you send it in the response object. 02:31.410 --> 02:44.960 So let's do that's using the F as those read file method as you know this method works with callbacks. 02:44.960 --> 02:50.140 So let's try this one and then try the promise version. 02:50.390 --> 02:55.440 So if it's not read file 02:59.450 --> 03:08.260 so the path of the file is going to be the full static path and we aren't using the UTF 8 encoding 03:11.420 --> 03:20.790 and then the callback is going to have to promises the error and the data if we manage to get the data 03:20.940 --> 03:22.240 from the file. 03:22.970 --> 03:25.210 Let's manage errors first. 03:25.320 --> 03:33.230 So if error we aren't going to change the status code of the response 03:35.830 --> 03:50.790 to 4 0 4 and then we can write something like 4 0 4 file not found what to be specific we can just write 03:50.860 --> 03:52.410 a file reading error 03:55.350 --> 04:01.020 we can't say file not found because that was checked actually before this step. 04:01.390 --> 04:14.900 Okay so here we are dealing with an error in reading the file and then return response dots and there 04:14.900 --> 04:16.750 are no errors. 04:17.300 --> 04:18.740 It's have and else statements 04:22.580 --> 04:32.960 so first of all we're going to send the city's code and the headers so for that you can use the method. 04:32.960 --> 04:33.800 Right ahead 04:36.860 --> 04:43.370 which will take two promises the status code and we can use that one which we set to 200 by default 04:46.670 --> 04:55.740 and the head objects and then you write the data on the webpage using response. 04:55.740 --> 04:56.830 That's right. 04:59.000 --> 05:02.200 And finally you return response dos and 05:05.070 --> 05:06.820 it looks like there was an error somewhere. 05:06.970 --> 05:14.510 So I'm missing a parentheses online one hundred ten so let's check this 05:26.060 --> 05:28.000 all right so this looks better. 05:28.270 --> 05:32.240 All right now let's test our code and make sure it works. 05:32.280 --> 05:33.120 So let's try it. 05:33.120 --> 05:38.190 This file gets the correct contents of the file. 05:38.200 --> 05:41.350 Now let's try with something else. 05:41.360 --> 05:46.700 A shameful file prefix. 05:46.770 --> 05:48.420 Now if you're trying with an image 05:53.430 --> 05:54.330 it doesn't work 05:57.310 --> 05:58.010 so here. 05:58.020 --> 06:02.850 The browser is trying to display the image in line. 06:02.870 --> 06:05.330 This method doesn't work for that purpose. 06:06.140 --> 06:19.760 So if you do not send the content type in the head or the head is only try again then this works but 06:19.760 --> 06:26.700 you will need to download the picture to view its now. 06:26.840 --> 06:29.810 Let's see if everything else is still working. 06:29.990 --> 06:32.750 A similar files this point. 06:34.120 --> 06:39.650 So there is a limitation with this method as you can see right now. 06:39.790 --> 06:40.360 Let's have a look. 06:40.360 --> 06:41.950 Ask the promises version. 06:42.400 --> 06:46.660 So all you need to do is change airfares to airfares dot 06:51.100 --> 06:57.880 promises and then dot read file and then instead of having a callback 07:01.230 --> 07:02.760 you can place the callback 07:05.590 --> 07:07.570 in the then method 07:15.210 --> 07:17.790 like those now in its cards. 07:17.790 --> 07:19.440 The era of the end 07:41.420 --> 07:46.800 and copy this code. 07:47.160 --> 07:51.440 You can also console the log the area if you like 07:55.690 --> 07:57.530 and inside the then method. 07:57.550 --> 08:02.230 We only need the data portion not both error and data 08:10.820 --> 08:11.060 right. 08:11.080 --> 08:19.760 Let's save and test this with our HMO file prefix still working. 08:19.830 --> 08:21.330 That's great. 08:21.330 --> 08:30.600 Now there is another method we can use instead of FSS read of or if his promises don't read file and 08:30.720 --> 08:40.440 that's streaming basically F is read file some can be really slow as the user will always need to wait 08:40.440 --> 08:43.920 for the whole file to be read before they get it displayed. 08:44.670 --> 08:52.530 So now we're going to use the streaming method which will stream the content to the user so the user 08:52.530 --> 09:04.480 doesn't have to wait for the whole file to be downloaded before they can have it displayed so for now 09:04.900 --> 09:05.560 we can 09:08.910 --> 09:10.920 comments this piece of code 09:16.330 --> 09:18.960 and then write code for our streaming method 09:24.330 --> 09:32.490 so to use this method you can use a method of affairs called Create read stream 09:36.200 --> 09:43.430 so this method will take the full static path of your file 09:46.320 --> 09:48.350 and also it can take some options. 09:48.690 --> 09:53.590 So let's create an options object 09:58.850 --> 09:59.190 all right. 09:59.230 --> 09:59.480 That 10:08.500 --> 10:12.040 which we may amend at some points for these specific scenarios. 10:13.060 --> 10:23.170 So for now let's add comments this and keep the content type inside the headers so let's store this 10:25.830 --> 10:29.180 or the outputs of the method create reads stream. 10:29.270 --> 10:37.950 This story is inside a variable its call its file stream. 10:38.070 --> 10:40.540 Now that's created a read stream. 10:40.740 --> 10:46.720 You are ready to stream chunks of data to your response objects. 10:46.860 --> 10:49.560 So let's write a comment for this 10:52.240 --> 10:52.560 stream. 10:52.570 --> 10:54.880 Thanks to your response objects 10:59.290 --> 11:08.770 so to do that's you can use a method of the object as you created file stream and that method is called 11:08.780 --> 11:20.930 pipe so pipe will take the response objects as a parameter that you are piping or sending chunks to 11:20.930 --> 11:23.710 the response as you are reading them. 11:23.810 --> 11:34.810 Now you can send me headers before that's using the right head method of the response so sending the 11:34.820 --> 11:40.470 status code and the head objects. 11:40.840 --> 11:47.350 Now there are a couple of events which are attached to the file stream objects which you will need to 11:47.350 --> 11:48.350 handle. 11:48.370 --> 11:49.540 So the first one 11:52.420 --> 11:57.100 is the on close events. 11:57.160 --> 12:07.130 So once you close the file stream then this will mark the end of the response so you will return. 12:07.160 --> 12:08.890 Response doesn't end. 12:09.360 --> 12:10.010 So let's do that. 12:10.010 --> 12:20.880 So far stream on close though on takes a couple of promises the events and the callback 12:28.230 --> 12:31.750 in this case you just return response. 12:31.770 --> 12:32.390 Dos and 12:35.840 --> 12:40.390 the other important events is when something goes wrong. 12:40.460 --> 12:44.910 So we have got close and error. 12:45.070 --> 12:51.340 Now it doesn't matter what order you write these two statements in so it's right. 12:51.350 --> 12:57.190 The error statements afterwards you can also write it beforehand. 12:57.190 --> 12:57.950 So on error 13:01.530 --> 13:07.740 we going to have an error parameter and we can decide what to write there. 13:07.740 --> 13:11.490 So for example let's set the stage is Code 13:16.290 --> 13:17.980 2 4 0 4 13:20.860 --> 13:24.120 by the way we can copy that from there. 13:24.160 --> 13:25.440 It's going to be very similar. 13:25.600 --> 13:28.980 So we're gonna lower the error and then write all that 13:42.410 --> 13:45.870 and instead of finally reading I'm going to write a file stream error 13:49.210 --> 13:54.820 sometimes you're interested in the error code only instead of the whole error so you could just write 13:54.850 --> 13:57.410 error Morse code. 13:57.410 --> 14:07.490 Now let's try our code and make sure that everything is working so does one is working still working. 14:07.490 --> 14:16.720 Now let's take images and no images are working as well. 14:16.800 --> 14:23.650 Now let's check each e-mail files with dependencies like styling and so on. 14:23.820 --> 14:26.720 So let's check this one. 14:26.790 --> 14:27.830 One is working. 14:27.990 --> 14:39.940 So images are working as well. 14:39.950 --> 14:45.290 This one is working as well. 14:45.310 --> 14:54.860 Now here is a good question for you when you try in a single file like this one which has got a settings 14:54.870 --> 14:59.730 file in the source code. 14:59.730 --> 15:01.670 So that's starting notes. 15:02.120 --> 15:06.720 You can see that the declaration is working with this link. 15:07.160 --> 15:08.330 Now with our main 15:11.920 --> 15:22.140 templates the declaration is not working even though in the page source we've got style both see ISIS 15:22.140 --> 15:23.760 in the link. 15:23.760 --> 15:31.320 So unless you think about this and I'm going to pause the video and then once you've found the answer 15:31.560 --> 15:33.960 then I suggest you come back to check. 15:33.960 --> 15:38.330 So hopefully you manage to find the answer so hopefully you didn't go too far. 15:38.370 --> 15:47.140 Because the answer is right that so we're looking for style dot CSX and we can't find this in this path 15:48.490 --> 15:55.510 and you can see that the path goes to the static folder and looks for the file inside the static folder. 15:55.510 --> 16:01.180 Now if you try another folder projects for example then this time 16:04.670 --> 16:09.290 you still look in the static folder but if you try another folder 16:12.050 --> 16:16.300 like that's one then this time it's actually looking in its task force. 16:16.300 --> 16:18.960 Large Projects force lifestyle those assets. 16:19.190 --> 16:32.310 And the reason why is because if you take the source code we're looking for style that CSX in the same 16:32.820 --> 16:45.310 directory as this folder which is that's one that means we're looking for that CSX file inside the projects 16:45.310 --> 16:47.230 folder. 16:47.250 --> 16:48.410 Now if you try who 16:51.600 --> 17:03.660 check the source code again then style those CSX you're going to look for that in the same folder containing 17:03.990 --> 17:16.050 this and basically we are in the root directory you know in our code we appended this bits to all path 17:16.050 --> 17:18.410 names. 17:18.580 --> 17:19.680 All right. 17:19.900 --> 17:23.410 So that's why you end up looking inside this folder. 17:23.500 --> 17:35.400 Now if you click on projects and you look at the source code we're looking for style that's CSX in the 17:35.430 --> 17:40.800 same folder containing the projects folder and that's these task folder as well. 17:40.800 --> 17:47.800 And that's why you are looking in the same location in home and in products. 17:47.800 --> 17:49.150 All right. 17:49.170 --> 17:56.000 And you don't get any like redecoration because that file does not exist in this location and it doesn't 17:56.010 --> 18:02.570 exist in that location either and that's why the Declaration never works. 18:03.220 --> 18:11.000 Well if you try a file like like that's one if I open this the creation is going to work because these 18:11.000 --> 18:15.060 tiling was here his file is in the same folder as that folder. 18:15.080 --> 18:16.150 All right. 18:16.280 --> 18:18.690 That's why the Declaration works. 18:19.160 --> 18:21.610 So now we will need to fix this. 18:22.100 --> 18:36.150 So to do that we're going to change the H riff attributes of the link elements to the correct location 18:36.180 --> 18:38.460 of style to CSX. 18:38.550 --> 18:46.760 Now if we look inside O for these be templates is right there. 18:47.190 --> 18:49.630 And it's titled What CSX is right there. 18:49.790 --> 18:57.730 And by the way even though our template is there when we use this template we use from somewhere else 18:57.760 --> 19:05.740 we just guessed the data of the templates and we populate it's with whatever parameters we need. 19:05.740 --> 19:07.790 So it's titled CSX is right there. 19:07.810 --> 19:13.480 So it is go to index those H.M. and change the path of silos. 19:13.490 --> 19:14.040 Yes yes 19:19.430 --> 19:19.940 to 19:22.730 --> 19:23.690 projects files 19:26.930 --> 19:31.820 for Lush style not CSX so let's try no 19:37.580 --> 19:40.580 and this time it works right. 19:40.590 --> 19:47.400 And the next video we're going to take care of specific file types like PDA of audio and video.