It's finally time to compile all the code retaining our fro turned application for production.
This is the terminal end points there.
Now that I've used with the command NPM run serve to run the development server and as you can see one
route and forty four war means were found they are not like real errors or very important warnings to
be harnessed meaning that they are not critical.
The error is you can see is an unexpected council statement and to be fair at the moment considering
that in fact we are going to production you could comment out the line one hundred and seventy four.
So basically these catch with console log or just leave it and make a will search on out to exclude
these kind of errors from showing.
However that's not important at the moment.
What really matters is that we can actually compile our application.
We can build the production version of our application using NPM Iran builder to only get two files
that we can then use.
We've Django so to get to one JavaScript file where all the javascript code that we've written so far
in our front end application will be.
And now that C Ss file where all the styling that we applied will be done and B plus.
So far we've had no C Ss files and that's because they see SS code was passed via javascript and that
is in fact part of the all hot module replacement process.
But considering that again we are not going to run NPM around serve but NPM at unbilled.
We can go back to the view that Conficker dot genius file and you to be low.
We can add comment these lines of code except of course for the comment up here and now if we finally
give the command NPM around Bill then let's see what happens.
So building for the production
and finally every field worked as expected it has in fact found three warnings to make every feature
in fact a bit more consistent.
So if we want we can actually listen to these messages because you see it here.
We can change this up
2D and the same thing.
Up here and then it's still enough that we can actually also delete one line here like so anyways what's
important is that a new folder is being created and inside of it we can find a band or dot CSX bundle
dot J yes which are the two files that we really need.
So inside of these files you see we can now respectively find all this year sets called for duplication
and all the javascript logic as you can see everything has been many failed to make the application
faster and we can actually ignore this index dot HCM out and also bundle dot J yes no map future yes
is of course a very important front end framework that can be used with a lot of different backend frameworks
or even on its own.
And so these multiple files can be used in a lot of different situations but again we're only going
to need these two files so I'm just going to launch the command once again.
Let's not think about how we can include these two production files needs to be files in our Django
application so let's just close these front and folder.
Let's open up core views that pie because e.R.
Of course we are rendering these index not h a file as you might remember where we've created these
index template view.
Glasser I told you that in fact we could have just passed this template a match tribute the class but
overwriting the get template for names.
Mathilde would it be really useful later on so that moment has arrived.
Now if we open up the index dot HDMI file yeah we are using django way back loader to load the JavaScript
files that I've needed during development.
So basically what we can do now is to create another that index file to use during production and then
from inside they get templates.
Name method we can check if settings dot debugger which is a very important property defined yet very
important setting for application as you surely know.
So if the baggie is set to true that means that we are developing so the file that is to be used is
this index not HDMI fi the one created for development purposes.
Otherwise if the bug is set to false we can use the production template.
So instead of creating two files Yeah we can simply rename this file to index def dot HD CML going to
copy these code in a new index thought age demo file which is going to be the production file so yeah
of course fees are going to be different.
First of all we don't need the web backlog that attacks here nor here.
We can't yet remove these spaces and beat like so we are instead we need to load.
Static and yet we can add two more blocks.
So first of all block style and block.
And you had to be low block
yes.
So any side I can add link.
We have a traffic static bundle dot CSA cell and the arrow below.
Instead of script we have as our C that's going to copy this code which actually has to be completed
this way.
This is going to be banned.
Not sure yes based on what h CML is to be updated as well because it's the parent template.
We already have block style that we are using with the off layout you see so below we can simply add
block J Yes
so.
So you are going back to views goodbye.
First of all let's import settings so from Django dot com full import settings and actually let's move
these up.
So 1 2 here and yet now we can check if settings dot debugger.
In that case template name as to be index deaf dot HD AML otherwise template name equals index not HDMI
out.
Now if we open up Question Time settings that by once again and we check static or below.
We see that we have static real but not static files.
There is a rather static files there.
So let's define this variable and Eli you have ready to use static files.
There's variable that we can just paste here like so as you can see.
I've also added an assets folder in case you might want to personalize your application even further.
Or maybe just move this ISIS code to a dedicated file.
But most importantly front end dist and remember of course debt during deployment when moving your application
to production.
You might also want to have a static routes to a folder where you want all your static resources to
be placed with their call let static command.
But I'm just going to comment it out for now and that can actually also add a comment.
But now everything basically is set.
We are almost ready to give all of these a try.
Just remember one thing when setting start debug is false so Django will no longer serve your static
files.
And that's because of course and during production you want to use as something way more efficient such
as for example engine x.
So just for now to check if everything works as expected.
Am I and not here.
And of course remember to remove these not before deploying your application.
Now by only using django as development sort of that I can restart the application will walk perfectly.
Using the files created here for a production so let's move to Chrome and let's make another request.
As you can see everything is working as expected we can load more files we can create new questions
and if we check the source code of the page we see that we now have bundle that yes and bundle dot CSX.
Yeah yeah.
So let's create a new question
Are we in production mode publish home realities.
Sure.
Yes.
Finally OK.
Developers.
That was it for this last lesson on out to set your single page application for a production.
Now you just have to deploy your Django application the way you would normally do using Iraq War digital
ocean for example and by moving these two production files you will be able to finally share your work
with the world before we finish however there is one last thing that I want to tell you.
See you in the next video.