1
00:00:00,840 --> 00:00:08,140
Welcome back! It's time for us to actually deploy our app that we've been working so hard on.

2
00:00:08,220 --> 00:00:15,640
Now up to this point our entire project, our entire beautiful app has just lived on our laptops.

3
00:00:15,930 --> 00:00:20,560
If we wanted to show it to somebody well be needed to have it set up on our laptop.

4
00:00:20,820 --> 00:00:22,790
But that's not really realistic right.

5
00:00:22,800 --> 00:00:30,810
If we ever want to get users and spread the word out about our project we need to have it online accessible

6
00:00:30,810 --> 00:00:33,820
to everybody and we're going to do that in this section.

7
00:00:34,110 --> 00:00:39,240
If you remember we have the front end all done with react.

8
00:00:39,240 --> 00:00:47,490
We have our backend server that has a beautiful API created by node in Express and we also have our

9
00:00:47,490 --> 00:00:55,470
postgres database set up and we're going to be setting up each one of these rectangles that you remember

10
00:00:55,510 --> 00:00:57,910
should be separate computers.

11
00:00:58,030 --> 00:01:03,580
We're going to deploy them separately so that as long as they can communicate and they know where each

12
00:01:03,580 --> 00:01:07,620
other lives it doesn't matter where each one of them is.

13
00:01:07,630 --> 00:01:15,970
As long as they have this connection and we're going to be deploying to a place called Heroku and Heroku

14
00:01:15,970 --> 00:01:24,740
is just a company that has a ton of computers and they're willing to host the files that we give them

15
00:01:25,580 --> 00:01:30,680
for us and I'm going to be walking you through this and you might be asking yourself why aren't we using

16
00:01:30,680 --> 00:01:33,870
something like HostGator or something that I've heard of before.

17
00:01:34,250 --> 00:01:42,290
Well HostGator or blue hosts or most hosting platforms that you've heard of are these simple platforms

18
00:01:42,290 --> 00:01:44,300
that we've talked about before right.

19
00:01:44,300 --> 00:01:48,700
They have usually an Apache server that is just hosting files.

20
00:01:48,770 --> 00:01:55,160
So they're really really good at hosting and serving really simple HTML based projects.

21
00:01:55,190 --> 00:02:02,210
If you just have an info page or an about Web site well they're really useful maybe you have a WordPress

22
00:02:02,210 --> 00:02:08,180
web site that's good if you're not worried about the servers and everything is taken care of.

23
00:02:08,479 --> 00:02:11,300
But that's not how we deploy apps anymore.

24
00:02:11,390 --> 00:02:17,540
If you're actually building applications which are more complex we need something that gives us more

25
00:02:17,540 --> 00:02:18,430
control.

26
00:02:18,710 --> 00:02:26,070
And there's many options and these are some of the more famous ones such as Amazon, Heroku which we'll

27
00:02:26,070 --> 00:02:28,870
be using, Engine Yard, Digital Ocean.

28
00:02:28,890 --> 00:02:36,260
There's also Google and Microsoft that offers web services and they offer a ton of different things

29
00:02:36,530 --> 00:02:38,260
that we don't really need to get into.

30
00:02:38,270 --> 00:02:43,870
There's a special industry called dev ops that really focuses on this domain.

31
00:02:44,840 --> 00:02:50,020
But we want to know how it works so that when we encounter it we can explore more and understand it.

32
00:02:50,990 --> 00:02:55,580
At the end of the day these are just computers managed by these companies.

33
00:02:55,580 --> 00:03:00,230
They allow you to run your files on their computer and in return,

34
00:03:00,320 --> 00:03:01,550
Well, we pay them.

35
00:03:01,550 --> 00:03:06,310
But they also make sure that the computers are going to be running really really fast.

36
00:03:06,320 --> 00:03:10,850
And if we're running something like postgresql or a data base they're going to try and do their best

37
00:03:10,850 --> 00:03:16,880
to make sure that it doesn't go down or that there's backups and you're going to be hearing a lot about

38
00:03:17,480 --> 00:03:19,030
these sort of companies a lot.

39
00:03:19,040 --> 00:03:25,060
When you get into the Web development field we're using Heroku here because it's really developer friendly.

40
00:03:25,070 --> 00:03:31,330
And they also offer a free tier which is great for projects like this just for demo purposes.

41
00:03:31,470 --> 00:03:38,610
If you go to their Web site they have really really good documentation and it's so simple to set up.

