1
00:00:00,180 --> 00:00:05,520
In the last video you got your code pushed up to get hub in this video you're going to get your code

2
00:00:05,580 --> 00:00:07,200
pushed up to Heroku.

3
00:00:07,320 --> 00:00:13,560
That's going to allow us to actually deploy our node j s applications to production by the end of the

4
00:00:13,560 --> 00:00:14,250
video.

5
00:00:14,370 --> 00:00:20,380
You're gonna have a real U.R.L. and anyone with an internet connection will be able to visit that U.R.L.

6
00:00:20,550 --> 00:00:23,670
to view and use your weather application.

7
00:00:23,820 --> 00:00:29,310
Now like we did with GitHub we're gonna go ahead and set up a new remote and we're going to use that

8
00:00:29,310 --> 00:00:35,700
push command to push our code up to this new remote but there's also a couple of other changes we're

9
00:00:35,700 --> 00:00:41,580
going to need to make along the way to our application code to allow it to work with Heroku.

10
00:00:41,580 --> 00:00:46,740
Now one great thing about Heroku is that we can manage our applications from the terminal.

11
00:00:46,800 --> 00:00:51,160
So with get hub we had to use their Web site to do a lot of things with Heroku.

12
00:00:51,180 --> 00:00:55,080
We actually don't need to touch the web application at all.

13
00:00:55,080 --> 00:01:01,350
We installed the Heroku command line tools earlier in the section and we can use those to create our

14
00:01:01,350 --> 00:01:08,960
applications to manage them and to push new versions of our applications up to the production environment.

15
00:01:09,420 --> 00:01:15,090
Let's go ahead and kick things off by heading over to visual studio code and running a couple of commands

16
00:01:15,150 --> 00:01:16,010
from the terminal.

17
00:01:16,020 --> 00:01:21,450
The first thing we want to do is set up our SSA public key file with Heroku.

18
00:01:21,480 --> 00:01:26,760
You'll remember in the last video we copied the contents of that file to the clipboard and we brought

19
00:01:26,760 --> 00:01:28,820
it over to get hub dot com.

20
00:01:28,830 --> 00:01:34,300
Now with Heroku we don't have to use that there's a single command we can run to get that done.

21
00:01:34,440 --> 00:01:42,840
It is Heroku space keys colon add when we run this it's going to look through our SSA directory and

22
00:01:42,840 --> 00:01:50,610
ask us which keys we want to upload here it found the only public key we have I.D. underscore RSA dot

23
00:01:50,610 --> 00:01:55,550
pub it's asking us if we do want to upload this to our Heroku account.

24
00:01:55,650 --> 00:01:56,970
In this case we do.

25
00:01:56,970 --> 00:02:04,100
So I'll type Y and I'll hit Enter now our SSA key is associated with our Heroku account and we're gonna

26
00:02:04,110 --> 00:02:08,960
be able to securely send code back and forth with this in place.

27
00:02:08,970 --> 00:02:12,890
Let's go ahead and start the process of creating our application.

28
00:02:12,930 --> 00:02:17,430
You can create your Heroku application by using Heroku create.

29
00:02:17,430 --> 00:02:21,230
Now this is something we want to run from the root of our project.

30
00:02:21,240 --> 00:02:28,140
So we want to run this command from the web server folder and after create we can also specify a name

31
00:02:28,200 --> 00:02:29,290
for the project.

32
00:02:29,370 --> 00:02:35,400
If we don't specify one Heroku is going to randomly generate one for us and that can be confusing because

33
00:02:35,400 --> 00:02:37,830
it's not going to say something like whether app.

34
00:02:37,830 --> 00:02:40,760
So we won't really know what the Heroku app is for.

35
00:02:40,830 --> 00:02:43,590
It's best to give our applications a name.

36
00:02:43,620 --> 00:02:51,010
Now these names need to be unique not just across your own account but across all Heroku applications.

37
00:02:51,030 --> 00:02:57,870
So I typically start them off with my last name something like Mead hyphen whether hyphen application

38
00:02:57,870 --> 00:02:59,470
would get the job done.

39
00:02:59,580 --> 00:03:04,620
I'm gonna go ahead and run this command and it's going to do a couple of very important things.

40
00:03:04,620 --> 00:03:11,220
First up it's actually going to create a new application on the Heroku servers and second up it's spitting

41
00:03:11,220 --> 00:03:13,070
out to you are elves.

42
00:03:13,170 --> 00:03:16,830
The first is a location where we can view our application.

