1
00:00:00,550 --> 00:00:05,580
In last video we made a little change to the Express side of our application to make sure that it handles

2
00:00:05,580 --> 00:00:08,460
routing correctly when it's in production.

3
00:00:08,460 --> 00:00:12,780
We're now going to continue by talking about some changes we have to make around the client side of

4
00:00:12,780 --> 00:00:18,060
our application to make sure that any updates we make to the client side of our codebase are correctly

5
00:00:18,120 --> 00:00:20,120
reflected on our production server.

6
00:00:20,400 --> 00:00:26,580
So when we're talking about here well remember that just like two minutes ago we ran the NPM run build

7
00:00:26,580 --> 00:00:28,610
command from our client directory.

8
00:00:28,680 --> 00:00:30,030
So we were out the terminal.

9
00:00:30,030 --> 00:00:37,110
We ran NPM run built and that started up the build process to take all of our javascript code make a

10
00:00:37,110 --> 00:00:44,290
production version of it and then dump all that inside of our client build directory.

11
00:00:44,340 --> 00:00:50,220
Now as you might imagine every single time we build our project it's a one time step it's like we run

12
00:00:50,220 --> 00:00:56,460
it one time and that is a built version of our code base as it stands at that point in time.

13
00:00:56,610 --> 00:01:02,610
If I build my project and then I go back into my SIRC directory and start changing some re-act component

14
00:01:03,030 --> 00:01:05,080
I have to build my project again.

15
00:01:05,100 --> 00:01:06,790
I have to build a second time.

16
00:01:06,990 --> 00:01:13,260
I have to build my project every single time I go to deploy my application when I have made a change

17
00:01:13,530 --> 00:01:15,770
to the client side code base.

18
00:01:15,810 --> 00:01:20,760
So as you might imagine we need to make sure that any time we are going to deploy our application to

19
00:01:20,760 --> 00:01:26,940
Heroku we actually deploy are assuming we actually build our code base and then deploy it.

20
00:01:26,940 --> 00:01:32,730
So the second big part of this talk that we're having about deployment on Hoku is around exactly how

21
00:01:32,730 --> 00:01:35,490
we execute that build step.

22
00:01:35,490 --> 00:01:42,480
So the reason that this is kind of a big question at all is that by convention traditionally we do not

23
00:01:42,540 --> 00:01:46,050
commit any of our built assets to get.

24
00:01:46,050 --> 00:01:51,900
And remember we have a get based workflow for deployment we use get to commit our project and then push

25
00:01:51,900 --> 00:01:53,560
that to Heroku.

26
00:01:54,240 --> 00:02:00,600
So if we were to say hmm I want to build my project committed and then shove all that off to Heroku

27
00:02:00,930 --> 00:02:07,350
that means that we are including all of our build assets inside of our Get repository which is not necessarily

28
00:02:07,380 --> 00:02:11,790
a bad thing but by convention we dont really do it.

29
00:02:11,820 --> 00:02:16,170
So lets talk about a couple of different ways that we can handle building our project and deploying

30
00:02:16,170 --> 00:02:17,440
it to Heroku.

31
00:02:17,940 --> 00:02:18,500
Okay.

32
00:02:18,770 --> 00:02:21,320
So I got a good diagram on this one right here.

33
00:02:21,720 --> 00:02:24,000
So theres a couple of different options available to us.

34
00:02:24,000 --> 00:02:28,770
Obviously we're going to take one very specific option but I want to talk about all three of them.

35
00:02:28,770 --> 00:02:34,530
So remember the entire idea here is that we have to make sure that we actually build our project before

36
00:02:34,530 --> 00:02:39,030
we push it off to Hoku or at least before we intend to deploy it.

37
00:02:39,030 --> 00:02:40,720
So let's go through option number one.

38
00:02:40,740 --> 00:02:46,110
Option number 1 is the one I kind of just mentioned and I said this kind of violates convention.

39
00:02:46,320 --> 00:02:50,490
The one I've just mentioned it kind of violates convention of how we do web development or at least

40
00:02:51,000 --> 00:02:52,590
source control in general.

41
00:02:52,590 --> 00:02:59,540
So for option number one we can run the entry and run build command at our terminal on our local machine.

42
00:02:59,670 --> 00:03:06,060
We can commit that built project with all those built javascript files to our Get up repo and then we

43
00:03:06,060 --> 00:03:08,190
push that all off to Heroku.

44
00:03:08,670 --> 00:03:10,820
So no words were breaking convention.

45
00:03:10,830 --> 00:03:16,590
If we go with option number one remember I said there's not necessarily something inherently bad about

46
00:03:16,590 --> 00:03:22,290
this but it breaks convention and there are a couple small reasons to not go this way.

47
00:03:22,440 --> 00:03:26,850
Now I'll tell you that right out of the gate create re-act out actually makes this challenging to go

