1
00:00:00,500 --> 00:00:06,860
OK so the very first thing we're going to do is go over to Heroku dot com.

2
00:00:07,440 --> 00:00:11,010
H e r o k you dot com.

3
00:00:11,010 --> 00:00:13,870
And we're going to sign up.

4
00:00:14,230 --> 00:00:21,880
So I'm going to sign up with my name e-mail.

5
00:00:21,930 --> 00:00:28,110
You do need to put a real e-mail here and you should anyways because for one thing they send that e-mail

6
00:00:28,110 --> 00:00:33,870
confirmation so you have to check that e-mail but more importantly you'll get updates about if there

7
00:00:33,870 --> 00:00:40,100
is for some reason some freak accident Heroku servers get hit by a lightning bolt or something.

8
00:00:40,110 --> 00:00:43,050
You'll get updates about what's happening.

9
00:00:43,560 --> 00:00:44,520
So our company name.

10
00:00:44,520 --> 00:00:48,420
I'll just say Web Dev Bootcamp.

11
00:00:48,420 --> 00:00:49,470
You don't have to put anything.

12
00:00:49,470 --> 00:00:57,210
It's not really going to make a difference but let's put no J.S. create free account then go check your

13
00:00:57,210 --> 00:00:59,780
email and confirm your account.

14
00:00:59,790 --> 00:01:00,330
All right.

15
00:01:00,540 --> 00:01:05,970
So once you do that it will ask you so you click the link and you are asked to create a password confirm

16
00:01:05,970 --> 00:01:06,990
the password.

17
00:01:07,200 --> 00:01:12,610
And then once you finish creating your account it should take you to your Heroku dashboard.

18
00:01:13,140 --> 00:01:17,760
And this is going to be a place where you'll be able to see the apps that you have deployed.

19
00:01:18,150 --> 00:01:22,860
You'll be able to turn them on and off set you are else.

20
00:01:23,090 --> 00:01:28,050
And any sort of other things you need to configure and the permission in security issues.

21
00:01:28,050 --> 00:01:31,700
This is your home base for any apps you have to put on her.

22
00:01:31,710 --> 00:01:32,430
OK.

23
00:01:33,060 --> 00:01:35,750
So we're actually going to navigate away from this for now.

24
00:01:35,850 --> 00:01:38,290
But if you do want to poke around take a look.

25
00:01:38,370 --> 00:01:40,160
They have some good getting started guys.

26
00:01:40,230 --> 00:01:45,930
So if you click on the getting started with Noad guide it will show you the steps that were going to

27
00:01:45,930 --> 00:01:47,440
go through here.

28
00:01:47,490 --> 00:01:49,520
And so I will reference this.

29
00:01:49,530 --> 00:01:52,730
But you can also just watch this video to see what you need to do.

30
00:01:53,070 --> 00:01:58,530
So the very first thing that it talks about here is installing downloading and installing the Heroku

31
00:01:58,770 --> 00:02:02,390
toolbelt for Mac or whatever machine that you're using.

32
00:02:02,400 --> 00:02:06,230
We actually don't have to use this because we're using Cloud 9.

33
00:02:06,390 --> 00:02:08,260
So it comes preinstalled.

34
00:02:08,340 --> 00:02:08,680
Sorry.

35
00:02:08,700 --> 00:02:09,510
We do need to use it.

36
00:02:09,510 --> 00:02:10,550
We don't have to download it.

37
00:02:10,560 --> 00:02:11,830
Excuse me.

38
00:02:12,030 --> 00:02:13,670
It comes pre-installed for us.

39
00:02:13,890 --> 00:02:20,550
So if you go to cloud 9 what we can actually do is make sure we're in the right directory and we stop

40
00:02:20,550 --> 00:02:21,700
our server.

41
00:02:22,260 --> 00:02:23,440
Great.

42
00:02:23,670 --> 00:02:33,600
If you just type the word Heroku you'll see that we get some output anything other than commed not found

43
00:02:33,900 --> 00:02:38,520
means that we have Heroku installed and that just comes with Cloud 9 for free.

44
00:02:38,520 --> 00:02:45,360
If you're doing this on a machine or you're not using Cloud 9 you can of course download the correct