43
00:03:16,860 --> 00:03:19,440
This is the live U.R.L. for the app.

44
00:03:19,590 --> 00:03:25,950
And the second is the U.R.L. for the get repository where we should be pushing the code we want to deploy.

45
00:03:26,460 --> 00:03:28,820
Let's take a quick moment to crack open this first.

46
00:03:28,820 --> 00:03:34,710
You are all in the browser from the visual studio code terminal I could copy and paste it or I could

47
00:03:34,740 --> 00:03:37,360
also click it to open it up in the browser.

48
00:03:37,470 --> 00:03:39,930
And when I open it I get the following screen.

49
00:03:40,020 --> 00:03:45,180
It's saying Welcome to your new application and it's not showing our app because we haven't deployed

50
00:03:45,180 --> 00:03:45,560
it yet.

51
00:03:45,990 --> 00:03:49,410
So this is the welcome screen we're going to see by default.

52
00:03:49,500 --> 00:03:53,430
This will go away once we actually get our application deployed.

53
00:03:53,430 --> 00:03:59,430
So at this point we have executed Heroku create and we're ready to start the process of getting our

54
00:03:59,430 --> 00:04:02,630
code up on the Heroku servers.

55
00:04:02,670 --> 00:04:06,940
Now before we do that we have to make a couple of very important changes.

56
00:04:07,020 --> 00:04:10,690
So Heroku can actually know how to run our application.

57
00:04:10,800 --> 00:04:16,200
We have to provide it with some basic instructions of what to do when it gets our code.

58
00:04:16,200 --> 00:04:21,070
One of the most important things we need to change has to do with what's inside of package Dot.

59
00:04:21,120 --> 00:04:21,860
Jason.

60
00:04:22,020 --> 00:04:28,260
So in order for her Roku to start up our application we have to tell it which file to run now from the

61
00:04:28,290 --> 00:04:29,550
terminal locally.

62
00:04:29,550 --> 00:04:35,720
We've been using Node to run app dot J.S. in the source directory and that's exactly what we want Heroku

63
00:04:35,730 --> 00:04:36,930
to do as well.

64
00:04:37,020 --> 00:04:41,670
We tell the Roku we wanted to do that by specifying it in a script.

65
00:04:41,670 --> 00:04:44,480
So we have this script object in a package Dot.

66
00:04:44,490 --> 00:04:47,670
Jason This allows us to set up scripts.

67
00:04:47,670 --> 00:04:49,380
These are key value pairs.

68
00:04:49,380 --> 00:04:54,580
The key is a name for the script and the value is what to run from the terminal.

69
00:04:54,600 --> 00:05:01,130
Now by default your package that Jason File has a test script which just prints a message to the terminal

70
00:05:01,340 --> 00:05:04,740
saying that no test cases have been specified.

71
00:05:04,820 --> 00:05:05,800
That's OK for now.

72
00:05:05,810 --> 00:05:11,720
We're actually going to explore testing a bit later in the class and we'll set up a real a test script

73
00:05:12,110 --> 00:05:12,630
for now.

74
00:05:12,650 --> 00:05:17,450
We can remove that line completely emptying these scripts object.

75
00:05:17,450 --> 00:05:21,600
All we're going to do is setup a single property on this object.

76
00:05:21,620 --> 00:05:23,470
We have our key value pair.

77
00:05:23,570 --> 00:05:25,820
The key needs to be start.

78
00:05:25,880 --> 00:05:32,900
So we're specifying these start script telling Heroku how to start up our app and the value is the command

79
00:05:32,900 --> 00:05:34,580
to run right here.

80
00:05:34,580 --> 00:05:39,530
That's going to be node space source forward slash app dot J.

81
00:05:39,540 --> 00:05:44,900
S If Heroku runs that command it's going to start the application up correctly.

82
00:05:44,900 --> 00:05:47,430
Now these scripts aren't limited to Heroku.

83
00:05:47,510 --> 00:05:53,150
We can actually use these start script locally in our project to start up the application for ourself

84
00:05:53,540 --> 00:05:54,530
from the terminal.

85
00:05:54,590 --> 00:06:01,090
We can get that done using NPM run NPM run except the name of the script.

86
00:06:01,100 --> 00:06:04,740
You want to run and right here we can use these start script.

87
00:06:04,760 --> 00:06:09,040
So this is a command we can run to start up our application locally.

88
00:06:09,050 --> 00:06:15,800
This is the exact command that Heroku is going to run to start up our application on their servers.

