1
00:00:00,600 --> 00:00:05,400
In the last video we spoke about a couple of different options we could use to build the client side

2
00:00:05,400 --> 00:00:10,180
project and start it up and make sure that it gets served by the Express server.

3
00:00:10,200 --> 00:00:12,590
So we settled on Option number two right here.

4
00:00:12,780 --> 00:00:17,190
Let's look at another diagram that's going to break down this flow in greater detail and get a better

5
00:00:17,190 --> 00:00:19,330
sense of how this is all going to work.

6
00:00:19,790 --> 00:00:20,140
OK.

7
00:00:20,220 --> 00:00:23,070
So here we go zoom in a little bit.

8
00:00:23,400 --> 00:00:25,360
So this is the flow that we're going to go through.

9
00:00:25,410 --> 00:00:27,180
This isn't exactly how we're going to wire it up.

10
00:00:27,180 --> 00:00:31,220
This is how the flow is actually going to work when we deploy our application.

11
00:00:31,560 --> 00:00:39,340
So we're going to commit all of our files to get we're going to push those files to Heroku when we push

12
00:00:39,340 --> 00:00:40,270
to Hoku.

13
00:00:40,410 --> 00:00:45,210
It's going to automatically install all of our server dependencies just as it did before.

14
00:00:45,210 --> 00:00:48,740
So this is a step this right here this step was already occurring.

15
00:00:48,750 --> 00:00:51,980
This was something that's already happening inside of our project.

16
00:00:52,170 --> 00:00:54,250
Now the new stuff is down here.

17
00:00:55,140 --> 00:01:01,470
So we're going to say that after Heroku runs all of the server dependencies it's going to attempt to

18
00:01:01,560 --> 00:01:07,990
automatically run a script called Heroku post built inside of that script.

19
00:01:08,130 --> 00:01:14,370
We can give Heroku additional instructions on how to set up and start running our application.

20
00:01:14,430 --> 00:01:17,980
And so inside of this Heroku post build script right here.

21
00:01:18,120 --> 00:01:25,170
We are going to tell Heroku that it needs to install all of our client dependencies like all of them

22
00:01:25,170 --> 00:01:27,640
including all the development dependencies as well.

23
00:01:27,870 --> 00:01:34,260
And then tell it that it needs to run the command and run build from within our client project directory.

24
00:01:34,260 --> 00:01:37,290
So that's going to start up the build process.

25
00:01:37,290 --> 00:01:39,880
It's going to make all the production version of our assets.

26
00:01:39,930 --> 00:01:45,060
And then when this whole command right here finishes her is going to go along its way and continue trying

27
00:01:45,060 --> 00:01:47,200
to start up our application.

28
00:01:47,220 --> 00:01:49,180
So couple of steps here.

29
00:01:49,180 --> 00:01:50,320
It won't be that bad.

30
00:01:50,400 --> 00:01:53,420
Honestly the code that we write here is going to be straightforward.

31
00:01:53,430 --> 00:01:59,520
The reason it's difficult is understanding why we're writing the code and exactly what we're writing.

32
00:01:59,520 --> 00:02:00,560
So you really have to dig in.

33
00:02:00,570 --> 00:02:05,020
Heroku is documentation a little bit to understand exactly what's going on with these steps.

34
00:02:05,480 --> 00:02:05,740
OK.

35
00:02:05,760 --> 00:02:06,650
So let's get to it.

36
00:02:06,660 --> 00:02:12,150
The first thing I want to do is look up some documentation on Hoku where we can figure out how to tell

37
00:02:12,150 --> 00:02:19,500
it that it needs to install all client dependencies including all the development modules as well.

38
00:02:19,500 --> 00:02:22,340
So I've already pulled up that documentation.

39
00:02:22,340 --> 00:02:27,290
I'll scroll to the top here really quickly if you want to you can find the article called Roku no JSE

40
00:02:27,330 --> 00:02:33,310
supports and it will give you a bunch of different you know stuff in here for exactly how you customize

41
00:02:33,320 --> 00:02:34,990
no data on Heroku.