48
00:03:26,850 --> 00:03:33,000
with option number one right here because by default Krait react up doesn't commit the build directory

49
00:03:33,000 --> 00:03:33,590
in here.

50
00:03:33,710 --> 00:03:37,680
And inside my code editor you'll see that this whole directory is kind of greyed out.

51
00:03:37,680 --> 00:03:42,190
Again that's my code editor telling me all these files are ignored by get.

52
00:03:42,210 --> 00:03:44,290
And they will not be committed.

53
00:03:45,180 --> 00:03:45,420
OK.

54
00:03:45,420 --> 00:03:46,580
So that's option number one.

55
00:03:46,590 --> 00:03:48,360
Obviously it's pretty straightforward.

56
00:03:48,360 --> 00:03:52,760
You can run into them run build you commit those files you push off to Heroku.

57
00:03:52,770 --> 00:03:55,680
Everything seems to just magically work.

58
00:03:56,070 --> 00:04:00,870
Now option number two this one is getting a little bit more complicated but it's kind of making sure

59
00:04:00,870 --> 00:04:04,260
that we don't have to commit any of those built files.

60
00:04:04,650 --> 00:04:11,400
So in option number two we're going to say that the entire build process is being executed on Heroku

61
00:04:11,400 --> 00:04:12,370
servers.

62
00:04:12,780 --> 00:04:14,940
So we will commit all of our code.

63
00:04:15,180 --> 00:04:18,250
We do not build the project on our local laptop.

64
00:04:18,420 --> 00:04:25,290
We push it off to Hoku And then once our project is on Heroku we tell it to install all the dependencies

65
00:04:25,290 --> 00:04:31,230
for a client project and then to run the command to build the client project and then to actually deploy

66
00:04:31,230 --> 00:04:33,210
the stuff and actually serve it.

67
00:04:33,240 --> 00:04:39,110
So it's optional to here we are telling Heroku itself to take care of the entire build process.

68
00:04:39,510 --> 00:04:42,170
So you might look at option over to here and say oh well heck.

69
00:04:42,210 --> 00:04:45,730
This seems straightforward like we'll just have Heroku do do a build step.

70
00:04:46,170 --> 00:04:48,720
Well there's still kind of a bad side to this one.

71
00:04:48,720 --> 00:04:54,330
And I'm going to tell you that it's not only rephrased to say it's not bad per se but I'm going to say

72
00:04:54,330 --> 00:04:55,060
that this is where.

73
00:04:55,050 --> 00:05:02,110
Kind of like some developers superstition comes in you know superstition around thinking that you might

74
00:05:02,110 --> 00:05:04,020
have bad luck if you do it this way.

75
00:05:04,030 --> 00:05:05,300
And here's why.

76
00:05:05,410 --> 00:05:13,840
In order to get Heroku to build our project we have to install all key word here is all dependencies

77
00:05:14,440 --> 00:05:15,890
all dependencies.

78
00:05:15,940 --> 00:05:22,270
So when we install all dependencies I'm talking about like web pack and babbel anything else the battle

79
00:05:22,270 --> 00:05:25,040
depends upon anything else that well-packed depends upon.

80
00:05:25,180 --> 00:05:32,270
Any other pieces or dependencies that create re-act relies upon in the development environment at all.

81
00:05:32,590 --> 00:05:38,800
So when we tell her Oku to build our project we have to install all of those dependencies and so the

82
00:05:38,800 --> 00:05:44,470
kind of superstition here is that you are installing a ton of dependencies that are only being used

83
00:05:44,710 --> 00:05:50,890
for the development environment or just for like developing your application you're installing all these

84
00:05:50,890 --> 00:05:54,320
dependencies on your production server.

85
00:05:54,790 --> 00:05:57,070
So why do I say that superstition.

86
00:05:57,070 --> 00:05:58,480
Well it is superstition.

87
00:05:58,480 --> 00:06:01,230
Let me be clear it is completely superstitious.

88
00:06:01,270 --> 00:06:06,600
You are installing the dependencies for the development evironmental just to build the project.

89
00:06:06,640 --> 00:06:11,250
And then after that those dependencies will never be used again by Heroku.

90
00:06:11,410 --> 00:06:17,920
They do not get included into our client side javascript files they don't get included into the Express

91
00:06:17,920 --> 00:06:20,490
server they just exist on the hard drive.

92
00:06:20,530 --> 00:06:22,400
They never get loaded up into RAM.

93
00:06:22,450 --> 00:06:25,650
Never anything after that after the build is complete.

94
00:06:25,780 --> 00:06:29,710
So some people look at this right here and they say oh you're installing your development dependencies

95
00:06:29,710 --> 00:06:31,140
on your production machine.

96
00:06:31,340 --> 00:06:35,850
Yeah it doesn't matter because they're not actually used outside of the build process.

97
00:06:36,100 --> 00:06:36,880
So my opinion.