42
00:03:38,640 --> 00:03:43,140
So I'm going to go ahead and tell you to sign up for this.

43
00:03:43,140 --> 00:03:44,330
It's completely free.

44
00:03:44,400 --> 00:03:52,240
As soon as you log in you will be directed to something like this your personal dashboard and you can

45
00:03:52,250 --> 00:03:54,840
see you can use different languages to deploy.

46
00:03:54,900 --> 00:04:01,710
In our case we're using node and we can just click on node and it will take us to documentation that

47
00:04:01,710 --> 00:04:05,720
takes us from zero to getting our app deployed.

48
00:04:05,980 --> 00:04:10,560
But you don't need to go through all of this because it's so simple.

49
00:04:10,660 --> 00:04:11,550
Let me show you.

50
00:04:11,800 --> 00:04:17,190
I'm going to link to all this documentation after this video so you can take a look for yourself.

51
00:04:17,350 --> 00:04:24,400
But it's really really easy if you go to documentation and deploying with Git

52
00:04:27,320 --> 00:04:29,240
it's as simple as a few commands.

53
00:04:31,160 --> 00:04:33,860
It tells you that we essentially need two things.

54
00:04:34,480 --> 00:04:37,140
One we need Git which we already have.

55
00:04:37,330 --> 00:04:38,250
And Heroku.

56
00:04:38,380 --> 00:04:40,020
So let's talk about our game plan.

57
00:04:42,620 --> 00:04:49,390
We're going to be putting our server on Heroku and also our postgres database on Heroku and the Front-End

58
00:04:49,400 --> 00:04:50,440
the react app.

59
00:04:50,570 --> 00:04:56,450
We can put it anywhere really but we can use Github pages that we've used before for background generator

60
00:04:56,450 --> 00:04:58,500
project because it's free.

61
00:05:00,380 --> 00:05:04,700
Let's look at the API first because that's the most important one I think it's the connector of the

62
00:05:04,700 --> 00:05:08,090
two.

63
00:05:08,260 --> 00:05:09,810
We already have Git installed.

64
00:05:09,910 --> 00:05:17,320
So let's get Heroku CLI which is the command line interface that is we can use it in the terminal to

65
00:05:19,150 --> 00:05:20,270
install it.

66
00:05:20,560 --> 00:05:28,630
Now before we get into this I went ahead and put our API on Github to make sure that we can actually

67
00:05:28,630 --> 00:05:31,510
run these commands and make sure that this is a Git project.

68
00:05:31,540 --> 00:05:35,090
I went ahead and did that without recording it because we've gone through it before.

69
00:05:35,110 --> 00:05:36,790
I didn't want to bore you with that.

70
00:05:36,790 --> 00:05:38,880
You should know how to do that by now.

71
00:05:40,950 --> 00:05:43,090
So look at the Heroku CLI.

72
00:05:43,290 --> 00:05:49,570
We have both Mac Windows and Ubuntu operating systems that we can run it on.

73
00:05:49,570 --> 00:05:50,820
So again I'll link to these.

74
00:05:50,830 --> 00:05:53,860
And you can decide which way you want to install it yourself.

75
00:05:54,310 --> 00:05:55,240
For me it's a Mac.

76
00:05:55,240 --> 00:06:01,230
So I'm going to use brew install and install this command line.

77
00:06:01,500 --> 00:06:06,380
I mean as you can see over here I already have this installed but for you it might take a little bit

78
00:06:06,380 --> 00:06:11,400
longer and once it's done it will say it's installed go and have some fun.

79
00:06:13,340 --> 00:06:13,570
All right.

80
00:06:13,580 --> 00:06:15,320
So we have Heroku installed.

81
00:06:15,440 --> 00:06:23,530
If we go back to the documentation it tells you how to add your app to Git which we already know.

82
00:06:23,540 --> 00:06:31,990
So we can skip over it and it says that we need to just run Heroku create to create an app.

83
00:06:32,100 --> 00:06:37,480
We go into our directory and simply run Heroku create

84
00:06:40,480 --> 00:06:48,390
And look that! It created our app, even gave us a URL we can reach our app.

85
00:06:48,400 --> 00:06:49,640
Allright, awesome.

86
00:06:49,700 --> 00:06:56,360
But in order for us to use this well let's go to this URL and see if it works.

87
00:06:57,310 --> 00:07:03,490
We can use Heroku open to actually take us to this link.

88
00:07:03,510 --> 00:07:04,500
Let's see what happens.

