WEBVTT 00:02.440 --> 00:08.190 It's finally time to compile all the code retaining our fro turned application for production. 00:08.200 --> 00:10.470 This is the terminal end points there. 00:10.510 --> 00:16.810 Now that I've used with the command NPM run serve to run the development server and as you can see one 00:17.020 --> 00:24.850 route and forty four war means were found they are not like real errors or very important warnings to 00:24.850 --> 00:28.000 be harnessed meaning that they are not critical. 00:28.000 --> 00:33.640 The error is you can see is an unexpected council statement and to be fair at the moment considering 00:33.640 --> 00:43.870 that in fact we are going to production you could comment out the line one hundred and seventy four. 00:43.960 --> 00:51.550 So basically these catch with console log or just leave it and make a will search on out to exclude 00:51.610 --> 00:54.070 these kind of errors from showing. 00:54.580 --> 00:57.710 However that's not important at the moment. 00:57.790 --> 01:02.500 What really matters is that we can actually compile our application. 01:02.560 --> 01:11.650 We can build the production version of our application using NPM Iran builder to only get two files 01:11.680 --> 01:13.330 that we can then use. 01:13.390 --> 01:20.440 We've Django so to get to one JavaScript file where all the javascript code that we've written so far 01:20.530 --> 01:22.810 in our front end application will be. 01:22.810 --> 01:30.070 And now that C Ss file where all the styling that we applied will be done and B plus. 01:30.190 --> 01:37.390 So far we've had no C Ss files and that's because they see SS code was passed via javascript and that 01:37.390 --> 01:41.020 is in fact part of the all hot module replacement process. 01:41.080 --> 01:46.820 But considering that again we are not going to run NPM around serve but NPM at unbilled. 01:47.080 --> 01:53.080 We can go back to the view that Conficker dot genius file and you to be low. 01:53.110 --> 02:03.740 We can add comment these lines of code except of course for the comment up here and now if we finally 02:03.740 --> 02:07.940 give the command NPM around Bill then let's see what happens. 02:07.940 --> 02:09.680 So building for the production 02:12.920 --> 02:19.900 and finally every field worked as expected it has in fact found three warnings to make every feature 02:19.900 --> 02:21.680 in fact a bit more consistent. 02:21.710 --> 02:27.760 So if we want we can actually listen to these messages because you see it here. 02:28.050 --> 02:29.610 We can change this up 02:32.710 --> 02:35.060 2D and the same thing. 02:36.430 --> 02:46.360 Up here and then it's still enough that we can actually also delete one line here like so anyways what's 02:46.360 --> 02:54.310 important is that a new folder is being created and inside of it we can find a band or dot CSX bundle 02:54.310 --> 02:57.920 dot J yes which are the two files that we really need. 02:57.940 --> 03:04.810 So inside of these files you see we can now respectively find all this year sets called for duplication 03:05.620 --> 03:11.770 and all the javascript logic as you can see everything has been many failed to make the application 03:11.770 --> 03:20.530 faster and we can actually ignore this index dot HCM out and also bundle dot J yes no map future yes 03:20.540 --> 03:27.790 is of course a very important front end framework that can be used with a lot of different backend frameworks 03:27.820 --> 03:29.720 or even on its own. 03:29.720 --> 03:35.440 And so these multiple files can be used in a lot of different situations but again we're only going 03:35.440 --> 03:41.490 to need these two files so I'm just going to launch the command once again. 03:44.440 --> 03:52.320 Let's not think about how we can include these two production files needs to be files in our Django 03:52.320 --> 03:56.940 application so let's just close these front and folder. 03:56.970 --> 04:01.160 Let's open up core views that pie because e.R. 04:01.170 --> 04:08.260 Of course we are rendering these index not h a file as you might remember where we've created these 04:08.280 --> 04:09.660 index template view. 04:09.680 --> 04:15.720 Glasser I told you that in fact we could have just passed this template a match tribute the class but 04:15.780 --> 04:18.140 overwriting the get template for names. 04:18.180 --> 04:23.490 Mathilde would it be really useful later on so that moment has arrived. 04:23.490 --> 04:31.650 Now if we open up the index dot HDMI file yeah we are using django way back loader to load the JavaScript 04:31.650 --> 04:34.710 files that I've needed during development. 04:34.710 --> 04:41.490 So basically what we can do now is to create another that index file to use during production and then 04:41.520 --> 04:43.410 from inside they get templates. 04:43.420 --> 04:52.080 Name method we can check if settings dot debugger which is a very important property defined yet very 04:52.080 --> 04:55.130 important setting for application as you surely know. 04:55.140 --> 05:01.050 So if the baggie is set to true that means that we are developing so the file that is to be used is 05:01.050 --> 05:06.340 this index not HDMI fi the one created for development purposes. 05:06.360 --> 05:10.760 Otherwise if the bug is set to false we can use the production template. 05:10.860 --> 05:19.620 So instead of creating two files Yeah we can simply rename this file to index def dot HD CML going to 05:19.620 --> 05:27.320 copy these code in a new index thought age demo file which is going to be the production file so yeah 05:27.360 --> 05:29.160 of course fees are going to be different. 05:29.160 --> 05:37.800 First of all we don't need the web backlog that attacks here nor here. 05:37.810 --> 05:45.550 We can't yet remove these spaces and beat like so we are instead we need to load. 05:45.790 --> 05:49.990 Static and yet we can add two more blocks. 05:49.990 --> 05:56.590 So first of all block style and block. 05:57.170 --> 06:00.540 And you had to be low block 06:03.610 --> 06:04.090 yes. 06:04.650 --> 06:08.180 So any side I can add link. 06:08.750 --> 06:16.150 We have a traffic static bundle dot CSA cell and the arrow below. 06:16.230 --> 06:26.310 Instead of script we have as our C that's going to copy this code which actually has to be completed 06:27.700 --> 06:28.260 this way. 06:29.560 --> 06:30.910 This is going to be banned. 06:31.470 --> 06:37.580 Not sure yes based on what h CML is to be updated as well because it's the parent template. 06:37.660 --> 06:45.670 We already have block style that we are using with the off layout you see so below we can simply add 06:46.940 --> 06:48.170 block J Yes 06:52.330 --> 06:53.090 so. 06:53.410 --> 06:56.470 So you are going back to views goodbye. 06:56.610 --> 07:05.910 First of all let's import settings so from Django dot com full import settings and actually let's move 07:05.910 --> 07:07.260 these up. 07:08.110 --> 07:16.700 So 1 2 here and yet now we can check if settings dot debugger. 07:16.960 --> 07:32.130 In that case template name as to be index deaf dot HD AML otherwise template name equals index not HDMI 07:32.130 --> 07:32.910 out. 07:32.950 --> 07:40.660 Now if we open up Question Time settings that by once again and we check static or below. 07:40.980 --> 07:46.050 We see that we have static real but not static files. 07:46.090 --> 07:49.680 There is a rather static files there. 07:49.680 --> 07:54.930 So let's define this variable and Eli you have ready to use static files. 07:54.940 --> 08:02.090 There's variable that we can just paste here like so as you can see. 08:02.090 --> 08:07.380 I've also added an assets folder in case you might want to personalize your application even further. 08:07.400 --> 08:11.870 Or maybe just move this ISIS code to a dedicated file. 08:12.050 --> 08:20.780 But most importantly front end dist and remember of course debt during deployment when moving your application 08:20.780 --> 08:21.560 to production. 08:21.560 --> 08:28.070 You might also want to have a static routes to a folder where you want all your static resources to 08:28.070 --> 08:31.400 be placed with their call let static command. 08:31.400 --> 08:37.060 But I'm just going to comment it out for now and that can actually also add a comment. 08:37.580 --> 08:40.310 But now everything basically is set. 08:40.310 --> 08:42.920 We are almost ready to give all of these a try. 08:42.920 --> 08:49.520 Just remember one thing when setting start debug is false so Django will no longer serve your static 08:49.520 --> 08:50.120 files. 08:50.150 --> 08:55.010 And that's because of course and during production you want to use as something way more efficient such 08:55.010 --> 08:56.500 as for example engine x. 08:56.510 --> 08:59.770 So just for now to check if everything works as expected. 08:59.770 --> 09:01.940 Am I and not here. 09:02.000 --> 09:06.550 And of course remember to remove these not before deploying your application. 09:06.620 --> 09:13.910 Now by only using django as development sort of that I can restart the application will walk perfectly. 09:13.910 --> 09:23.820 Using the files created here for a production so let's move to Chrome and let's make another request. 09:23.950 --> 09:30.100 As you can see everything is working as expected we can load more files we can create new questions 09:30.160 --> 09:38.150 and if we check the source code of the page we see that we now have bundle that yes and bundle dot CSX. 09:38.580 --> 09:39.630 Yeah yeah. 09:39.880 --> 09:41.890 So let's create a new question 09:44.540 --> 09:53.360 Are we in production mode publish home realities. 09:53.620 --> 09:54.040 Sure. 09:54.850 --> 09:56.460 Yes. 09:56.470 --> 09:59.690 Finally OK. 09:59.700 --> 10:00.420 Developers. 10:00.420 --> 10:05.700 That was it for this last lesson on out to set your single page application for a production. 10:05.700 --> 10:11.190 Now you just have to deploy your Django application the way you would normally do using Iraq War digital 10:11.190 --> 10:16.710 ocean for example and by moving these two production files you will be able to finally share your work 10:16.800 --> 10:21.540 with the world before we finish however there is one last thing that I want to tell you. 10:21.540 --> 10:22.920 See you in the next video.