42
00:02:35,280 --> 00:02:39,130
So we want to find I zoom in here really quickly for you.

43
00:02:39,390 --> 00:02:44,560
We want to find the section somewhere around like on road customizing build process.

44
00:02:44,580 --> 00:02:45,870
So right here.

45
00:02:46,110 --> 00:02:52,410
So customizing the build process you can read very plainly says if there is a build step that you want

46
00:02:52,410 --> 00:02:53,970
to run when you deploy.

47
00:02:54,120 --> 00:02:58,400
You can use a post install script inside the package not just on file.

48
00:02:58,740 --> 00:03:03,540
So we've worked with that script section quite a bit and we've already defined the NPM start script

49
00:03:03,540 --> 00:03:04,350
right here.

50
00:03:04,470 --> 00:03:11,280
So Heroku is telling us if you define a script called literally post install it will automatically run

51
00:03:11,280 --> 00:03:18,690
that after or soon will automatically run that after installing all the server side and modules.

52
00:03:18,720 --> 00:03:23,420
So this post install right here will be automatically called for us.

53
00:03:23,700 --> 00:03:28,840
Now even in the example you see right here is an example of building a client side project.

54
00:03:28,890 --> 00:03:37,240
Bauer is a client side javascript dependency management system and Grundt is a module or a task runner.

55
00:03:37,260 --> 00:03:41,610
Not unlike web pack which is what we're using behind the scenes to build our application.

56
00:03:41,610 --> 00:03:47,390
So very clearly like yeah we're doing the right thing right here by using Heroku to build our project.

57
00:03:47,490 --> 00:03:52,070
Now if we scroll down a little bit you'll see that it says Heroku specific build steps.

58
00:03:52,260 --> 00:03:58,650
And so it says While no jazz has standard scripts sometimes you may only want to run this before or

59
00:03:58,650 --> 00:04:00,910
after builds on Heroku.

60
00:04:01,320 --> 00:04:06,660
For example you might want to configure Heroku dependencies blah blah or very specific to us.

61
00:04:06,670 --> 00:04:08,240
Here is the real key right here.

62
00:04:08,250 --> 00:04:12,240
You may need to build production assets after dependencies are installed.

63
00:04:12,240 --> 00:04:14,310
So that is pretty much us right here.

64
00:04:14,310 --> 00:04:20,790
We're going to add a script that is only executed after NPM modules are installed for the server side

65
00:04:20,790 --> 00:04:23,060
of our project on Hoku.

66
00:04:23,160 --> 00:04:24,900
We only want to do that on Hoku.

67
00:04:25,200 --> 00:04:29,850
So the reason that we're going to use this script right here rather than just the generic post install

68
00:04:30,750 --> 00:04:37,110
is that post install right here will be executed if you run and humans install on your own local machine

69
00:04:37,110 --> 00:04:37,720
as well.

70
00:04:37,740 --> 00:04:43,670
And so obviously if some new developer clones or grabs your application and runs into install to set

71
00:04:43,670 --> 00:04:49,430
up the server you don't want them to also automatically start building the client side project as well.

72
00:04:49,440 --> 00:04:55,690
So by using Heroku post build we ensure that we are only running this thing on her oku.

73
00:04:56,280 --> 00:05:01,890
OK so I know that I just said that we were going to talk about how to install the client side dependencies

74
00:05:01,900 --> 00:05:04,970
so we kind of skipped there a little bit to talking out the script.

75
00:05:05,110 --> 00:05:10,600
So let's continue looking at that document and I will show you how we tell Heroku to install all client

76
00:05:10,600 --> 00:05:11,850
dependencies.

77
00:05:12,040 --> 00:05:16,580
So if we scroll down a little bit here is dev dependencies.

78
00:05:16,600 --> 00:05:22,300
And so essentially if you want to install dev dependencies to your project which are dependencies in

79
00:05:22,300 --> 00:05:29,200
use for solely development purposes and that's exactly what we want to do here then you can run this