98
00:06:36,910 --> 00:06:43,360
Option number two here is pretty straightforward as well and it definitely follows convention as far

99
00:06:43,360 --> 00:06:47,170
as making sure that you do not actually commit your project.

100
00:06:47,200 --> 00:06:50,140
Now there is of course one final option here.

101
00:06:50,140 --> 00:06:56,080
So option number 3 and this option right here is a little bit more overkill certainly for the application

102
00:06:56,080 --> 00:06:56,940
we are building.

103
00:06:57,100 --> 00:07:04,210
But you might more commonly see this option right here at a company so at any serious company a startup

104
00:07:04,410 --> 00:07:10,390
a large midsize whatever company is telling you that this option exists and that you might see some

105
00:07:10,390 --> 00:07:16,650
companies in the wild at your job or freelance projects whatever using this type of process right here.

106
00:07:16,660 --> 00:07:23,710
So in this process we make use of a third party server to actually build the application.

107
00:07:23,710 --> 00:07:29,590
So we take all of our files all the re-act side of our application all the Express side will commit

108
00:07:29,620 --> 00:07:32,350
all of it to get and that will push it off to.

109
00:07:32,360 --> 00:07:40,030
We refer to as see-I or continuous integration a C.I. server which is how we usually refer to it a see-I

110
00:07:40,030 --> 00:07:47,530
server is a server that has the ability to run tests or checks or basically any task you can possibly

111
00:07:47,530 --> 00:07:49,830
imagine over your codebase.

112
00:07:50,170 --> 00:07:53,650
So a CIA server per Donnelley is set up for running tests.

113
00:07:53,800 --> 00:07:59,980
But we can easily configure a CII server to say OK after you run all these tests over our codebase.

114
00:08:00,160 --> 00:08:07,870
If the tests all successfully pass then install all the client dependencies all of them all the development

115
00:08:07,870 --> 00:08:08,790
ones as well.

116
00:08:08,980 --> 00:08:15,520
Build the project committed to a different branch like a deployment branch on get and then automatically

117
00:08:15,520 --> 00:08:22,660
push that build off to Heroku and that includes all of the actual built project files.

118
00:08:22,660 --> 00:08:29,110
So again this is really taking use or making use of a third party server some type of essentially intermediary

119
00:08:29,230 --> 00:08:33,190
that occurs between Heroku and our own personal laptop.

120
00:08:33,220 --> 00:08:35,330
So of course for us we don't have any tests.

121
00:08:35,350 --> 00:08:37,440
We don't have any extra steps like that to run.

122
00:08:37,600 --> 00:08:42,630
So for our application this would just like very much be overkill.

123
00:08:42,690 --> 00:08:45,880
My opinion we really don't need to go down this path right here.

124
00:08:46,090 --> 00:08:52,060
And technically what we're doing with option 2 is very similar where we are relying upon some outside

125
00:08:52,060 --> 00:08:56,350
server to build our project for us which is essentially what option number three is.

126
00:08:56,470 --> 00:09:00,310
The big difference between Option number two and number three is that that server that is doing the

127
00:09:00,310 --> 00:09:06,520
build process is our actual production server as opposed to this third party server being used for by

128
00:09:06,520 --> 00:09:07,350
s.i.

129
00:09:07,750 --> 00:09:13,810
Now regarding option 3 really quickly I want to say that if you want to like really dive into the rabbit

130
00:09:13,810 --> 00:09:18,910
hole and try to set this thing up I'm going to tell you this is not a trivial thing at all.

131
00:09:18,940 --> 00:09:21,440
This is pretty serious stuff right here.

132
00:09:21,490 --> 00:09:27,730
You can go over a circle site and you can sign up for it for free and use it to start actually building

133
00:09:27,730 --> 00:09:30,200
your project and doing your deployment to Roku.

134
00:09:30,310 --> 00:09:34,420
Now let me repeat again this is very serious stuff right here.

135
00:09:34,420 --> 00:09:36,220
You really shouldn't take it lightly.

136
00:09:36,280 --> 00:09:41,210
It would be a good side project but definitely outside of the scope of this course for setting up.

137
00:09:41,800 --> 00:09:42,130
OK.

138
00:09:42,160 --> 00:09:44,950
So in other words you know we're going with option number two here.

139
00:09:44,980 --> 00:09:51,430
So our goal is to make sure that we can push all of our code to Hoku make sure that Heroku installs

140
00:09:51,520 --> 00:09:57,730
all of our client side dependencies and then builds the project and starts up our server.

141
00:09:57,730 --> 00:10:00,040
So I think that this video has gone on long enough.

142
00:10:00,080 --> 00:10:01,130
Let's take a quick break.

143
00:10:01,130 --> 00:10:04,100
We're going to come back in the next video and start to tackle.

144
00:10:04,100 --> 00:10:05,920
Option number two for deployment.

145
00:10:06,110 --> 00:10:08,000
So I'll see you in just a minute.