1
00:00:00,090 --> 00:00:06,180
In this section, we're going to learn how to deploy the application to a live server at the moment.

2
00:00:06,330 --> 00:00:09,390
We're the only ones that can preview the application.

3
00:00:09,660 --> 00:00:12,360
Unfortunately, we can't share it with anyone.

4
00:00:12,600 --> 00:00:13,410
That's a shame.

5
00:00:13,590 --> 00:00:15,660
We've worked very hard on this app.

6
00:00:15,960 --> 00:00:19,110
Our app should be shown to the world in all its glory.

7
00:00:19,650 --> 00:00:25,200
To begin, we're going to make some adjustments to the final production build specifically.

8
00:00:25,350 --> 00:00:28,080
We're going to modify the budget's options.

9
00:00:28,410 --> 00:00:31,350
Angular introduces a feature called budgets.

10
00:00:31,620 --> 00:00:35,910
Budgets are file size thresholds that are checked against your bundles.

11
00:00:36,150 --> 00:00:41,100
If a file size exceeds a budget, Angular will stop building your project.

12
00:00:41,670 --> 00:00:45,780
The purpose of budgets is to prevent you from deploying heavy files.

13
00:00:46,050 --> 00:00:52,230
You can think of it as an extra step angular takes to help you optimize your app right away.

14
00:00:52,380 --> 00:00:55,080
I can tell you our app exceeds these limits.

15
00:00:55,290 --> 00:01:00,210
Therefore, Angular will not allow us to build our project at its current state.

16
00:01:00,540 --> 00:01:02,280
There are two reasons for this.

17
00:01:02,790 --> 00:01:08,460
Firstly, the upload page has code that exceeds less limits to be more precise.

18
00:01:08,670 --> 00:01:13,170
The FFmpeg files will cause angular to stop building our project.

19
00:01:13,500 --> 00:01:19,020
Secondly, the custom styles for the clip component exceed angular thresholds.

20
00:01:19,380 --> 00:01:22,830
The video a.j.'s packages styles are too big.

21
00:01:23,370 --> 00:01:27,330
There's not much we can do besides optimizing the files ourselves.

22
00:01:27,570 --> 00:01:31,800
However, it's not something we have time for in these cases.

23
00:01:31,950 --> 00:01:36,450
We can increase the threshold set by Angular in your editor.

24
00:01:36,630 --> 00:01:39,210
Open the angular JSON file.

25
00:01:41,620 --> 00:01:43,840
Search for an option called budgets.

26
00:01:44,110 --> 00:01:46,900
I recommend using the editors search feature.

27
00:01:49,420 --> 00:01:55,570
The budget's option is an array of objects we can add budgets for different types of files.

28
00:01:55,840 --> 00:01:59,680
By default, angular will apply to types of budgets.

29
00:01:59,980 --> 00:02:04,360
One budget for script files and another budget for CIUSSS files.

30
00:02:04,630 --> 00:02:09,520
Let's dissect the anatomy of a budget inside each object.

31
00:02:09,610 --> 00:02:12,010
There are three properties called type.

32
00:02:12,220 --> 00:02:14,950
Maximum warning and maximum error.

33
00:02:15,430 --> 00:02:19,810
The type property will tell angular of the type of files to apply.

34
00:02:19,810 --> 00:02:26,800
This budget to the maximum warning property is the maximum file size before angular throws a warning.

35
00:02:27,190 --> 00:02:33,970
The maximum error property works the same way, but throws in air instead of a warning and the first

36
00:02:33,970 --> 00:02:34,630
object.

37
00:02:34,750 --> 00:02:40,390
The type property is being set to initial, which is the setting for script files.

38
00:02:40,690 --> 00:02:44,200
We're going to update the thresholds to five megabytes.

39
00:02:46,790 --> 00:02:49,640
All our secret files shouldn't exceed this limit.

40
00:02:49,910 --> 00:02:55,730
As for the second object, the type property is being set to any component style.

41
00:02:56,150 --> 00:02:58,970
These rules will apply to our style sheets.

42
00:02:59,240 --> 00:03:02,650
Let's set both thresholds to 50 kilobytes.

43
00:03:05,160 --> 00:03:10,170
Our CIA says it shouldn't exceed this limit after making both those changes.

44
00:03:10,290 --> 00:03:14,050
We're ready to start building our project before moving on.

45
00:03:14,130 --> 00:03:16,860
Check out the resource section of this lecture.

46
00:03:17,160 --> 00:03:19,740
There's a link with more information on budgets.

47
00:03:19,980 --> 00:03:22,740
If you're curious, I recommend checking it out.

48
00:03:22,920 --> 00:03:26,220
When you're ready, I'll see you in the following lecture.