80
00:05:29,260 --> 00:05:30,870
line of code right here.

81
00:05:30,920 --> 00:05:37,470
Now if you look closely at this line this says set an environment variable on our Haruko instance that

82
00:05:37,480 --> 00:05:40,430
says NPM config production equals false.

83
00:05:40,870 --> 00:05:47,170
And so what this does right here is it makes sure that any time you install any NPM modules on Roku

84
00:05:47,230 --> 00:05:54,250
you get both development and dependency modules and so that would also affect how our server side dependencies

85
00:05:54,250 --> 00:05:58,710
are installed as well because we're setting this kind of global flag here with this line.

86
00:05:58,990 --> 00:06:03,490
So we're going to do something similar to this but we're going to make sure that it does not affect

87
00:06:03,490 --> 00:06:04,300
our server.

88
00:06:04,300 --> 00:06:08,100
We're going to make sure that it only affects the client side of our project.

89
00:06:08,170 --> 00:06:09,810
OK.

90
00:06:10,780 --> 00:06:11,780
That's a lot of talking.

91
00:06:12,000 --> 00:06:12,340
OK.

92
00:06:12,370 --> 00:06:16,130
So we've essentially discussed Heroku post bills.

93
00:06:16,180 --> 00:06:20,560
We've discussed how we set up these client side dependencies and then we're going to figure out how

94
00:06:20,560 --> 00:06:22,450
we actually build our project.

95
00:06:22,540 --> 00:06:23,250
So let's get to it.

96
00:06:23,260 --> 00:06:25,310
Let's do the actual configuration here.

97
00:06:25,350 --> 00:06:28,720
Again the actual code we write is straightforward.

98
00:06:28,870 --> 00:06:30,750
It just is knowing what to write.

99
00:06:30,760 --> 00:06:33,110
That is the challenge.

100
00:06:33,130 --> 00:06:39,310
So back inside my code editor I'm going to find my project package not just some file inside of my root

101
00:06:39,400 --> 00:06:40,650
server directory.

102
00:06:40,930 --> 00:06:48,310
Remember that when we push our application to Heroku Heroku does not care at all about the package not

103
00:06:48,360 --> 00:06:55,330
just on file inside the client directory all the Heroku configuration all the Heroku we set up has to

104
00:06:55,330 --> 00:07:00,740
occur inside the server because this is the only package not just on that Heroku cares about.

105
00:07:00,940 --> 00:07:01,330
OK.

106
00:07:01,390 --> 00:07:08,830
So inside if you're going to find my scripts section right here then we're going to add in a new script.

107
00:07:08,830 --> 00:07:14,470
So this is going to be the script that gets called automatically after our server has completed installing

108
00:07:14,470 --> 00:07:16,330
its own dependencies.

109
00:07:16,330 --> 00:07:21,670
So at the end of the line labeled dev going to make sure I put down a comma like so and then on the

110
00:07:21,670 --> 00:07:26,220
line writer Neith it will put down Heroku dush post build.

111
00:07:26,290 --> 00:07:32,770
So this script right here will be called automatically after server dependencies have installed.

112
00:07:32,770 --> 00:07:37,900
So the first thing we're going to do inside of here is make sure that we tell Heroku to install all

113
00:07:37,900 --> 00:07:42,970
MPO modules both in development dependencies and the production dependencies as well.

114
00:07:42,970 --> 00:07:46,240
So essentially this is doing what this section says.

115
00:07:46,240 --> 00:07:49,610
Like I said word is going to do it in a slightly different fashion.

116
00:07:49,660 --> 00:07:58,150
So inside if you're going to say with all capitals NPM underscore config underscore production equals

117
00:07:58,690 --> 00:07:59,830
false.

118
00:08:00,460 --> 00:08:05,680
So by putting this statement right here inside of this script it ensures that this environment variable

119
00:08:05,680 --> 00:08:09,730
will be only set for the duration of this command.

120
00:08:09,730 --> 00:08:14,870
So like I said we don't want to set this kind of change how things are being done on our server.

