1
00:00:00,390 --> 00:00:04,110
In this lecture, we're going to deploy our app to production.

2
00:00:04,410 --> 00:00:07,530
The first thing we need to do is pick a hosting service.

3
00:00:07,830 --> 00:00:10,050
There are dozens of services available.

4
00:00:10,350 --> 00:00:13,440
Every single one of them has its pros and cons.

5
00:00:13,710 --> 00:00:17,940
You will need to do research to find out which service suits you best.

6
00:00:18,240 --> 00:00:24,780
Some of the most popular services are Heroku, Digital Ocean, IWC and Net Fi.

7
00:00:25,130 --> 00:00:29,400
I consider them to be great choices for this application.

8
00:00:29,430 --> 00:00:36,030
We're going to deploy it to a service called Vessel for Cell is a service for deploying your applications.

9
00:00:36,240 --> 00:00:40,260
It supports dozens of frameworks and languages out of the box.

10
00:00:40,530 --> 00:00:42,000
This includes angular.

11
00:00:42,270 --> 00:00:43,890
It's my personal favorite.

12
00:00:44,220 --> 00:00:46,950
I use it for client and personal projects.

13
00:00:47,190 --> 00:00:48,720
It's quick and painless.

14
00:00:48,990 --> 00:00:52,500
Hopefully, by the end of this lecture, you'll love it too.

15
00:00:53,070 --> 00:00:55,170
Signing up is free and easy.

16
00:00:55,410 --> 00:00:57,660
You don't need a credit card for an account.

17
00:00:57,960 --> 00:01:00,960
They allow you to upload hobby projects for free.

18
00:01:01,290 --> 00:01:04,800
You don't have to pay anything for them to host your project.

19
00:01:05,099 --> 00:01:08,490
Pause the video, register an account and log in.

20
00:01:09,060 --> 00:01:13,590
Once you've got an account, we can begin deploying the project first.

21
00:01:13,680 --> 00:01:16,650
We need to configure our project for virtual.

22
00:01:17,010 --> 00:01:23,280
In the resource section of this lecture, I provide a link to the Project Configuration Documentation

23
00:01:23,280 --> 00:01:23,850
page.

24
00:01:24,270 --> 00:01:29,810
Typically, we would be able to deploy our project without configuring it for virtual.

25
00:01:30,240 --> 00:01:32,610
For Sale is optimized for most apps.

26
00:01:32,820 --> 00:01:35,700
However, we haven't developed a regular app.

27
00:01:36,000 --> 00:01:39,870
Our app is using FFmpeg, which is a cutting edge feature.

28
00:01:40,230 --> 00:01:45,420
As we encountered before, specific headers must be added to the response headers.

29
00:01:45,720 --> 00:01:51,780
They are the cross origin opener policy and cross origin and better policy headers.

30
00:01:52,290 --> 00:01:57,960
These headers were added to our development server by deploying our project to Percell.

31
00:01:58,200 --> 00:02:01,830
These headers will not be available on resells servers.

32
00:02:02,130 --> 00:02:07,530
Luckily, Virtuelle allows developers to modify the headers given by their servers.

33
00:02:07,860 --> 00:02:13,860
We can create a file called virtual JSON to configure for cells response headers.

34
00:02:14,250 --> 00:02:19,800
This documentation page will provide you with a list of settings you can add to this file.

35
00:02:20,190 --> 00:02:23,610
Let's switch over to our project in our editors.

36
00:02:26,160 --> 00:02:30,600
In the root directory of the project, let's add a file called for Cell.

37
00:02:30,900 --> 00:02:31,590
Jason.

38
00:02:34,120 --> 00:02:38,350
Inside this file, we can add an object of configuration settings.

39
00:02:38,590 --> 00:02:43,900
We're only interested in adding headers, headers can be added with the headers option.

40
00:02:46,350 --> 00:02:49,470
The headers option will be an array of objects.

41
00:02:49,740 --> 00:02:53,820
Each object can configure a specific endpoint in our app.

42
00:02:54,240 --> 00:02:58,800
For example, we can apply headers to one path or several paths.

43
00:02:59,100 --> 00:03:02,730
In our case, we're going to apply headers to all paths.

44
00:03:03,060 --> 00:03:06,150
Let's add an object with a property called source.

45
00:03:08,780 --> 00:03:12,710
These source properties should store the path to apply the header to.

46
00:03:13,070 --> 00:03:15,740
We're going to apply the headers to all pass.

47
00:03:15,980 --> 00:03:19,730
Let's set the path to the following value slash.

48
00:03:19,820 --> 00:03:21,260
Dot asterisk.

49
00:03:23,760 --> 00:03:27,660
This value acts as a wild card selector for all paths.

50
00:03:27,990 --> 00:03:32,010
The next option will add to the object is an array called headers.