45
00:02:45,360 --> 00:02:47,790
version and follow the instructions.

46
00:02:47,820 --> 00:02:53,760
So the first thing we want to do is follow what it said which is Heroku log it and this will prompt

47
00:02:53,760 --> 00:02:55,320
you for your e-mail

48
00:02:58,770 --> 00:03:00,850
that you signed up for Heroku with.

49
00:03:00,850 --> 00:03:07,140
So it has to match and it will also prime prompt you for your password and it will look like you're

50
00:03:07,140 --> 00:03:08,970
not typing just hides it.

51
00:03:09,180 --> 00:03:11,060
So don't be concerned.

52
00:03:11,070 --> 00:03:11,930
There we go.

53
00:03:11,970 --> 00:03:14,820
We want to see authentication successful.

54
00:03:15,240 --> 00:03:19,060
So what we've done now is basically okayed this machine.

55
00:03:19,080 --> 00:03:27,900
This cloud nine workspace to work with to add integrate to basically transfer stuff to Heroku our Heroku

56
00:03:27,960 --> 00:03:33,870
space on her servers because remember that's all that we're doing is we're going to be sending this

57
00:03:33,870 --> 00:03:38,410
application and copying it over to Heroku machines.

58
00:03:38,580 --> 00:03:41,910
So of course we don't want to let anyone do that to to our account.

59
00:03:41,910 --> 00:03:47,510
We only want machines that we've signed in on that we've authenticated to be able to do that.

60
00:03:47,860 --> 00:03:48,180
OK.

61
00:03:48,180 --> 00:03:49,590
So that's the first step.

62
00:03:49,590 --> 00:03:54,830
The next thing we need to do is actually make sure that we're using get in this directory.

63
00:03:55,050 --> 00:04:00,300
So in the directory the top level directory of our project is is important.

64
00:04:00,300 --> 00:04:06,030
You don't do it where you have other projects you're not doing it in this folder but in the directory

65
00:04:06,030 --> 00:04:08,040
where your app JSE is in your package.

66
00:04:08,070 --> 00:04:15,080
Jason we want to run get status and in my case I'm going to see not a good repository.

67
00:04:15,270 --> 00:04:18,620
So we want to make it a get repository get in it.

68
00:04:18,900 --> 00:04:27,570
We use good to tell to determine what to send over to Heroku and in our case we're going to send the

69
00:04:27,570 --> 00:04:29,530
entire application.

70
00:04:29,550 --> 00:04:37,830
So once we initialize a repository we're going to go ahead and add the files that we want to send over

71
00:04:37,830 --> 00:04:39,640
to her OK with it.

72
00:04:39,690 --> 00:04:40,860
So that's everything.

73
00:04:41,190 --> 00:04:49,050
So we're just going to do one at a time get ADD Yes it add package that Jason and get add views that

74
00:04:49,050 --> 00:04:50,760
whole directory will do.

75
00:04:50,760 --> 00:04:52,140
Get commit.

76
00:04:52,860 --> 00:05:01,010
And we'll just say initial comment great if you go back to the instructions you'll see a few things

77
00:05:01,010 --> 00:05:01,410
.

78
00:05:01,760 --> 00:05:04,180
Once you install the toolbelt you can click.

79
00:05:04,190 --> 00:05:09,550
I have installed it in this example this tutorial they give you a demo app.

80
00:05:09,710 --> 00:05:13,700
We already have one so you can just say I cloned the app source code.

81
00:05:13,700 --> 00:05:18,550
The next thing that it tells you to do is run a command called Heroku create.

82
00:05:18,890 --> 00:05:20,880
So we can go ahead and do that.

83
00:05:21,110 --> 00:05:27,650
And what that will do is actually make space on Heroku make a new application generate a u r l for you

84
00:05:28,340 --> 00:05:32,140
in a sushi area with this current and get repository.

85
00:05:32,150 --> 00:05:33,580
So I'm going to run that right now.

86
00:05:33,680 --> 00:05:35,140
Heroku create

87
00:05:39,800 --> 00:05:45,500
and you can see first this wouldn't work if I wasn't logged into if I didn't run Heroku log in it would