121
00:08:14,920 --> 00:08:21,640
We want to only have this flag set right here for dependencies that are installed on our client project.

122
00:08:21,640 --> 00:08:28,750
So now after saying equals false I'll put a space and we're going to first tell Heroku that it needs

123
00:08:28,750 --> 00:08:32,940
to install all of the dependencies inside of our client side project.

124
00:08:33,070 --> 00:08:39,420
And then after all those dependencies are installed it needs to then build the client side project.

125
00:08:39,630 --> 00:08:45,760
So I to say NPM install dash dash prefix client

126
00:08:48,240 --> 00:08:54,450
remember dash dash prefix right here client we have to put this on because we want to run the NPM install

127
00:08:54,450 --> 00:08:58,600
command inside the client directory not the current directory.

128
00:08:58,710 --> 00:09:04,740
If we just ran NPM install that would re-install all of the server side dependencies because Heroku

129
00:09:04,980 --> 00:09:08,880
thinks that the server side project is really the only one that exists here.

130
00:09:08,940 --> 00:09:14,340
So we are specifically specifically telling Heroku go into a client directory and install all of the

131
00:09:14,340 --> 00:09:19,390
dependencies that are listed inside of that folders package done Jason.

132
00:09:19,410 --> 00:09:23,850
So this right here is going to install all of our dependencies and we want to make sure that immediately

133
00:09:23,880 --> 00:09:29,190
after that process is complete we then build our project sold to another space.

134
00:09:29,190 --> 00:09:31,110
And yes this line is going to be very long.

135
00:09:31,180 --> 00:09:34,370
I'll show you the entire line in just a minute I'm going to say.

136
00:09:34,500 --> 00:09:40,430
And and so ampersand ampersand NPM run build.

137
00:09:40,590 --> 00:09:45,450
And then again we want to make sure that this script right here this command is executed from within

138
00:09:45,450 --> 00:09:46,670
the client directory.

139
00:09:46,980 --> 00:09:52,820
So again I'm going to say dash dash prefix client like so.

140
00:09:53,610 --> 00:09:53,890
OK.

141
00:09:53,910 --> 00:09:55,390
So a very long script right here.

142
00:09:55,410 --> 00:10:00,540
I'm going to copy the entire thing and put it into a new file just to make sure you can read the whole

143
00:10:00,540 --> 00:10:01,990
thing correctly.

144
00:10:02,070 --> 00:10:05,800
So I'm going to put in some new lines here just so you can read it easily

145
00:10:09,700 --> 00:10:14,800
so in your package objects on file do not put in the new lines just keep everything on a single line

146
00:10:14,800 --> 00:10:15,550
like this right here.

147
00:10:15,630 --> 00:10:16,610
And just to be clear.

148
00:10:16,960 --> 00:10:20,990
So make sure you've got the correct spelling on NPM config production.

149
00:10:21,010 --> 00:10:22,730
Make sure you say it to False.

150
00:10:22,750 --> 00:10:27,710
Make sure you've got the dash dash prefix on both these commands you install.

151
00:10:27,770 --> 00:10:29,970
Just install the next one is NPM.

152
00:10:30,010 --> 00:10:30,940
Run built.

153
00:10:31,030 --> 00:10:32,360
So three words on this command.

154
00:10:32,360 --> 00:10:35,040
Here are the make sure you have two.

155
00:10:35,260 --> 00:10:39,900
Two very important here two ampersands between the two commands.

156
00:10:40,610 --> 00:10:41,070
OK.

157
00:10:41,140 --> 00:10:43,730
So hopefully we got all the typing here correct.

158
00:10:43,780 --> 00:10:47,680
If you made any typo here you're going to know about it very quickly.

159
00:10:47,680 --> 00:10:52,420
When we tried to deploy the application it's going to close this out and make sure that the package

160
00:10:52,450 --> 00:10:54,790
not some file is saved.

161
00:10:54,790 --> 00:10:56,660
That's pretty much it for configuration.

162
00:10:56,680 --> 00:11:01,960
So the last thing we need to do is commit all the changes we've made to our project to get and then