51
00:03:34,550 --> 00:03:40,220
In this array, we can add objects to represent a single header, for this example.

52
00:03:40,280 --> 00:03:46,460
We're going to add two objects since we're trying to add two headers, these headers will be applied

53
00:03:46,460 --> 00:03:47,810
to all responses.

54
00:03:48,080 --> 00:03:55,910
Let's start with the cross origin opener policy inside the first object at a property called key with

55
00:03:55,910 --> 00:03:59,240
a value of cross origin opener policy.

56
00:04:01,780 --> 00:04:06,580
The next property will be called value with the value of same origin.

57
00:04:12,000 --> 00:04:18,060
The key property will store the name of the header while the value property will hold the value for

58
00:04:18,060 --> 00:04:18,570
the header.

59
00:04:18,959 --> 00:04:24,090
Let's update the second object with the cross origin and better policy header.

60
00:04:24,540 --> 00:04:27,540
The value for this header will be REQUIR Corp..

61
00:04:33,230 --> 00:04:40,280
By adding the four cell JSON file to the root directory of our project, cell will apply the settings

62
00:04:40,280 --> 00:04:42,320
in this file to its servers.

63
00:04:42,650 --> 00:04:45,710
Let's begin by deploying this project to her cell.

64
00:04:46,070 --> 00:04:48,950
We have two options for deploying a project.

65
00:04:49,220 --> 00:04:53,600
We can install a command line tool to initiate the deployment process.

66
00:04:53,930 --> 00:04:59,540
Alternatively, we can tell her cell to fetch our files from a GitHub repository.

67
00:05:00,110 --> 00:05:07,220
I think the second option is better if we update our project where a cell can redeploy our project automatically.

68
00:05:07,520 --> 00:05:09,680
It's a very convenient feature to have.

69
00:05:10,010 --> 00:05:12,800
Best of all, it's straightforward to configure.

70
00:05:13,100 --> 00:05:19,550
In the resource section of this lecture, I provide a link to a tool called Git Hub Desktop.

71
00:05:20,120 --> 00:05:24,350
This program provides a UI for uploading projects to GitHub.

72
00:05:24,650 --> 00:05:27,590
It's completely optional to install this program.

73
00:05:27,950 --> 00:05:31,670
You are more than free to upload a project with the command line, too.

74
00:05:31,880 --> 00:05:34,190
However, I think it makes things easier.

75
00:05:34,370 --> 00:05:36,200
I have it installed on my machine.

76
00:05:36,470 --> 00:05:38,480
I recommend you install it, too.

77
00:05:38,900 --> 00:05:41,780
After installing it, open it on your machine.

78
00:05:42,050 --> 00:05:48,890
From the program, we can add a new local repository by going to file add local repository.

79
00:05:49,190 --> 00:05:52,250
From there, you can search for your angler project.

80
00:05:52,610 --> 00:05:54,020
I've already done so.

81
00:05:54,320 --> 00:05:59,810
Next, we need to commit the changes we made to our project on the left side.

82
00:05:59,930 --> 00:06:02,480
There's a list of files that have been modified.

83
00:06:03,020 --> 00:06:04,640
Make sure they're all checked.

84
00:06:04,910 --> 00:06:09,770
We're going to commit all files from our project on the bottom left corner.

85
00:06:09,890 --> 00:06:12,500
We can add a description for commitments.

86
00:06:12,770 --> 00:06:15,110
I'm going to input the following message.

87
00:06:15,320 --> 00:06:16,700
Completed project.

88
00:06:19,150 --> 00:06:21,490
Lastly, I'll commit the changes.

89
00:06:23,920 --> 00:06:28,690
After committing our changes, we can publish our repository to GitHub.

90
00:06:29,020 --> 00:06:33,160
You can click on the button to do so before publishing our project.

91
00:06:33,370 --> 00:06:36,370
The program will ask us for a couple of details.

92
00:06:36,760 --> 00:06:39,130
Feel free to modify this information.

93
00:06:39,370 --> 00:06:41,620
I think the default values are fine.

94
00:06:41,950 --> 00:06:48,610
It's also optional for the repository to be private for cell will be able to fetch files from a private

95
00:06:48,610 --> 00:06:50,290
or public repository.

96
00:06:50,650 --> 00:06:52,300
Let's publish our project.

97
00:06:54,790 --> 00:06:58,450
After a few moments, everything should be uploaded to GitHub.

98
00:06:58,780 --> 00:07:05,890
The next step is to tell a cell to fetch file from our repository in your browser, navigate to leave

99
00:07:05,890 --> 00:07:07,180
your cell dashboard.

100
00:07:09,480 --> 00:07:15,390
On the dashboard, you'll be presented with a list of projects registered with your account, as you

101
00:07:15,390 --> 00:07:15,990
can see.

102
00:07:16,170 --> 00:07:18,300
I have a couple of projects uploaded.