88
00:05:45,500 --> 00:05:51,560
ask me to authenticate first but you can see that it makes me a new application and it gives it a random

89
00:05:51,560 --> 00:05:52,010
name.

90
00:05:52,040 --> 00:05:57,080
Heroku is pretty famous for these peaceful Zen nature ish names.

91
00:05:57,090 --> 00:06:02,580
They come up with so nameless at all here with this random number.

92
00:06:02,780 --> 00:06:07,580
It also gives you this you know where your application will be deployed to.

93
00:06:07,850 --> 00:06:09,490
You can change this.

94
00:06:09,530 --> 00:06:17,240
You can look at the Roku docs you can specify your own Heroku app dot com domain if you want.

95
00:06:17,240 --> 00:06:22,070
So if you wanted to check if this demo application.

96
00:06:22,070 --> 00:06:27,590
One two three dot Heroku app dot com is available you can do that but you can also of course have your

97
00:06:27,590 --> 00:06:28,400
own domain.

98
00:06:28,490 --> 00:06:33,200
So if you own Salli dot com or clouds are awesome.

99
00:06:33,290 --> 00:06:37,740
I know you can deploy an app that is deployed to Roku.

100
00:06:37,780 --> 00:06:41,960
You can set it up so that it works with your domain but you wouldn't do that just yet.

101
00:06:42,080 --> 00:06:47,680
So you still create this application here you get this random Hoku you are now if we visit that right

102
00:06:47,690 --> 00:06:48,140
now

103
00:06:50,990 --> 00:06:53,630
we just get this default welcome to your new app.

104
00:06:53,620 --> 00:06:56,340
We don't have any code associated with this app yet.

105
00:06:56,390 --> 00:07:01,370
Heroku just knows that we want to make an app that we have an empty app there.

106
00:07:01,370 --> 00:07:06,720
One other thing that happened is that it added a remote to our Get repository called Heroku.

107
00:07:06,950 --> 00:07:15,290
So if you take a look at Get remote's dash B you'll see here it added a remote called Heroku that we

108
00:07:15,290 --> 00:07:16,590
can push code to.

109
00:07:16,630 --> 00:07:17,850
So this is really important.

110
00:07:17,900 --> 00:07:21,260
This is how you basically transfer the code.

111
00:07:21,250 --> 00:07:24,850
This is how I'm going to tell Heroku Here's the code I want you to run.

112
00:07:24,860 --> 00:07:27,910
So when I push to Heroku I'll run a command.

113
00:07:27,950 --> 00:07:32,250
Get push Heroku master.

114
00:07:32,360 --> 00:07:37,420
So that's going to push whatever code I have added and committed on the master ranch over to Heroku

115
00:07:37,480 --> 00:07:37,890
.

116
00:07:38,240 --> 00:07:39,880
So in this case that's everything.

117
00:07:39,920 --> 00:07:42,840
Again sometimes you don't want to push every single thing.

118
00:07:42,860 --> 00:07:48,260
Maybe there's some new code that you don't want to send over to your production server but in this case

119
00:07:48,740 --> 00:07:49,940
we want everything over.

120
00:07:49,970 --> 00:07:51,600
The app is working the way we want.

121
00:07:51,680 --> 00:07:53,300
So we're just going to push everything.

122
00:07:53,300 --> 00:07:59,540
So get push Heroku master before I do that you'll see in a tutorial.

123
00:07:59,540 --> 00:08:00,590
It also tells how to do that.

124
00:08:00,590 --> 00:08:05,380
So if you get lost if your prefer watching or reading the tutorial you can follow that.

125
00:08:05,380 --> 00:08:07,390
We're doing exactly the same step.

126
00:08:07,580 --> 00:08:12,110
So get push Heroku M. OK so we can hit enter.

127
00:08:12,230 --> 00:08:16,700
I'll warn you that there is one thing that we haven't done that's going to cause a small problem but

128
00:08:16,700 --> 00:08:21,930
I did it on purpose because I want to show you the process of debugging Heroku.

129
00:08:22,160 --> 00:08:23,210
So I'm going to hit enter though

