In this section, we're going to learn how to deploy the application to a live server at the moment.
We're the only ones that can preview the application.
Unfortunately, we can't share it with anyone.
That's a shame.
We've worked very hard on this app.
Our app should be shown to the world in all its glory.
To begin, we're going to make some adjustments to the final production build specifically.
We're going to modify the budget's options.
Angular introduces a feature called budgets.
Budgets are file size thresholds that are checked against your bundles.
If a file size exceeds a budget, Angular will stop building your project.
The purpose of budgets is to prevent you from deploying heavy files.
You can think of it as an extra step angular takes to help you optimize your app right away.
I can tell you our app exceeds these limits.
Therefore, Angular will not allow us to build our project at its current state.
There are two reasons for this.
Firstly, the upload page has code that exceeds less limits to be more precise.
The FFmpeg files will cause angular to stop building our project.
Secondly, the custom styles for the clip component exceed angular thresholds.
The video a.j.'s packages styles are too big.
There's not much we can do besides optimizing the files ourselves.
However, it's not something we have time for in these cases.
We can increase the threshold set by Angular in your editor.
Open the angular JSON file.
Search for an option called budgets.
I recommend using the editors search feature.
The budget's option is an array of objects we can add budgets for different types of files.
By default, angular will apply to types of budgets.
One budget for script files and another budget for CIUSSS files.
Let's dissect the anatomy of a budget inside each object.
There are three properties called type.
Maximum warning and maximum error.
The type property will tell angular of the type of files to apply.
This budget to the maximum warning property is the maximum file size before angular throws a warning.
The maximum error property works the same way, but throws in air instead of a warning and the first
object.
The type property is being set to initial, which is the setting for script files.
We're going to update the thresholds to five megabytes.
All our secret files shouldn't exceed this limit.
As for the second object, the type property is being set to any component style.
These rules will apply to our style sheets.
Let's set both thresholds to 50 kilobytes.
Our CIA says it shouldn't exceed this limit after making both those changes.
We're ready to start building our project before moving on.
Check out the resource section of this lecture.
There's a link with more information on budgets.
If you're curious, I recommend checking it out.
When you're ready, I'll see you in the following lecture.