89
00:07:05,840 --> 00:07:14,030
It says couldn't find that app. Because we actually have a few more steps we have to actually deploy the

90
00:07:14,030 --> 00:07:19,650
app and the way we deploy it we have to first check something called Git remote.

91
00:07:19,700 --> 00:07:21,980
And it's something we haven't really talked about.

92
00:07:22,070 --> 00:07:23,470
But let me show you what it is.

93
00:07:24,560 --> 00:07:30,550
If we can Git remote dash V, we get...

94
00:07:30,580 --> 00:07:31,510
Let me open this.

95
00:07:31,510 --> 00:07:33,520
Make this a little bit bigger.

96
00:07:33,520 --> 00:07:34,130
There you go.

97
00:07:35,880 --> 00:07:40,420
We see that we have Heroku and origin.

98
00:07:40,440 --> 00:07:49,530
Up until this point when you work with Git the default is origin so you may do commands like Git push origin master.

99
00:07:49,530 --> 00:07:58,610
That meant we're pushing to Origin which is Github and we're pushing onto the master branch and

100
00:07:58,610 --> 00:08:03,380
origin is just the default name that Github has. We might have done the command

101
00:08:03,380 --> 00:08:08,960
Just Git push because the default is always origin and master.

102
00:08:09,110 --> 00:08:12,030
So that was just the shorthand way of doing it.

103
00:08:12,110 --> 00:08:17,990
But now because we've run these Heroku commands we also have Heroku now.

104
00:08:18,010 --> 00:08:22,190
So instead of pushing to Github we can push to Heroku

105
00:08:27,660 --> 00:08:33,500
So in our case if we go to deploy code we see that we simply run Git push Heroku Master.

106
00:08:34,110 --> 00:08:41,870
Let's do that. I'm going to ran Git push Heroku master and see what happens.

107
00:08:42,980 --> 00:08:49,360
You see here that I got an error and this is an error that you might not get but because I've used Heroku

108
00:08:49,360 --> 00:08:50,080
before.

109
00:08:51,470 --> 00:08:53,210
It has a different name.

110
00:08:53,210 --> 00:08:55,510
You can see over here "shielded-anchorage".

111
00:08:55,510 --> 00:09:00,340
versus the name that I actually want which is "radiant-ocean".

112
00:09:00,440 --> 00:09:05,450
And we see that in our remote as well that we don't have the radiant-ocean app we have something else

113
00:09:05,780 --> 00:09:14,190
that I've created before. And the way we get around this is in the - for an existing Heroku app you can simply

114
00:09:14,280 --> 00:09:18,600
run this command to rename it.

115
00:09:18,880 --> 00:09:25,930
So we do Git Heroku Git remote dash a and the name of the new app that you want to add in our case

116
00:09:26,260 --> 00:09:32,840
it's this.

117
00:09:32,930 --> 00:09:38,450
And now if I do Git remote dash V.

118
00:09:38,670 --> 00:09:43,830
All right I have radiant ocean as my app and don't worry if this is confusing.

119
00:09:43,840 --> 00:09:48,430
It's just a matter of reading documentation.

120
00:09:48,510 --> 00:09:53,970
It's very specific to Heroku and something that you'll get used to but now our app is pointing in the

121
00:09:53,970 --> 00:09:55,280
right direction.

122
00:09:55,350 --> 00:09:56,230
So we'll try that again.

123
00:09:56,230 --> 00:10:01,720
We're going to try and Git push Heroku master once again.

124
00:10:04,770 --> 00:10:05,490
All right.

125
00:10:05,520 --> 00:10:06,610
Looks like it's running.

126
00:10:06,630 --> 00:10:14,190
And you can see over here we're creating an environment, we're installing a bunch of things it's installing

127
00:10:14,190 --> 00:10:22,380
node modules so it's running NPM install for us and getting everything set up and it's saying verifying deploy done.

128
00:10:22,380 --> 00:10:23,480
Awesome.

129
00:10:23,490 --> 00:10:26,470
Let's do Heroku open and see if this actually works.

130
00:10:32,410 --> 00:10:34,390
And is just hanging there.

131
00:10:35,360 --> 00:10:37,630
And don't worry, I did this on purpose.

132
00:10:37,640 --> 00:10:43,310
The reason it's not working is instead of me telling you let's figure out what's actually going on.

133
00:10:43,420 --> 00:10:50,750
There is another command that we can use which is Heroku logs dash dash tail.