130
00:08:26,760 --> 00:08:30,890
and it takes a little bit usually especially with larger apps.

131
00:08:31,220 --> 00:08:32,590
A lot of stuff is happening here.

132
00:08:32,600 --> 00:08:35,880
Usually this doesn't happen when you just push to get hub.

133
00:08:35,930 --> 00:08:38,190
So this is all Heroku magic.

134
00:08:38,620 --> 00:08:41,570
You can go back and read a bunch of stuff about what's happening.

135
00:08:41,830 --> 00:08:49,880
Let's see it detected that it's a node app it installed some of the important dependencies or the Pineries

136
00:08:50,090 --> 00:08:54,470
then install the dependencies express and Ejay us because of that package that Jaison.

137
00:08:54,620 --> 00:09:02,530
And these are all the things that express depends on then built the application and then launched it

138
00:09:02,560 --> 00:09:03,130
.

139
00:09:03,710 --> 00:09:07,740
So says this application has been deployed to Iraq.

140
00:09:07,790 --> 00:09:14,080
So if we visit that you URL refresh we would hope to see our app.

141
00:09:14,160 --> 00:09:17,270
However all that we see is application error.

142
00:09:17,270 --> 00:09:21,910
So this is a really common screen when you're debugging Heroku when you're starting out when you're

143
00:09:22,150 --> 00:09:24,100
pushing a new app up there.

144
00:09:24,110 --> 00:09:28,190
What happens when you have an error with your code or something doesn't work.

145
00:09:28,280 --> 00:09:34,660
Is that on the Heroku side of things or on the web interface all that you see is error.

146
00:09:34,930 --> 00:09:40,030
They don't put the specific error message in the details there because you wouldn't want to expose that

147
00:09:40,040 --> 00:09:41,490
to your users obviously.

148
00:09:41,780 --> 00:09:43,690
So they keep things as hidden as possible.

149
00:09:43,700 --> 00:09:45,930
They just say application error.

150
00:09:46,340 --> 00:09:52,220
But then what happens is that you can view the issues you can view the error messages in the logs in

151
00:09:52,220 --> 00:09:53,600
your command line.

152
00:09:54,350 --> 00:10:03,450
So to do that we just type Heroku logs and we get a lot of stuff here if we scroll up we'll see there's

153
00:10:03,460 --> 00:10:07,600
an error and the error happened right here.

154
00:10:07,840 --> 00:10:15,790
Starting process with command NPM start and then it turns out we don't have an NPM start command missing

155
00:10:15,790 --> 00:10:21,490
script start and then that causes all of our errors and things to crash.

156
00:10:21,490 --> 00:10:30,270
So again I did it on purpose to show you one Heroku logs how you could go ahead and take a look because

157
00:10:30,320 --> 00:10:34,870
it it hides the actual error message from you here but that doesn't mean you can't see it.

158
00:10:34,870 --> 00:10:37,960
And this is a pretty common screen if your app is crashing.

159
00:10:38,110 --> 00:10:40,340
Heroku logs and the important command.

160
00:10:40,690 --> 00:10:45,440
But what the arrow is saying is that we didn't have a start script.

161
00:10:45,460 --> 00:10:52,420
So with that start script does is it tells Heroku it tells the server what code to run to start her

162
00:10:52,420 --> 00:10:53,330
application.

163
00:10:53,590 --> 00:10:56,970
So it basically does what we've been doing to start our server.

164
00:10:56,980 --> 00:10:59,010
We've been running node apps.

165
00:10:59,110 --> 00:11:03,940
Yes but we're unable to do that because the code is not running here anymore.

166
00:11:04,090 --> 00:11:05,560
We're not running it on this workspace.

167
00:11:05,560 --> 00:11:06,220
That's the point.

168
00:11:06,220 --> 00:11:07,630
It's on Heroku.

169
00:11:08,410 --> 00:11:10,970
So we give it a start script.

170
00:11:11,020 --> 00:11:16,480
So we open up the package stage a song and it goes inside of scripts.

171
00:11:16,480 --> 00:11:19,150
This is not something that you're expected to know.

172
00:11:19,190 --> 00:11:26,410
This is new start colon and then node after J.S..

