WEBVTT 00:04.390 --> 00:09.790 In this new section of the Course we'll finally get rid of their default engineers holding page by creating 00:09.790 --> 00:15.440 a basic virtual host to serve static files from a directory on our server. 00:15.580 --> 00:23.140 To demonstrate this I've created a directory called sites slash demo at the root of my server and inside 00:23.140 --> 00:29.700 sites slash demo I've uploaded a very simple single page website which you can find linked in the list 00:29.720 --> 00:34.890 and resources should you want to use the same which will look like this. 00:34.900 --> 00:37.170 Alternatively any other sample site. 00:37.180 --> 00:40.650 Like the bootstrap boiler plate will work just fine. 00:40.690 --> 00:48.370 The files I've uploaded consists of a single HDMI file indexed dot HD A C S S file which is linked to 00:48.420 --> 00:54.130 in indexed updated email and a P N G image thumb dot P in G. 00:54.250 --> 00:58.930 This way we have a good mix of content types whilst keeping it fairly simple. 00:58.930 --> 01:06.220 The main configuration file we're going to edit is ATC slash in X slash engine X dot conf which at the 01:06.220 --> 01:09.690 moment is still serving the default holding page. 01:09.820 --> 01:15.610 I've got the engine file open in my editor and as it's going to be best to start from scratch here I'll 01:15.610 --> 01:19.720 go ahead and delete everything inside the HTP context. 01:19.960 --> 01:26.520 These bits at the top or in the main context as well and everything inside the event context. 01:26.530 --> 01:31.540 Note that even though we won't be adding anything to the event context we do need to keep it for the 01:31.540 --> 01:33.690 configuration to be considered valid. 01:34.400 --> 01:38.440 Then first thing we're going to want to define a virtual host. 01:38.510 --> 01:46.550 Each virtual host being a new server context or server block like so a virtual host or server context 01:46.580 --> 01:54.350 is essentially responsible for listening on a port typically bought eighty four HDTV or 4 for 3 4 HDD 01:54.350 --> 01:58.850 p s for a given IP address or domain. 01:58.880 --> 02:07.340 So in our case starting with plane HDP port 80 we can say listen 80 and close with a semicolon which 02:07.340 --> 02:08.880 is important. 02:08.890 --> 02:11.100 Now you could leave out this listen directive. 02:11.120 --> 02:16.880 In which case engineers will assume port 80 by default but it is considered good practice to include 02:16.880 --> 02:18.200 it anyway. 02:18.230 --> 02:25.070 Next we'll said the server name which is the domain sub domain or IP address for which the server context 02:25.070 --> 02:26.100 exists. 02:26.210 --> 02:28.860 In our case not having the domain name configured. 02:28.910 --> 02:32.690 I'll simply use the IP address of this machine now. 02:32.720 --> 02:38.780 Note that server names can also include wildcard characters asterisks which in the case of this example 02:38.780 --> 02:42.980 will accept connections for any sub domain of this domain. 02:42.980 --> 02:46.500 Not ever common use case but just something to be aware of. 02:46.850 --> 02:49.640 Finally will define the root directive. 02:49.670 --> 02:56.030 This being the root path from which engine X will be serving requests or interpreting static requests 02:56.030 --> 02:57.020 from. 02:57.110 --> 03:04.490 For example say the server receives a request for images slash cat dog PRNG by default engine X will 03:04.490 --> 03:07.020 look for that file in the root path. 03:07.190 --> 03:15.260 So whatever we said this root directive to slash images slash cette dot binjie Meaning we'll said this 03:15.260 --> 03:22.180 to slash sites slash demo in order to serve static requests from that demo directory. 03:22.490 --> 03:29.240 Save that and now for these changes to take effect will have to reload the and XT configuration using 03:29.240 --> 03:31.250 our system D service. 03:31.340 --> 03:36.660 We use the reload command over the restart command as this way we prevent any downtime. 03:36.890 --> 03:42.440 If the configuration contains any errors the reload will simply fail but not stop engine X with the 03:42.440 --> 03:44.090 current configuration. 03:44.120 --> 03:50.430 Where's a restart will first stop engine X and then should the new configuration contain any errors. 03:50.480 --> 03:52.090 Refuse to start back up. 03:52.130 --> 03:53.630 Not what we want. 03:53.630 --> 03:59.410 We could of course also manually verify this new configuration by running engine X with a T flag. 03:59.450 --> 04:02.410 Like so syntax is okay. 04:02.750 --> 04:07.340 This should be the first test whenever a new configuration isn't working as expected. 04:07.340 --> 04:12.900 Chances are this a syntax error and the new configuration just didn't load reload. 04:14.680 --> 04:15.820 All done. 04:15.820 --> 04:22.360 Head over to the browser reload and we get this rather ugly htl page. 04:22.600 --> 04:24.710 Not quite what we were expecting. 04:24.760 --> 04:29.820 And if you noticed the problem here is that we don't have any styles applied from that linked style 04:29.820 --> 04:35.320 Dotti SS file Now whilst at first it might seem like the style sheet isn't being loaded. 04:35.320 --> 04:40.990 If we check in the browser development tools we see that everything is in fact loaded just fine. 04:41.140 --> 04:46.700 So what's happening here is that engine X is sending the wrong MIME type with the style sheet. 04:46.780 --> 04:52.230 We can confirm this by requesting the style Dotti assess headers using curl curl. 04:52.390 --> 04:53.950 Capital H flag. 04:54.250 --> 04:56.770 H T T P the server i b. 04:56.890 --> 05:03.690 Slash style Dotti assess and there we have it content-type Text slash plane. 05:03.820 --> 05:10.270 So to fix this we need to provide engine X with content types for given file extensions which we can 05:10.270 --> 05:13.880 do using a new context called types like so. 05:14.610 --> 05:21.780 Then we can specify a type let's say text slash h.t. amelle so a standard h.t. email MIME type to be 05:21.780 --> 05:30.420 associated with files using the h.t. EMAIL extension or for that broken stylesheet text slash see assess 05:30.780 --> 05:34.710 for files with a C S S extension and so on. 05:34.980 --> 05:37.330 But there is an easier way. 05:37.350 --> 05:44.130 Engine X allows us to include pieces of configuration from seperate files and one of those files that 05:44.130 --> 05:47.170 already exist is the mime dot types file. 05:47.190 --> 05:50.320 In ATC slash in Genex there. 05:51.750 --> 05:54.120 Which if we check the contents. 05:56.090 --> 05:58.060 Contains that very types context. 05:58.070 --> 05:59.300 We just create it. 05:59.480 --> 06:05.900 But with a much more complete selection of MIME types already defined including variations of file extensions 06:05.960 --> 06:07.640 such as j peg and J. 06:07.640 --> 06:08.510 P. G. 06:09.510 --> 06:16.260 So instead of defining these ourselves we can include the contents of this file directly into our configuration 06:16.290 --> 06:23.080 by saying include the relative path to that file which in this case being in the same directory as the 06:23.080 --> 06:27.540 engine X dot com file is simply mime dot types. 06:28.050 --> 06:29.370 Save this. 06:30.550 --> 06:33.100 Reload the configuration. 06:33.100 --> 06:37.240 We can confirm the MIME type by checking that stylesheets head again. 06:38.290 --> 06:45.880 And this time we get the correct text slash C S S reload the browser and everything works as expected 06:46.150 --> 06:50.220 with style dotsie assessed correctly interpret it as a style sheet. 06:50.500 --> 06:52.120 That's all this to the most basic. 06:52.120 --> 06:58.330 Engine X V housed and static file serving in the next lesson we'll see how to intercept specific requests 06:58.360 --> 07:00.670 through the use of location blocks.