89
00:06:15,800 --> 00:06:19,190
So making this change is very important right here.

90
00:06:19,370 --> 00:06:25,160
If I do run this locally we can see that it's starting up the application and we get server is up on

91
00:06:25,160 --> 00:06:27,320
port three thousand printing.

92
00:06:27,350 --> 00:06:33,500
Now I can go over to my local host three thousand tab like I had before I can refresh things and the

93
00:06:33,500 --> 00:06:36,160
app is still working as expected.

94
00:06:36,200 --> 00:06:38,210
So that is the first change we need to make.

95
00:06:38,300 --> 00:06:43,220
We needed to tell her Roku what to do to start up the application.

96
00:06:43,220 --> 00:06:49,520
The next change we need to make lives inside of app dot J S in the source directory and it has to do

97
00:06:49,520 --> 00:06:55,370
with one of the last things we do in this file way down at the bottom we call app dot listen and we

98
00:06:55,370 --> 00:06:57,710
listen on port three thousand.

99
00:06:57,710 --> 00:06:59,210
We have to change that.

100
00:06:59,240 --> 00:07:04,820
We can still use port three thousand when we're running the app locally on our machine but her Roku

101
00:07:04,820 --> 00:07:11,170
is going to provide us with a port value that we have to use when our app is running on her Roku.

102
00:07:11,180 --> 00:07:15,320
Now this isn't a static value we can hard code in the project.

103
00:07:15,320 --> 00:07:23,030
This is a value that changes over time and it's provided to our application via and environment variable

104
00:07:23,330 --> 00:07:28,500
and environment variable is just a key value pair set at the OS level.

105
00:07:28,520 --> 00:07:35,410
In this case her Roku sets one for the port where the value is the port number to use.

106
00:07:35,420 --> 00:07:41,000
So all we need to do to actually support this is to change the two references right here and add one

107
00:07:41,000 --> 00:07:47,300
new line the new line is going to live up top right below where we define app right here.

108
00:07:47,300 --> 00:07:49,720
Let's go ahead and create a new constant.

109
00:07:49,970 --> 00:07:52,880
And we're gonna call this new constant port.

110
00:07:52,880 --> 00:07:55,700
So what value do we want to use for port.

111
00:07:55,700 --> 00:08:02,870
Well to start let's go ahead and extract the value that Heroku provides that is available at process

112
00:08:02,930 --> 00:08:08,840
dot EMV EMV is an object and it's where we can access environment variables.

113
00:08:08,840 --> 00:08:14,570
Now this is exactly what Heroku sets and we'll learn how to set our own a bit later in the class.

114
00:08:14,570 --> 00:08:20,360
For now we need to access uppercase p o r t uppercase port.

115
00:08:20,750 --> 00:08:26,150
So this is going to set port equal to the environment variable value.

116
00:08:26,150 --> 00:08:31,110
Now this is only going to be set on Heroku which means that when we run the app locally things are going

117
00:08:31,110 --> 00:08:32,030
to fail.

118
00:08:32,030 --> 00:08:36,180
We can fix that by using the logical or operator in JavaScript.

119
00:08:36,290 --> 00:08:40,300
And right here providing a default fallback like 3000.

120
00:08:40,340 --> 00:08:44,840
So here port is equal to this value if it exists or this one.

121
00:08:44,840 --> 00:08:46,880
If this value doesn't exist.

122
00:08:46,880 --> 00:08:50,480
So on Heroku this will exist and it'll be used locally.

123
00:08:50,480 --> 00:08:52,770
This won't exist and this will be used.

124
00:08:52,850 --> 00:08:57,080
Meaning our application will still work just fine locally.

125
00:08:57,080 --> 00:09:01,540
Now all we need to do is actually use this port variable down below.

126
00:09:01,580 --> 00:09:06,890
I'm going to scroll to the very bottom of the file and we're going to swap it out right here instead

127
00:09:06,890 --> 00:09:09,300
of passing three thousand into app dot.

128
00:09:09,310 --> 00:09:15,590
Listen I'm going to pass in the value stored in port and the same thing is true with the string instead

129
00:09:15,590 --> 00:09:22,490
of Statically typing out three thousand I'll concatenate on whatever value is stored in port now that

130
00:09:22,490 --> 00:09:28,280
we have this in place the port issue is fixed and we can move on to one final thing we're going to need

131
00:09:28,280 --> 00:09:35,630
to address before we're ready to push our code up this lives inside of the public directory in our client

132
00:09:35,630 --> 00:09:37,270
side JavaScript.

