WEBVTT 00:05.180 --> 00:10.360 Now this year and pursued the logic of Europe you are ready to build your code structure. 00:10.580 --> 00:12.500 So to make things easy for you. 00:12.650 --> 00:19.130 I've created a starting source code which you can download in the resources of this lecture and you 00:19.120 --> 00:23.160 will find here some comments which will take you through the code structure. 00:23.210 --> 00:25.540 We're going to be following later on. 00:25.610 --> 00:30.830 So I've created a file up those jazz which is gonna be the main file of our node up. 00:31.360 --> 00:32.210 Okay. 00:32.270 --> 00:41.610 And also I created a folder lib Where we gonna be placing some JavaScript files used by up DOJ s and 00:41.720 --> 00:46.010 you will see later how we gonna be linking all these files together. 00:46.010 --> 00:52.010 Now the template files which you created earlier you can place them in a separate folder and call it 00:52.700 --> 00:59.160 for example project files. 00:59.300 --> 00:59.940 Okay. 01:00.090 --> 01:14.680 So just to make things easy and clear I want to show the different files we are gonna be editing using 01:14.680 --> 01:16.950 tabs like that's so. 01:16.990 --> 01:21.630 To do this you can use an extension called Custom work. 01:21.790 --> 01:30.500 So if you go to the extensions and look for custom work you can just sort that extension. 01:31.000 --> 01:31.420 Okay. 01:32.090 --> 01:32.570 So 01:35.460 --> 01:37.230 let's go back to our files 01:41.740 --> 01:45.900 and let's start going through up in those days. 01:45.940 --> 01:53.860 So here you're gonna be building or creating your server and then you're gonna create a function which 01:54.070 --> 01:59.700 will be responsible for answering server requests. 01:59.710 --> 02:06.730 First of all I'd like to mention again that you're gonna be building this project fully using your node 02:07.300 --> 02:14.290 and the reason of this is to make sure that you have a thorough understanding of note. 02:14.410 --> 02:21.010 Now obviously there are easier ways of building a similar projects using third party modules. 02:21.570 --> 02:21.910 Okay. 02:21.910 --> 02:26.940 Or NPM which is something that we will cover later. 02:27.010 --> 02:29.770 So that is fine as well. 02:29.860 --> 02:39.520 But if you do that then you will miss out on many code concepts when it comes to the core concepts of 02:39.580 --> 02:40.390 note. 02:40.390 --> 02:40.930 Okay. 02:41.110 --> 02:44.980 So let's go ahead and go through our code structure. 02:45.580 --> 02:52.870 So here you're gonna be requiring any node modules you need any file imports and then setting your connection 02:52.870 --> 02:53.770 settings. 02:53.830 --> 03:00.250 Okay so let's start with creating the server and then go back to these whenever we need them. 03:00.250 --> 03:06.580 So to create the server we're gonna create a variable server where we're going to store the outputs 03:07.000 --> 03:12.220 of the Create server method and that is a method of HBP. 03:12.520 --> 03:14.020 So we will need the HCV 03:17.430 --> 03:18.850 module of note. 03:19.740 --> 03:30.700 So this creates a constant HP which is gonna be set to require a CCP. 03:30.900 --> 03:40.840 Okay so now the method is create server and this method will take a callback function which we will 03:40.840 --> 03:43.350 call respond. 03:43.830 --> 03:44.150 Okay. 03:44.170 --> 03:52.210 And then you will need to make sure that the server listens to requests and to do that we're gonna write 03:52.270 --> 03:53.770 server Dot. 03:54.040 --> 03:57.000 Listen. 03:57.430 --> 04:02.210 Well boss here are parameters so we need a pause. 04:02.230 --> 04:03.460 No. 04:03.460 --> 04:07.020 And we gonna put that in the connection settings. 04:07.760 --> 04:16.620 So in our local server we will set that to 3000 for now. 04:16.670 --> 04:27.420 Okay so listen we'll take the pause number and then we'll just add a callback. 04:27.720 --> 04:41.650 So our callback is gonna be something like console but log listening on ports followed by our post no 04:45.760 --> 04:46.210 okay. 04:48.470 --> 04:59.780 Now in local hosts three thousand is fine as far as it's available but when you want to deploy Europe 04:59.780 --> 05:09.630 later on to Heroku for example which we'll do shortly then you will need to use an environment variable. 05:10.190 --> 05:15.670 And if you remember environments variables can be found in the process objects. 05:15.680 --> 05:26.340 So basically what you do is check if there is an environment variable and you say that's to process 05:27.150 --> 05:33.170 dots and dots ports. 05:33.270 --> 05:39.500 Okay or three thousand if you don't find us. 05:40.300 --> 05:45.120 So basically this is going to check that value first. 05:45.220 --> 05:48.310 If he doesn't find his then he's going to say that to three. 05:48.370 --> 05:58.380 So in our case we don't have a port property of any inside process. 05:58.470 --> 06:02.800 So this is gonna be set directly to 3000. 06:02.850 --> 06:03.110 Okay. 06:03.140 --> 06:10.770 So now our server is created and now we need to create our respond function. 06:10.770 --> 06:16.580 And I would just to make sure that our code looks professional and easy to read for everyone. 06:16.620 --> 06:24.670 We're going to create respond inside another file and that's why I created the lib folder. 06:24.670 --> 06:30.660 We're going to place several JavaScript files so one of those files is going to be respond those days 06:30.960 --> 06:33.500 where we can replace our function respond. 06:33.510 --> 06:40.480 So let's go ahead and create the function and then link both those files. 06:40.740 --> 06:49.880 So let's go first through the structure of this function and just understand how it works. 06:49.920 --> 06:59.030 So when a user submits a request to our server the first thing we're gonna be doing is check the path 06:59.030 --> 06:59.800 name. 07:00.030 --> 07:02.610 So the path name is gonna be something like 07:07.420 --> 07:08.680 forward slash projects. 07:08.680 --> 07:09.820 In this example. 07:09.820 --> 07:10.340 Okay. 07:10.390 --> 07:12.160 So that's the path me. 07:12.210 --> 07:17.440 Now let's take another path name that's another one. 07:21.600 --> 07:27.270 And this one is a bit more complicated so it starts with forward slash projects then for a start up 07:27.480 --> 07:30.030 then you've got percentage 20 and so on. 07:30.720 --> 07:36.190 So once you get the path name you will need to decode it. 07:36.210 --> 07:43.270 Now you really need to decode the path name because this is following the you RL format. 07:43.340 --> 07:44.080 Okay. 07:44.100 --> 07:50.550 And if you use the path name like that's using these percentages then you'll find that problems in your 07:50.550 --> 07:51.050 code. 07:51.090 --> 07:53.630 So you really need to decode it. 07:53.700 --> 08:00.930 So once you get the path name you will need to find the corresponding for static path in your static 08:00.930 --> 08:01.590 folder. 08:01.590 --> 08:02.310 So what does it mean. 08:02.340 --> 08:08.580 So in our static folder which you will find or create somewhere. 08:09.780 --> 08:14.280 So let's say that's our sourcing for that is gonna be in the same directories as upper body. 08:14.310 --> 08:15.310 So it is created. 08:15.900 --> 08:23.510 I'm going to call it static so this is the folder corresponding to your home directory. 08:23.540 --> 08:31.610 So basically if a user goes to your home directory then you will see the different files and folders 08:31.610 --> 08:34.410 inside this folder. 08:34.490 --> 08:44.080 Static Okay so any path named that we get and then decode we're gonna need to convert it to the full 08:44.230 --> 08:47.440 static path inside this task folder. 08:47.830 --> 08:55.950 So for example if the path name is just for lunch meaning that we are in the home directory then we 08:55.950 --> 09:03.300 are looking directly answer the static folder and the full static path of sourcing folder can be found 09:03.300 --> 09:05.490 by going to this static folder. 09:05.490 --> 09:08.960 So this task for that is right there. 09:08.970 --> 09:20.250 So I'm gonna go to static OK to check where I am at the moments I'm going to write the command P W D. 09:20.250 --> 09:25.350 So this is the full static path okay of our for that static. 09:25.770 --> 09:38.580 Now if your path is forwards large media for example then you're going to look for a full sized path 09:38.580 --> 09:42.060 which is gonna be this one for its large media. 09:42.060 --> 09:50.260 Okay so you always start from the static folder followed by whatever path name you decoded from that. 09:51.360 --> 09:52.650 Okay perfect. 09:52.680 --> 10:00.330 So now the next step is going to be can we find something in that false static path. 10:00.420 --> 10:04.680 So at the moment our folder static is empty. 10:04.710 --> 10:12.120 So I'm just gonna need to fill it with some contents and then we'll see some examples. 10:12.120 --> 10:15.400 So I'm going to pause the video fill this folder and then come back. 10:15.650 --> 10:15.950 All right. 10:15.960 --> 10:23.690 Now I've got some contents is inside our static folder so if you look for this full path forward by 10:23.700 --> 10:30.870 force large media for example then you know that this exists and it's a folder if you look for something 10:31.320 --> 10:38.300 like forward slash index those HMO then we know that there is no file index those HMO inside static. 10:38.310 --> 10:38.870 Okay. 10:39.030 --> 10:46.340 And this will result in saying that we have nothing found inside false static path. 10:46.440 --> 10:55.050 So by the way the contents of these toxic folder is very similar to the contents of that folder which 10:55.050 --> 10:57.610 is used in this live example. 10:58.410 --> 10:59.070 Okay. 10:59.220 --> 11:03.450 So now we're going to have a few scenarios. 11:03.510 --> 11:07.470 First one is the false static path didn't correspond to anything. 11:07.470 --> 11:10.200 So in that case it would descend 4 0 4. 11:10.260 --> 11:15.690 So for example I'm gonna do that here and I'm gonna write something that does not exist. 11:15.690 --> 11:18.660 So we get four or four file not found. 11:18.660 --> 11:24.510 Okay and then the other scenario is we found something. 11:24.560 --> 11:29.810 So we need to check now if it is a file or a directory. 11:29.810 --> 11:31.610 So first if it is a directory 11:38.090 --> 11:44.120 we will need to guess the contents from our template so that was a seminal. 11:44.310 --> 11:44.540 Okay. 11:44.580 --> 11:51.640 So we call it index those H.M. in our case our templates which is 11:54.550 --> 11:56.700 right that we placed in here. 11:56.740 --> 12:01.150 So we get the templates from that and we will need to fill its 12:04.370 --> 12:09.950 using the correct contents and then we will display this webpage. 12:10.790 --> 12:13.220 So that's what what happens if it's eightfold. 12:14.160 --> 12:15.430 Okay. 12:15.620 --> 12:23.060 Now there is something very important we need to bear in mind and that's the fact that when you display 12:23.180 --> 12:26.850 content like this you've got some styling in there. 12:26.990 --> 12:27.650 Okay. 12:27.740 --> 12:37.250 And your HMO file is linked to a CFS file and as you know we are reading those files the same way we 12:37.250 --> 12:45.890 are reading any other file well he served to the user and we know that this project reads files which 12:45.890 --> 12:48.620 are located in the static folder. 12:48.620 --> 12:56.030 So what you need to do you need to make sure that any files used by this AML templates including the 12:56.090 --> 12:59.770 linked CFS files they are actually in the sourcing folder. 13:00.080 --> 13:09.360 So for this to work I'm going to move the projects files folder inside these static folder 13:12.880 --> 13:18.960 and it says here there's this file or there or directory already exists. 13:19.060 --> 13:22.620 Fine I'm going to delete it 13:26.920 --> 13:30.710 and then I'm going to move our opera folder right there. 13:32.600 --> 13:33.270 OK. 13:33.410 --> 13:34.280 So now 13:37.730 --> 13:40.890 to fill the templates you'll need to go through a few steps. 13:41.000 --> 13:44.090 So you need to build the page title. 13:44.280 --> 13:45.190 Okay. 13:45.440 --> 13:54.210 And then build the the breadcrumb and then build B table rows and that's gonna be your main content 13:54.230 --> 13:56.070 of the page. 13:56.600 --> 14:02.640 And then you will fill the templates data which you will get from index as HMO. 14:02.660 --> 14:08.540 You fill it with all those details and print it to the webpage and all this has been already covered 14:08.990 --> 14:11.050 in the logic video. 14:12.200 --> 14:18.920 This is just the code structure which is just following the same process. 14:18.970 --> 14:19.250 Okay. 14:19.260 --> 14:23.790 Now if it is not a directory is not a file either. 14:23.850 --> 14:27.850 Now in that case we will need to send for 0 1. 14:28.320 --> 14:34.820 And this will mean access denied because we want to serve only folders and files. 14:34.860 --> 14:42.960 Now if it is a file then to read a file you will need the file extension first using the file extension 14:43.040 --> 14:51.710 you're going to get the file mime type and you will need that in the response header which will tell 14:51.730 --> 15:00.330 your browser the mime type of the file and it will make it easy for your browser to read the file. 15:00.330 --> 15:05.880 Then you get the file size and you eye to the response header as well. 15:05.880 --> 15:08.350 And now we're gonna have a few scenarios as we covered earlier. 15:08.400 --> 15:16.440 If it's a PDA file you want to displays in the browser like this you don't want the user to download 15:16.440 --> 15:17.430 the file on the computer. 15:17.430 --> 15:24.630 They can view it right there if it's an audio or video file then you want to stream the file by chunks. 15:24.690 --> 15:30.820 So if I open a video then this is gonna be streamed by chunks. 15:30.930 --> 15:35.390 Meaning that it's not gonna be downloaded in full. 15:35.430 --> 15:40.860 We will only send chunks to the user as they are watching the video and you can also search through 15:40.860 --> 15:47.090 the video and for all other files we will just stream the file in a normal way. 15:48.800 --> 15:52.820 Now that's you understood the structure of your respond function. 15:52.870 --> 15:57.120 Let's link our respond file to the OP DOJ s file. 15:57.350 --> 16:07.380 So at the very end I'm going to add the respond function to the module exports or just sets the module 16:07.380 --> 16:11.370 exports to respond OK. 16:11.580 --> 16:19.740 So we are exporting this function to the up day as file so in the file imports of this file we are going 16:19.740 --> 16:36.480 to add a function respond which is gonna be set to require followed by the location of our file and 16:36.490 --> 16:40.590 that's gonna be an while starting from the current location. 16:40.840 --> 16:52.660 We're gonna go to the Lib folder and forward slash respond both chance okay. 16:53.390 --> 16:55.330 Now just to make sure our code works. 16:55.340 --> 17:03.410 I'm gonna go to the respond function and console that log something at the very beginning like 17:06.150 --> 17:06.750 respond. 17:06.770 --> 17:14.340 Fight so let's launch our up and see if it works. 17:14.350 --> 17:28.520 So let's go back to our projects folder then launch the app using made up DOJ and let's launch local 17:28.530 --> 17:31.320 has three thousand one extra Cox there. 17:31.520 --> 17:40.380 So let's just say it again and relaunch are up by going to local hosts three thousand this time and 17:40.590 --> 17:41.530 let's see what we get. 17:41.950 --> 17:44.840 So it says here respond fired. 17:45.010 --> 17:47.650 So it shows us our code is working. 17:47.650 --> 17:49.180 We don't get any response. 17:49.240 --> 17:54.590 We don't see anything on the web page and it keeps loading because we haven't printed anything in the 17:54.640 --> 17:57.550 webpage and we didn't send any response anyway. 17:57.610 --> 18:05.020 Now if you want a response which is more appealing you can instead of console that log you can just 18:05.110 --> 18:11.970 response dot write this onto the page straightaway and then follow that by response. 18:11.970 --> 18:15.010 Dos and and this will Prince this on your page. 18:15.010 --> 18:21.910 So if you resize the app and try this again then it's going to print buzz on the web page instead of 18:22.030 --> 18:24.480 leaving the page loading indefinitely. 18:24.710 --> 18:25.340 Okay. 18:25.480 --> 18:32.770 So now that you've checked that your response function does fire and it's well linked to your up the 18:32.770 --> 18:39.490 day as file you are now ready to move to the next step in the next video which is to guess the path 18:39.490 --> 18:46.950 name decoded and then converted to a full static path which you will search inside these task folder.