103
00:07:18,540 --> 00:07:21,870
We can add a new project by clicking on the new button.

104
00:07:23,310 --> 00:07:30,540
Will be presented with two options we can import a project from a repository or we can use a template.

105
00:07:30,840 --> 00:07:33,450
Let's import our project from GitHub.

106
00:07:33,810 --> 00:07:36,810
First, we need to connect our GitHub accounts.

107
00:07:37,080 --> 00:07:38,820
I'm going to quickly do so.

108
00:07:39,600 --> 00:07:45,360
After connecting our accounts for cell will provide us with a list of projects in our accounts.

109
00:07:45,660 --> 00:07:48,360
I'm going to import the clips project.

110
00:07:50,870 --> 00:07:54,500
Next, Rachel, is going to ask us about our project.

111
00:07:54,830 --> 00:07:58,040
First, it's going to ask us to create a team.

112
00:07:58,430 --> 00:08:01,280
This feature is available for premium members.

113
00:08:01,460 --> 00:08:03,170
We're going to skip this feature.

114
00:08:03,620 --> 00:08:10,910
Up next, we are going to be asked to configure our project settings right away for Cell is able to

115
00:08:10,910 --> 00:08:13,610
detect the framework used by our project.

116
00:08:13,860 --> 00:08:16,490
It'll know exactly how to build our project.

117
00:08:16,790 --> 00:08:19,790
This is one of the most compelling features of our cell.

118
00:08:20,060 --> 00:08:23,120
It's able to build our project with its servers.

119
00:08:23,360 --> 00:08:26,090
We can avoid building the project ourselves.

120
00:08:26,600 --> 00:08:29,660
The default settings are optimized for our project.

121
00:08:29,900 --> 00:08:33,380
However, you're more than welcome to modify these settings.

122
00:08:33,590 --> 00:08:39,590
I'm going to click on Deploy after doing so for Cell will begin building our project.

123
00:08:39,919 --> 00:08:44,450
The deployment will take a couple of minutes while Versfeld does its thing.

124
00:08:44,540 --> 00:08:46,820
Let's talk about building a project.

125
00:08:49,390 --> 00:08:56,230
So far, we've been using the energy serve command to build our project, the Serve Command watches

126
00:08:56,230 --> 00:08:59,620
our project if changes are made to the project.

127
00:08:59,810 --> 00:09:06,280
It'll compile the project with the changes after the code has been compiled, the page on the browser

128
00:09:06,280 --> 00:09:07,180
is reloaded.

129
00:09:07,600 --> 00:09:13,240
This command is excellent for development, but it's not the command we'll use to build our project.

130
00:09:13,720 --> 00:09:17,860
These serve command doesn't fully optimize the build for production.

131
00:09:18,190 --> 00:09:20,140
It's meant for development only.

132
00:09:20,530 --> 00:09:25,710
If we want to build the project for production, we'll need to use the build command.

133
00:09:26,080 --> 00:09:31,550
Unlike the serve command, this command will compile and menoufiya the project in.

134
00:09:31,590 --> 00:09:37,990
It'll remove development dependencies, optimize the build and deliver your files in a single directory.

135
00:09:39,260 --> 00:09:45,710
Luckily, we don't need to run this command for cell will run the command during the deployment process.

136
00:09:45,950 --> 00:09:48,710
We can skip building the project entirely.

137
00:09:49,100 --> 00:09:51,860
This project has been successfully deployed.

138
00:09:52,100 --> 00:09:53,210
Let's check it out.

139
00:09:53,540 --> 00:09:57,860
Marcel should provide you with a public link for viewing your project.

140
00:10:00,390 --> 00:10:06,540
We've successfully deployed the application, you can log in with the dummy account you created during

141
00:10:06,540 --> 00:10:08,640
the development phase of the project.

142
00:10:08,970 --> 00:10:10,410
I'm going to do that now.

143
00:10:13,040 --> 00:10:14,450
We can even watch a clip.

144
00:10:17,150 --> 00:10:18,950
Everything works without a problem.

145
00:10:19,190 --> 00:10:20,090
Fantastic.

146
00:10:20,300 --> 00:10:26,480
Hopefully, I have convinced you that Purcell is a service you should consider for deploying your projects.

147
00:10:26,780 --> 00:10:28,430
It can offer so much more.

148
00:10:28,730 --> 00:10:30,620
We've only scratched the surface.

149
00:10:31,070 --> 00:10:31,910
We're finished.

150
00:10:32,090 --> 00:10:35,000
We've successfully written an angular application.

151
00:10:35,360 --> 00:10:38,000
I really appreciate you for taking this course.

152
00:10:38,240 --> 00:10:41,390
I hope I was able to help you with your development career.

153
00:10:41,630 --> 00:10:43,820
And so next time, I'll see you later.