133
00:09:37,340 --> 00:09:44,690
So right here we have our J.S. folder and we have app dot J S the line in question is this line for

134
00:09:44,690 --> 00:09:51,740
me that's the line 14 this is where we call fetch and this is where we provide the you are well we want

135
00:09:51,740 --> 00:09:59,060
to fetch Now the problem is that when this code runs on Heroku it's still going to try to access local

136
00:09:59,060 --> 00:10:04,830
host which is not gonna exist that's going to prevent us from ever being able to correctly fetch the

137
00:10:04,830 --> 00:10:06,390
weather to address this.

138
00:10:06,390 --> 00:10:08,550
We want to remove the domain completely.

139
00:10:08,550 --> 00:10:12,110
If we're on local host We want to make the request to a local host.

140
00:10:12,120 --> 00:10:14,890
If we're on our special Heroku app you are.

141
00:10:14,930 --> 00:10:17,790
We want to make the request to that you are out.

142
00:10:17,880 --> 00:10:25,140
This is going to be similar to what we did over inside of templates partials header dot HB S..

143
00:10:25,260 --> 00:10:31,830
In here we set up all of our navigation links and I didn't list out the entire domain I just used forward

144
00:10:31,830 --> 00:10:35,130
slash followed by the specific thing I wanted to visit.

145
00:10:35,130 --> 00:10:39,500
We can do the exact same thing here inside of our fetch call.

146
00:10:39,780 --> 00:10:46,220
So what I'm going to do is remove everything from the H and H TTP all the way up to the end of the port.

147
00:10:46,260 --> 00:10:49,330
We're going to leave just forward slash weather.

148
00:10:49,410 --> 00:10:54,630
Then we'll set up the address query string that's gonna make sure to use local host if we're running

149
00:10:54,630 --> 00:10:57,360
on local host or to use the Heroku app.

150
00:10:57,360 --> 00:11:02,800
You are well if we're running on her Roku now those are the three changes we need to make.

151
00:11:02,850 --> 00:11:06,270
The first told her Roku how to start up the application.

152
00:11:06,270 --> 00:11:06,870
The second.

153
00:11:06,870 --> 00:11:13,080
Made sure that our application listened on the port Heroku was expecting allowing it to actually serve

154
00:11:13,080 --> 00:11:14,100
things up.

155
00:11:14,100 --> 00:11:14,760
And the third.

156
00:11:14,760 --> 00:11:19,140
Made sure that we made the weather request to the correct location.

157
00:11:19,170 --> 00:11:25,710
Now that we have all of these in place we have to make a commit and push our code up to Heroku.

158
00:11:25,740 --> 00:11:30,810
So from the terminal I'm going gonna use clear to clear the terminal output and I'm going to run get

159
00:11:30,810 --> 00:11:34,860
status to start the process of creating that commit right here.

160
00:11:34,860 --> 00:11:35,940
What do I have.

161
00:11:35,940 --> 00:11:42,510
I have three modified files the three files that we just changed I want to commit all three so I'll

162
00:11:42,510 --> 00:11:50,010
use get add dot to add all of those to the staging area followed by get commit with the M flag to provide

163
00:11:50,010 --> 00:11:55,210
my message right here setup app for Heroku.

164
00:11:55,260 --> 00:11:56,150
Perfect.

165
00:11:56,220 --> 00:12:01,860
Now I could hit enter to actually create that commit and we can go ahead and start by pushing those

166
00:12:01,860 --> 00:12:03,790
changes up to get up.

167
00:12:03,810 --> 00:12:06,690
So right here get push.

168
00:12:06,690 --> 00:12:12,990
When we do this it's going to push our code up to the origin remote and right here we can see that things

169
00:12:12,990 --> 00:12:15,240
have been updated correctly.

170
00:12:15,240 --> 00:12:21,060
If we head over to the github repository you should be able to refresh the page and see those changes

171
00:12:21,090 --> 00:12:26,790
showing up here I can see the public and source folder changed twenty three seconds ago.

172
00:12:26,790 --> 00:12:33,420
While many of the other folders changed over a day ago when I filmed the last video and package Jason

173
00:12:33,450 --> 00:12:35,330
also got changed recently.

174
00:12:35,370 --> 00:12:36,410
That's a good thing.

175
00:12:36,570 --> 00:12:43,740
From here we can now push up to the Heroku remote now when we ran that Heroku create command and actually

176
00:12:43,740 --> 00:12:45,120
spit out the remote.