173
00:11:26,530 --> 00:11:34,510
So what Heroku will do is when we push code to Heroku it's going to first run NPM install install all

174
00:11:34,510 --> 00:11:36,760
the dependencies every time we push.

175
00:11:36,790 --> 00:11:43,150
So we might upgrade to a new version of express if we add and commit and then get push Heroku master

176
00:11:43,360 --> 00:11:50,920
that will automatically run NPM install on Heroku get the new version and then it runs NPM start which

177
00:11:50,920 --> 00:11:52,120
will run this right here.

178
00:11:52,190 --> 00:11:53,240
Node apt.

179
00:11:53,350 --> 00:11:55,180
Yes.

180
00:11:55,210 --> 00:12:03,640
So we can't just do get push Heroku master because right now our get Master ranch is unchanged.

181
00:12:03,700 --> 00:12:06,490
We haven't added and committed that change we just made.

182
00:12:06,790 --> 00:12:08,380
So if you type get status

183
00:12:11,110 --> 00:12:13,370
you can see on Branch maß.

184
00:12:13,390 --> 00:12:16,270
Oh well I didn't save the file so that would do it.

185
00:12:16,270 --> 00:12:20,700
Now if I take it status you'll see modified package that Jason.

186
00:12:21,400 --> 00:12:30,820
So we want to add that get commit and all that will right here is add start script.

187
00:12:30,880 --> 00:12:36,700
Now all we need to do is get push Roku master and we're good to go.

188
00:12:36,700 --> 00:12:37,830
So get push.

189
00:12:37,840 --> 00:12:43,520
Her master will start that entire process over where it takes our code takes a text at Jason.

190
00:12:43,590 --> 00:12:49,260
It installs these dependencies and then it runs NPM start which we didn't have specified last time.

191
00:12:49,300 --> 00:12:52,050
So the app crashed.

192
00:12:52,450 --> 00:12:55,350
oops! meant to hit Enter over here.

193
00:12:55,520 --> 00:12:57,360
It will take a little bit.

194
00:12:57,770 --> 00:13:08,800
It's pushing it up to Heroku it's installing things installing dependencies and see launching verifying

195
00:13:08,800 --> 00:13:09,740
that deploy.

196
00:13:09,920 --> 00:13:12,600
OK let's try refreshing now.

197
00:13:13,540 --> 00:13:14,740
And there we go.

198
00:13:15,100 --> 00:13:22,690
So we have an application running nameless and I told 6 4 4 9 8 dot Roku at dotcom I can click on the

199
00:13:22,700 --> 00:13:25,430
routes go back and forth.

200
00:13:25,570 --> 00:13:26,800
Awesome.

201
00:13:26,800 --> 00:13:31,810
The last thing that I'll show is on the Heroku dashboard if you go back to your dashboard.

202
00:13:32,650 --> 00:13:36,270
We'll now have our application showing up right here.

203
00:13:36,390 --> 00:13:38,310
Oh it's going to make me log in first.

204
00:13:38,320 --> 00:13:41,180
So once you log in hopefully you won't have to.

205
00:13:41,200 --> 00:13:43,150
But once I log in we'll see what I'm looking for.

206
00:13:43,150 --> 00:13:45,670
And as you can see our new app is here.

207
00:13:46,390 --> 00:13:54,580
You can click on it view information about it anything about how long it's been up how many people have

208
00:13:54,580 --> 00:13:56,430
accessed it how often.

209
00:13:56,680 --> 00:14:01,600
Who has permission to deploy and mess with this who is an owner contributor.

210
00:14:01,780 --> 00:14:02,740
All sorts of different things.

211
00:14:02,740 --> 00:14:04,420
I'm not going to go into all of this.

212
00:14:04,430 --> 00:14:09,970
I mean you can see all the different times we've pushed or deployed when we initialized it when we first

213
00:14:09,970 --> 00:14:11,770
released the app.

214
00:14:11,770 --> 00:14:17,420
And then this is also where you would come to set things up or configure things like custom domains

215
00:14:17,620 --> 00:14:19,630
or you can add add ons.

216
00:14:19,900 --> 00:14:24,790
The one thing Paul mentioned here is that we're using the free Heroku plan right now.