134
00:10:50,900 --> 00:10:55,530
And this gives us a log into what's happening in this computer where the server is running.

135
00:10:59,840 --> 00:11:02,860
Right so it looks like everything is running.

136
00:11:04,000 --> 00:11:09,970
Node server is listening to port 3000.

137
00:11:10,100 --> 00:11:11,590
We see that we get an error now.

138
00:11:11,590 --> 00:11:19,890
So it looks like we're getting a boot timeout and saying web process failed to bind to port.

139
00:11:20,000 --> 00:11:26,860
And this is something that you'll read in the read me or the documentation of Heroku. What's happening here

140
00:11:26,860 --> 00:11:34,280
is that Heroku has its own port that it assigns.

141
00:11:34,450 --> 00:11:40,300
And as we've talked about environmental variables before because we're setting our port to listen to

142
00:11:34,280 --> 00:11:48,820
3000 here Heroku wants its own port, doesn't necessarily care about 3000, has its own thing.

143
00:11:48,820 --> 00:11:58,150
So the way we get around this is we can use process dot env Dot PORT so that if we receive a port from

144
00:11:58,150 --> 00:12:04,870
the environment that we're running in in this case Heroku run that otherwise run port three thousand

145
00:12:06,250 --> 00:12:23,730
and we can change app is running on port 3000 to something more dynamic like process dot env dot PORT. 

146
00:12:23,750 --> 00:12:25,080
All right let's go back.

147
00:12:26,510 --> 00:12:27,120
And run

148
00:12:30,990 --> 00:12:32,480
Git push Heroku master.

149
00:12:32,700 --> 00:12:33,580
But here's the thing.

150
00:12:33,750 --> 00:12:35,530
Because we're going through Git.

151
00:12:35,580 --> 00:12:41,380
We actually have to add these changes to our repo so we're pushing everything.

152
00:12:41,400 --> 00:12:49,290
If we run this command just by itself will say everything is up to date because we haven't done the

153
00:12:49,290 --> 00:12:51,150
Git ADD Git commit commands.

154
00:12:51,250 --> 00:13:07,480
So let's do that Git add Git commit adding port and then we'll do Git push Heroku master. It will run through

155
00:13:07,660 --> 00:13:10,000
the commands again.

156
00:13:10,180 --> 00:13:12,860
It's redeploying the entire server.

157
00:13:13,150 --> 00:13:15,790
And if we go to Heroku open

158
00:13:19,660 --> 00:13:25,440
it looks like we're hanging again and we get internal server error.

159
00:13:25,450 --> 00:13:26,510
Let's look at the logs.

160
00:13:27,830 --> 00:13:33,010
We go again to Heroku logs tail.

161
00:13:33,250 --> 00:13:37,290
And this is a little bit tricky if you scroll up here.

162
00:13:37,550 --> 00:13:39,520
We want to go to app.

163
00:13:39,570 --> 00:13:39,820
OK.

164
00:13:39,830 --> 00:13:44,900
So nodemon is running, app is running on port 9098.

165
00:13:45,120 --> 00:13:51,500
But if you keep going down after NPM start we get a reference error - database is not defined.

166
00:13:51,670 --> 00:13:54,200
And this something that I left out here on purpose.

167
00:13:54,980 --> 00:13:59,710
Just to show you how debugging works where you have to look through the logs.

168
00:13:59,960 --> 00:14:06,320
If you remember we're no longer using that database that we created, the first variable.

169
00:14:06,320 --> 00:14:14,010
And because our app when it first loads goes to the root route it's going to run this command and it's

170
00:14:14,010 --> 00:14:16,010
going to say well database doesn't exist.

171
00:14:16,020 --> 00:14:17,950
I don't know what you're talking about.

172
00:14:17,950 --> 00:14:21,900
So to fix that let's just change this to.

173
00:14:22,140 --> 00:14:24,260
It is working.

174
00:14:24,330 --> 00:14:30,080
If we save and yes unfortunately we have to go through our Git commands again.

175
00:14:30,090 --> 00:14:33,300
We're going to Git add Git commit

176
00:14:35,570 --> 00:14:45,720
changing response and Git push Heroku Master

177
00:14:45,740 --> 00:14:46,590
All right.

178
00:14:46,800 --> 00:14:51,860
So running through some magic and let's do Heroku open

179
00:14:58,150 --> 00:14:58,960
it's working.

180
00:14:58,960 --> 00:15:06,310
Our app is now at this location and we can reach it using this.