177
00:12:45,120 --> 00:12:49,220
You are all that we had to push too not only did it show it to us.

178
00:12:49,230 --> 00:12:52,770
It also set up the remote for us right here.

179
00:12:52,770 --> 00:12:58,260
If we use clear we can use get remote to view all of the remotes that are configured.

180
00:12:58,260 --> 00:12:59,490
We have to showing up.

181
00:12:59,490 --> 00:13:05,640
The first is Origin which we configured and the second is Heroku which was configured for us now to

182
00:13:05,640 --> 00:13:10,510
deploy all we have to do is use get push Heroku master.

183
00:13:10,680 --> 00:13:15,140
This is going to push our latest comments up to the Heroku get remote.

184
00:13:15,300 --> 00:13:21,430
When Heroku sees that new comments have been pushed it's going to deploy our application again.

185
00:13:21,480 --> 00:13:26,880
So right here when we run this it is indeed going to start with output we saw when we pushed up to get

186
00:13:26,880 --> 00:13:30,210
hub but now it's moving onto something else entirely.

187
00:13:30,210 --> 00:13:36,510
It's installing our dependencies for our application and then it's getting the process kicked off and

188
00:13:36,510 --> 00:13:41,090
that's going to allow us to view our server when we refresh things in the browser.

189
00:13:41,100 --> 00:13:45,600
Now the entire deployment process only took what maybe 15 seconds.

190
00:13:45,600 --> 00:13:49,800
And right here we have the U.R.L. where our application can be viewed.

191
00:13:49,860 --> 00:13:53,460
Now we already have that U.R.L. open in a browser tab.

192
00:13:53,460 --> 00:13:56,650
This is where we had the welcome screen earlier in the class.

193
00:13:56,670 --> 00:14:02,020
Let's go ahead and just to refresh this page right here what do we get.

194
00:14:02,020 --> 00:14:07,870
We have our weather application showing up I can navigate between the pages on my weather app and I

195
00:14:07,870 --> 00:14:11,420
can also search for the weather for a given location.

196
00:14:11,440 --> 00:14:13,510
I'll go ahead and search for Boston.

197
00:14:13,570 --> 00:14:20,890
I'll hit the search button right here I get my location and I get the forecast showing up which is fantastic.

198
00:14:20,890 --> 00:14:26,230
We now have our weather application deployed to a production environment.

199
00:14:26,290 --> 00:14:31,600
This U.R.L. is not something we're able to visit because it's running on our machine or we're logged

200
00:14:31,600 --> 00:14:32,260
in.

201
00:14:32,260 --> 00:14:37,600
This is a public you are well that anyone in the world with an Internet connection would be able to

202
00:14:37,600 --> 00:14:44,760
visit to view our app now that you are elsewhere seeing here is just our application name as these subdomain

203
00:14:44,990 --> 00:14:47,290
at her Roku app dot com.

204
00:14:47,290 --> 00:14:52,960
This is the default U.R.L. but if you go out and purchase your own domain you can configure your DNS

205
00:14:52,960 --> 00:14:59,140
records to work with your Heroku application and you can have a completely custom you are all up above.

206
00:14:59,440 --> 00:15:05,680
There are great documentation articles in the Heroku Dev center that can walk you through that process.

207
00:15:05,770 --> 00:15:09,700
Right now though we have our application deployed to production.

208
00:15:09,760 --> 00:15:12,010
Everything is working really really well.

209
00:15:12,040 --> 00:15:17,290
We have our code backed up to get hub where we could collaborate with others and track issues in our

210
00:15:17,290 --> 00:15:18,430
application.

211
00:15:18,430 --> 00:15:23,470
And we have our code pushed up to her Roku where it can deploy our application.

212
00:15:23,470 --> 00:15:29,530
Now we had to make a few changes to get that done but it was only maybe five or six lines of code to

213
00:15:29,530 --> 00:15:33,750
get our application working on her Roku is infrastructure.

214
00:15:33,820 --> 00:15:36,190
That's where we're going to stop for this video.

215
00:15:36,190 --> 00:15:40,180
There are still a couple of videos left for this section in the next one.

216
00:15:40,180 --> 00:15:45,190
We're going to walk through the new feature workflow making sure you're comfortable adding new features

217
00:15:45,190 --> 00:15:50,510
to the application and getting those pushed up to get hub and deployed to Heroku.

218
00:15:50,530 --> 00:15:51,890
I'm excited to get to that.

219
00:15:51,910 --> 00:15:54,730
So let's go ahead and jump right in to the next one.