163
00:11:01,960 --> 00:11:04,110
push our project up to her OK.

164
00:11:04,720 --> 00:11:08,620
So I'm going to change back over to my terminal.

165
00:11:08,620 --> 00:11:11,230
I'm inside the server directory right now.

166
00:11:11,320 --> 00:11:15,340
I'm going to look at all the different changes that we've made to our project.

167
00:11:15,340 --> 00:11:19,630
So we'll do that by running get status now very quickly.

168
00:11:19,630 --> 00:11:21,180
I only have a single file right here.

169
00:11:21,190 --> 00:11:23,290
You probably have many files listed.

170
00:11:23,320 --> 00:11:28,750
You probably have a lot of stuff I have just one file right here just because of the way that I've been

171
00:11:28,750 --> 00:11:29,470
managing.

172
00:11:29,470 --> 00:11:31,040
Get inside this project.

173
00:11:31,150 --> 00:11:36,730
I've been having to kind of do a lot of extra steps here just to make sure that I have got a running

174
00:11:37,510 --> 00:11:42,170
record of all the changes that I've made to the course on a video per video basis.

175
00:11:42,190 --> 00:11:46,520
So that's why for me I have one file here but you probably have very many.

176
00:11:47,230 --> 00:11:49,350
So we're going to add this file out.

177
00:11:49,360 --> 00:11:57,010
All these changes to our source control by saying Get add dot within committed with get commit dash

178
00:11:57,070 --> 00:12:03,190
him and I will say added billing and client side out.

179
00:12:03,650 --> 00:12:08,790
We're going to close off the double quote string entered to commit it.

180
00:12:08,800 --> 00:12:09,430
Oops.

181
00:12:09,670 --> 00:12:11,220
There we go.

182
00:12:11,260 --> 00:12:17,170
So I've now made all my changes like so and so now the very last step is to actually deploy this to

183
00:12:17,170 --> 00:12:17,890
Heroku.

184
00:12:18,140 --> 00:12:23,080
And so again you're going to run the command get push Heroku master.

185
00:12:23,170 --> 00:12:28,830
Now when you press enter here and deploy the application everything should work out OK for you.

186
00:12:28,840 --> 00:12:31,980
For me I'm probably going to see an error message again.

187
00:12:32,090 --> 00:12:36,220
So because the fact of the way that I've been maintaining the good side of the repository a little bit

188
00:12:36,220 --> 00:12:38,230
different so I'll probably see an error message.

189
00:12:38,230 --> 00:12:39,920
You very likely should not.

190
00:12:39,960 --> 00:12:44,520
So I'm going to run this and actually I didn't.

191
00:12:44,520 --> 00:12:45,230
Fantastic.

192
00:12:45,260 --> 00:12:47,090
Well I really lucked out this time.

193
00:12:49,720 --> 00:12:52,110
OK so it looks like it's going through the step here.

194
00:12:52,110 --> 00:12:53,950
It's taking all the changes we've made.

195
00:12:53,970 --> 00:12:57,810
And again we're starting to see a lot of output from Heroku right here.

196
00:12:57,810 --> 00:12:59,270
Now some really interesting stuff.

197
00:12:59,280 --> 00:13:01,140
You're going to see popping up very shortly.

198
00:13:01,290 --> 00:13:06,750
You will see a step that says something like building dependencies so installing node modules from the

199
00:13:06,750 --> 00:13:13,190
package not just some file and then you're going to see a message that says running Heroku dash post-flight.

200
00:13:13,350 --> 00:13:20,130
So it's successfully recognized that we added in that new little configuration script of Heroku dash

201
00:13:20,140 --> 00:13:24,980
post-flight And so we should see something like that right there or like this right here is something

202
00:13:24,990 --> 00:13:30,680
and says OK we are now running this command of NPM config files and install blah blah blah.

203
00:13:31,080 --> 00:13:36,160
So here the NPM install process on our client project.

204
00:13:36,180 --> 00:13:41,610
It probably took about 30 seconds or so yours might be slightly faster slightly shorter after the install