217
00:14:24,790 --> 00:14:31,060
There's no credit card associated where they make their money though is once you start having more users

218
00:14:31,150 --> 00:14:34,180
you're going to upgrade and what you do is click here.

219
00:14:34,210 --> 00:14:40,450
Upgrade to hobby and see you can click on hobby or you can go to a professional so you can see hobby

220
00:14:40,480 --> 00:14:42,200
starts at 7 bucks a month.

221
00:14:42,220 --> 00:14:43,530
So definitely worth it.

222
00:14:43,540 --> 00:14:48,250
If you are going to have if you're going to start having more people for you and your applications but

223
00:14:48,340 --> 00:14:54,250
even free works just fine for like a portfolio project or something you're going to send out to companies

224
00:14:54,580 --> 00:14:58,980
as long as you're not expecting you know thousands thousands of hits a day.

225
00:14:59,620 --> 00:15:00,280
OK.

226
00:15:00,760 --> 00:15:02,990
So that's all there is to Heroku here.

227
00:15:03,040 --> 00:15:04,600
I want to recap that though.

228
00:15:04,840 --> 00:15:10,560
So let's go back and go through this process one more time of updating our application.

229
00:15:10,570 --> 00:15:16,450
I want to update the home page so that it has an image on it that say and I happen to have an image

230
00:15:16,450 --> 00:15:17,740
here.

231
00:15:18,460 --> 00:15:19,930
It's kind of large I didn't think about that.

232
00:15:19,930 --> 00:15:24,440
This is an image I took recently but I'm learning some photography on the side.

233
00:15:24,790 --> 00:15:32,990
So feel free to use whatever image you want of course source equals gigantic source.

234
00:15:33,460 --> 00:15:35,180
Let's test it out locally.

235
00:15:35,320 --> 00:15:38,190
So node app Julius

236
00:15:41,290 --> 00:15:42,430
refresh.

237
00:15:43,210 --> 00:15:43,960
Wow.

238
00:15:44,240 --> 00:15:45,620
And get to image.

239
00:15:45,670 --> 00:15:47,240
That's fine though.

240
00:15:47,980 --> 00:15:54,490
So that's working fine locally on Heroku though that change is not taken effect at all and that's because

241
00:15:54,550 --> 00:15:56,150
they're not inherently linked.

242
00:15:56,200 --> 00:16:00,420
We have to choose what we want to push to Heroku And and that's really the point.

243
00:16:00,430 --> 00:16:05,590
We have a workspace to play around with to make mistakes to try new things and then if we want to incorporate

244
00:16:05,620 --> 00:16:09,740
and incorporate them into the real app I can then push them to Heroku.

245
00:16:09,940 --> 00:16:13,030
But Heroku should always be the last stable build.

246
00:16:13,030 --> 00:16:16,590
The last thing that works before you went and messed something up.

247
00:16:17,140 --> 00:16:31,060
OK so all I need to do is get status need to add that change commit add image of bridge and then get

248
00:16:31,600 --> 00:16:34,310
push Heroku master.

249
00:16:34,810 --> 00:16:37,650
So that workflow is really common.

250
00:16:37,720 --> 00:16:42,190
The first thing that we did that this isn't really part of the workflow but the first thing was make

251
00:16:42,190 --> 00:16:48,970
sure you're in a get repository then Heroku create then once you create then what you're going to do

252
00:16:49,360 --> 00:16:55,660
is make sure you add and commit everything that you want to go over to Heroku and then get push Heroku

253
00:16:55,660 --> 00:17:01,870
master and then any time you change or update it same process get ad get commit get push Heroku master

254
00:17:03,610 --> 00:17:09,360
refresh on our Heroku app and there we go or change is taking place.

255
00:17:09,370 --> 00:17:09,870
Awesome.

256
00:17:09,970 --> 00:17:10,520
All right.

257
00:17:10,600 --> 00:17:16,240
So in the next video we're going to see how to deploy a more complex substantial app with a database

258
00:17:16,300 --> 00:17:18,560
which is a little bit of a headache.

259
00:17:18,570 --> 00:17:19,070
Unfortunately