181
00:15:06,310 --> 00:15:07,590
Let's test that theory.

182
00:15:07,690 --> 00:15:14,090
Let's add this instead of our local host to our front end app  and by the way if you go to the Heroku

183
00:15:14,090 --> 00:15:17,070
dashboard which I can just use over here

184
00:15:20,030 --> 00:15:23,510
and we see that my app is running.

185
00:15:23,510 --> 00:15:26,210
It has all the logs that I need.

186
00:15:26,480 --> 00:15:29,120
I can look at metrics, I can look at activity

187
00:15:32,260 --> 00:15:35,780
you can look at the deployment process and add different things.

188
00:15:35,780 --> 00:15:37,550
There's just so much stuff you can do.

189
00:15:37,600 --> 00:15:39,050
It's really really cool.

190
00:15:39,310 --> 00:15:43,550
But let's just test our assumption to make sure that our app actually works.

191
00:15:44,330 --> 00:15:48,860
I have the smart brain application running here.

192
00:15:48,870 --> 00:15:51,120
Let's open up apt dot js

193
00:15:52,690 --> 00:15:58,920
And I make this a little bit smaller so we can see and where we do our fetches we're going to change

194
00:15:58,950 --> 00:16:05,000
localhost which is our computer to the actual endpoint.

195
00:16:05,460 --> 00:16:06,630
Let's copy the endpoint

196
00:16:09,230 --> 00:16:11,750
that Heroku gave us.

197
00:16:18,890 --> 00:16:23,390
And change it for all the localhost locations.

198
00:16:23,390 --> 00:16:24,310
So we have this.

199
00:16:24,320 --> 00:16:29,530
And if you remember we also have the register and sign in as well.

200
00:16:42,710 --> 00:16:50,150
Just to confirm with you what we just did. We've essentially just told the front end where these arrows

201
00:16:50,150 --> 00:16:58,050
should point and it should point to the location of the server which was provided to us by Heroku.

202
00:16:58,050 --> 00:16:59,930
All right so let's give it a try.

203
00:16:59,940 --> 00:17:01,910
I'm going to run NPM start

204
00:17:06,670 --> 00:17:10,349
and hopefully everything is working as we want it.

205
00:17:11,180 --> 00:17:15,040
If we sign in or just click on sigh in.

206
00:17:15,119 --> 00:17:16,109
Nothing happens.

207
00:17:16,109 --> 00:17:18,190
So we need to register somebody.

208
00:17:18,240 --> 00:17:22,980
We'll go with Todd Todd at gmail dot com.

209
00:17:23,040 --> 00:17:26,200
One two three register.

210
00:17:26,280 --> 00:17:27,069
Oh we get an error.

211
00:17:27,089 --> 00:17:27,900
Let's see what we get.

212
00:17:30,030 --> 00:17:34,430
If we go to console - server responded with status of 400.

213
00:17:34,430 --> 00:17:37,910
Bad request. let's look at the network and see what happens.

214
00:17:38,880 --> 00:17:39,860
I click register

215
00:17:43,110 --> 00:17:51,180
and we get unable to register which is actually a really really good sign because that is what we've

216
00:17:51,180 --> 00:17:51,800
written.

217
00:17:51,900 --> 00:17:58,980
Remember in our server we said that when we tried to register

218
00:18:01,600 --> 00:18:03,990
if it fails we want to return.

219
00:18:04,030 --> 00:18:06,800
Unable to register.

220
00:18:06,820 --> 00:18:10,240
So it's actually connecting to our front end.

221
00:18:10,600 --> 00:18:11,410
That's amazing.

222
00:18:12,100 --> 00:18:20,130
But you may notice a problem. That is now the fact that we don't have a database anymore because our

223
00:18:20,130 --> 00:18:24,400
database and the backend is referencing,

224
00:18:24,530 --> 00:18:37,240
If you remember our localhost but since this computer now lives somewhere on Heroku he has no idea.

225
00:18:37,330 --> 00:18:44,110
Well it may know what localhost is but they definitely don't have a database called smart brain do they.

226
00:18:44,120 --> 00:18:49,270
So now let's create a postgres database on Heroku.

227
00:18:49,580 --> 00:18:52,190
But this video getting already a little bit too long.

228
00:18:52,370 --> 00:18:54,010
So that's for the next video.

229
00:18:54,320 --> 00:18:56,180
I'll see you in that one Bye-Bye.