205
00:13:41,610 --> 00:13:46,370
was complete and then kicks into the actual build process of the application.

206
00:13:46,380 --> 00:13:51,840
So we saw that message previously you know creating a production built it looks like that succeeded.

207
00:13:51,840 --> 00:13:56,310
And so now our application is completely deployed.

208
00:13:56,310 --> 00:14:01,590
Now I want to tell you at this point that it's entirely possible even likely that you might have made

209
00:14:01,590 --> 00:14:04,400
a typo somewhere along the line if you did.

210
00:14:04,410 --> 00:14:07,820
The easiest way to debug it is to check out an error message.

211
00:14:07,830 --> 00:14:13,830
So during that deploy you might have seen an error message or even right now we can see if any errors

212
00:14:13,830 --> 00:14:20,250
occurred by running the command Heroku logs like so and so if there is any errors during this process

213
00:14:20,250 --> 00:14:24,200
whatsoever we would see them when we run this command Brochu logs.

214
00:14:24,570 --> 00:14:28,860
So for me it looks like everything worked correctly because I see my startup script right here.

215
00:14:28,860 --> 00:14:30,500
I have the two deprecation.

216
00:14:30,510 --> 00:14:35,220
I know these are so annoying messages from mongoose and then eventually I see the message that says

217
00:14:35,400 --> 00:14:37,220
state change to starting up.

218
00:14:37,260 --> 00:14:40,190
So our application is successfully starting up.

219
00:14:40,200 --> 00:14:42,990
So now the very last thing is to test this out inside the browser.

220
00:14:42,990 --> 00:14:50,820
So run Heroku open to see how everything's doing inside server server and lo and behold magically the

221
00:14:50,820 --> 00:14:52,700
application pops up.

222
00:14:53,400 --> 00:14:53,870
OK.

223
00:14:53,910 --> 00:14:55,370
So this is looking pretty awesome.

224
00:14:55,380 --> 00:14:58,020
It looks like the deployment actually worked.

225
00:14:58,020 --> 00:15:03,630
Again if something did not work if you got an error message or if you don't see the react side the application

226
00:15:03,630 --> 00:15:04,980
pop up right here.

227
00:15:05,460 --> 00:15:10,380
I would encourage you to go back to the terminal again and run Heroku logs.

228
00:15:10,440 --> 00:15:15,900
So if you did not see the application pop up here when you tried to access this page inside your browser

229
00:15:16,290 --> 00:15:19,630
it might have caused the server to throw an error of some sort.

230
00:15:19,680 --> 00:15:24,960
And so that's why I suggest running Raku logs again because if you run it again you'll see any follow

231
00:15:24,960 --> 00:15:27,180
up error messages that you might get.

232
00:15:27,180 --> 00:15:34,050
And so when I run Horo gulags you'll start to notice all the extra messages in here that says oh someone

233
00:15:34,050 --> 00:15:40,890
made a request to the route route and they came back and made another request for CSSA file and they

234
00:15:40,890 --> 00:15:44,420
came back and they'd made another request for a javascript file as well.

235
00:15:44,670 --> 00:15:48,540
And then they made a request for the current user and then some font file.

236
00:15:48,600 --> 00:15:49,920
And so clearly you can tell.

237
00:15:49,950 --> 00:15:51,910
Yeah a lot of stuff going on here.

238
00:15:52,410 --> 00:15:52,850
OK.

239
00:15:52,950 --> 00:15:55,770
So hopefully everything works out for you correctly at this point.

240
00:15:55,770 --> 00:15:56,610
Let's take a break.

241
00:15:56,610 --> 00:16:00,930
We're going to continue in the next video and we're going to look at a couple of interesting parts around

242
00:16:00,930 --> 00:16:05,880
our deployed application that should hopefully help us understand a little bit more about exactly how

243
00:16:05,880 --> 00:16:07,740
the Express server is behaving now.

244
00:16:07,800 --> 00:16:09,420
So I'll see you in just a minute.