1
00:00:00,750 --> 00:00:06,540
In the last section we spoke about the code that we added to instruct express how to handle incoming

2
00:00:06,550 --> 00:00:08,580
HTP requests.

3
00:00:08,580 --> 00:00:13,290
Now that we've got the absolute basics of an express server put together and we kind of understand more

4
00:00:13,290 --> 00:00:15,040
or less what's going on here.

5
00:00:15,150 --> 00:00:18,150
We're going to move on to the next feature inside of our application.

6
00:00:18,150 --> 00:00:23,250
And so this next feature is something I'm really excited about because it's something that I think you're

7
00:00:23,250 --> 00:00:24,940
going to be excited about.

8
00:00:24,950 --> 00:00:26,430
So for the next year we're going to do.

9
00:00:26,460 --> 00:00:29,450
We're going to figure out how to deploy our application.

10
00:00:29,550 --> 00:00:35,220
Yes that's right square one even with this very basic code right here we're going to figure out how

11
00:00:35,220 --> 00:00:36,380
to handle deployment.

12
00:00:36,570 --> 00:00:40,620
And then as we go through the remainder of this course we're going to consistently make sure that we

13
00:00:40,680 --> 00:00:45,720
update our deployment so that our friends and family can test out our application and give us a little

14
00:00:45,720 --> 00:00:48,190
bit of feedback and tell us how it's going.

15
00:00:48,300 --> 00:00:49,290
So let's get to it.

16
00:00:49,290 --> 00:00:53,370
We're going to figure out how to deploy this application and we're going to figure out how we deploy

17
00:00:53,370 --> 00:00:58,810
it again in the future much more easily now to handle deployments throughout this entire course.

18
00:00:58,890 --> 00:01:02,310
We're going to be using a third party service called Heroku.

19
00:01:02,610 --> 00:01:06,780
So in a new browser tab I'm going to navigate to Heroku dot com.

20
00:01:06,820 --> 00:01:13,710
Now I know that you might have your own pre or your own personal preference for a service provider you

21
00:01:13,710 --> 00:01:19,860
might prefer to use AWOS or digital lotion or any other of a number of different providers.

22
00:01:19,860 --> 00:01:25,820
But for our purposes Heroku really is a very happy medium because we can get started for free and deploy

23
00:01:25,830 --> 00:01:29,410
our app without having to associate any credit cards or anything like that.

24
00:01:29,700 --> 00:01:34,830
So I know that maybe you want to see some stuff around AWOS but we're going to start with Heroku and

25
00:01:34,830 --> 00:01:37,450
figure out how we get this process going really well.

26
00:01:37,950 --> 00:01:39,070
So let's get to it.

27
00:01:39,240 --> 00:01:43,980
There's going to be a couple steps so we have to go through to get our application Heroku ready or ready

28
00:01:43,980 --> 00:01:45,650
to be actually deployed.

29
00:01:45,960 --> 00:01:48,000
So let's take a look at a quick diagram.

30
00:01:48,030 --> 00:01:50,620
It's going to walk through us through all these steps.

31
00:01:50,640 --> 00:01:52,920
So this is our deployment checklist right here.

32
00:01:52,920 --> 00:01:58,320
These are some steps that we have to do exactly one time to get our server code ready to actually be

33
00:01:58,320 --> 00:02:01,890
deployed after we go through these steps right here.

34
00:02:01,890 --> 00:02:06,630
We will then go through a separate checklist that's going to guide us through deploying our application

35
00:02:06,630 --> 00:02:12,540
for the very first time and how we deploy our app on future deployments like after we've made some number

36
00:02:12,540 --> 00:02:14,980
of subsequent changes.

37
00:02:15,160 --> 00:02:19,020
So we'll start with this checklist and then we'll go over the other checklist on how we actually do

38
00:02:19,020 --> 00:02:20,370
the deployment.

39
00:02:20,430 --> 00:02:26,550
So every single one of these items right here are all about getting our application ready to be executed

40
00:02:26,580 --> 00:02:28,910
or hosted by Heroku.

41
00:02:28,920 --> 00:02:33,540
So these are steps to make sure that our app is essentially Heroku compliant.

42
00:02:33,540 --> 00:02:37,660
Now a lot of these steps are going to go through are actually used by many different providers.

43
00:02:37,680 --> 00:02:42,490
And so this is one of those things where you kind of want to go through this checklist no matter what.

44
00:02:42,510 --> 00:02:47,440
So let's briefly talk about each item and then actually implement it inside of our codebase.

45
00:02:47,490 --> 00:02:52,350
Each of these items on here I think that you're going to have a pretty good sense of what's going on

46
00:02:52,380 --> 00:02:57,840
even though we've only written the bare minimum amount of code and only explained a very small amount

47
00:02:57,840 --> 00:03:00,000
of surface area of note and express.

48
00:03:00,240 --> 00:03:01,770
So anyways let's get to it.

49
00:03:02,280 --> 00:03:02,550
OK.

50
00:03:02,560 --> 00:03:06,060
So the first thing is dynamic port binding.

51
00:03:06,090 --> 00:03:12,690
So in a nutshell when we deploy our application Trochu Heroku is going to expect us to listen for incoming

52
00:03:12,710 --> 00:03:16,550
HTP traffic on a very particular port.

53
00:03:16,560 --> 00:03:22,560
Remember we had previously looked at this diagram right here and we had said that express would tell

54
00:03:22,560 --> 00:03:29,850
node to listen to incoming HTP traffic on the specific port and we even coded it in port 5000 inside

55
00:03:29,850 --> 00:03:30,740
of our codebase.

56
00:03:30,750 --> 00:03:34,410
Remember with this line right here of Atlas and 5 0 0 0 0.

57
00:03:34,680 --> 00:03:41,280
But whenever we deploy our application to Heroku Heroku will tell us which port we need to listen to.

58
00:03:41,280 --> 00:03:47,400
So in other words Heroku is going to expose a very specific port to us and it's going to tell us hey

59
00:03:47,580 --> 00:03:51,960
you have to listen to incoming traffic on this particular port.

60
00:03:51,990 --> 00:03:58,800
This is done because Roku will host many different applications on a single server or a single machine

61
00:03:59,160 --> 00:04:05,040
and it wants the ability to just dynamically tell us where traffic is going to be coming from now setting

62
00:04:05,040 --> 00:04:08,900
up this dynamic port pin binding in practice is really straightforward.

63
00:04:09,030 --> 00:04:10,830
So let's do it right now.

64
00:04:11,490 --> 00:04:14,900
I'm going to flip back over to my code editor and download our apt.

65
00:04:14,940 --> 00:04:16,430
Listen line right here.

66
00:04:16,500 --> 00:04:18,920
We're going to add one additional line right above it.

67
00:04:19,110 --> 00:04:22,810
That's going to dynamically figure out what port we should be listening to.

68
00:04:23,250 --> 00:04:26,540
So I'm going to say right above it Konst port.

69
00:04:26,790 --> 00:04:31,290
I'm going to spell port with all capital letters to make sure that it's really clear to any other engineer

70
00:04:31,320 --> 00:04:38,130
who's looking at this in the future that this is some type of constant that should not be changed slightly.

71
00:04:38,130 --> 00:04:42,870
We're then going to say that port is going to get its value from process.

72
00:04:42,900 --> 00:04:45,750
Even the dot port.

73
00:04:45,850 --> 00:04:46,150
OK.

74
00:04:46,170 --> 00:04:48,690
So a little bit about this statement right here.

75
00:04:48,850 --> 00:04:55,710
Whenever Heroku runs or application it has the ability to inject what are called environment variables

76
00:04:56,280 --> 00:05:02,030
environment variables are variables that are set in the underlying runtime that node is running on top

77
00:05:02,030 --> 00:05:02,400
of.

78
00:05:02,540 --> 00:05:09,470
And it's essentially no Croker's opportunity to Passos runtime configuration or some configuration that

79
00:05:09,470 --> 00:05:15,260
Heroku only wants to tell us after we have actually deployed our application so we can't look up on

80
00:05:15,260 --> 00:05:18,020
Heroku what our port is going to be ahead of time.

81
00:05:18,080 --> 00:05:25,040
We have to wait until essentially the very last second when our app is starting to be executed by Heroku

82
00:05:25,250 --> 00:05:26,780
to figure out what the port is.

83
00:05:26,960 --> 00:05:29,200
And that is what this statement right here does.

84
00:05:29,210 --> 00:05:36,830
It says look at the underlying environment and see if they have declared a port for us to use.

85
00:05:36,860 --> 00:05:40,340
Now the trick here is that if we are running in production.

86
00:05:40,370 --> 00:05:44,500
So if Heroku is running our app then we can freely use this process.

87
00:05:44,550 --> 00:05:46,410
NV port variable.

88
00:05:46,550 --> 00:05:52,310
However if we are running our code inside of a development environment like on our machines like as

89
00:05:52,310 --> 00:05:57,100
we are right now then this variable might not actually be defined.

90
00:05:57,290 --> 00:06:02,720
So to handle the case in which we are running in a development environment we're going to add on a simple

91
00:06:02,780 --> 00:06:08,560
boolean statement we're going to say 4 5 0 0 0 0 and like so.

92
00:06:08,900 --> 00:06:15,230
So what this says is if there is an environment variable that has been already defined by Heroku go

93
00:06:15,230 --> 00:06:22,600
ahead and sign that variable to port otherwise by default just use the value of 5000.

94
00:06:22,940 --> 00:06:25,930
And so in our development environment we'll use 5000.

95
00:06:25,930 --> 00:06:30,750
And production will use whatever port Heroku is attempting to provide to us.

96
00:06:31,400 --> 00:06:36,920
So then on the next line when we decide what port to listen to rather than always listening to 5000

97
00:06:37,240 --> 00:06:43,510
will listen to the port that we just calculated on line it will say port like so.

98
00:06:44,100 --> 00:06:44,460
OK.

99
00:06:44,480 --> 00:06:51,230
So that's one step done just a couple more to go the remainder on here are much more easy and a little

100
00:06:51,230 --> 00:06:53,050
bit more straightforward than the one we just did.

101
00:06:53,090 --> 00:06:56,180
So we really put the hardest one first.

102
00:06:56,180 --> 00:07:02,000
The second step we have to go through is tell him Heroku exactly what version of node we want it to

103
00:07:02,000 --> 00:07:02,870
use.

104
00:07:02,870 --> 00:07:08,090
So remember the first video inside this course we had said that we are going to use a very specific

105
00:07:08,090 --> 00:07:14,150
or at least a very up to date version of node because we are going to rely upon some very advanced features

106
00:07:14,180 --> 00:07:21,080
or very new features of node by default Heroku attempts to use a little bit of an older version which

107
00:07:21,080 --> 00:07:28,180
would definitely without a doubt crash if we attempted to run the completed version of our app on it.

108
00:07:28,190 --> 00:07:33,460
So we're going to tell her Oku to use a very specific version of Node.

109
00:07:33,550 --> 00:07:35,890
Again this is a pretty straightforward process.

110
00:07:35,930 --> 00:07:38,270
I'm going to change back over to my code editor.

111
00:07:38,270 --> 00:07:39,760
I'm going to open up my package.

112
00:07:39,830 --> 00:07:47,580
It's on file and inside of this Jason object I'm going to add a new configuration block.

113
00:07:47,630 --> 00:07:53,510
So right underneath main and right above scripts is a good place for this inside of double quotes and

114
00:07:53,510 --> 00:07:54,230
do make sure.

115
00:07:54,230 --> 00:07:58,870
Please please please make sure you are using double quotes here not single quotes.

116
00:07:58,970 --> 00:08:07,720
We're going to say engines and then this is going to be another object we'll say node we want version

117
00:08:07,850 --> 00:08:12,060
eight point eight point one or put a comma.

118
00:08:12,410 --> 00:08:14,150
And I will say NPM.

119
00:08:14,480 --> 00:08:21,170
And we want version 5.0 point 3 and then do make sure that you get a comma after the closing brace here

120
00:08:21,170 --> 00:08:22,080
as well.

121
00:08:22,640 --> 00:08:23,270
OK.

122
00:08:23,810 --> 00:08:26,700
So please do triple check that you've got all your comments in here.

123
00:08:26,720 --> 00:08:32,150
Very easy to miss one of them and do make sure that every single statement that you just put in here

124
00:08:32,210 --> 00:08:37,400
every little line has a double quote around its single quotes will not work.

125
00:08:37,400 --> 00:08:39,220
It has to be double.

126
00:08:40,100 --> 00:08:41,870
OK so that's pretty much it.

127
00:08:42,020 --> 00:08:46,080
Whenever Heroku boots up our application it will read in our package.

128
00:08:46,250 --> 00:08:50,000
Some file and see if we have declared any versions for it to use.

129
00:08:50,000 --> 00:08:55,160
And if we have Heroku is going to use that version whenever deploys our application.

130
00:08:55,170 --> 00:08:57,170
OK let's move on to Step 3.

131
00:08:57,170 --> 00:08:59,330
Specify a start script.

132
00:08:59,330 --> 00:09:05,110
So when we deploy our application Heroku we have to tell Heroku what command it should run to start

133
00:09:05,100 --> 00:09:06,260
up our server.

134
00:09:06,260 --> 00:09:11,990
You can kind of imagine that between 20 different servers or 20 different applications there might be

135
00:09:12,050 --> 00:09:15,880
20 different ways of starting them up and running them in production.

136
00:09:16,200 --> 00:09:22,280
And so what we're going to do right here is tell Heroku exactly how it should startup our server to

137
00:09:22,280 --> 00:09:22,790
do so.

138
00:09:22,820 --> 00:09:28,010
We'll flip back over to our code editor still inside the package not just on file.

139
00:09:28,010 --> 00:09:31,060
I'm going to find the section labeled as scripts.

140
00:09:31,250 --> 00:09:37,850
I'm going to delete the existing test script inside of here and I will replace it with double quotes

141
00:09:38,390 --> 00:09:45,590
start and then node index j us like so.

142
00:09:45,590 --> 00:09:47,780
So this one probably won't be that big a surprise.

143
00:09:47,780 --> 00:09:53,500
Remember we just started up our server like two sections ago by running the command node index.

144
00:09:53,600 --> 00:10:02,770
Yes that attempts to call or run the index file using the no G-S runtime whenever Heroku attempts to

145
00:10:02,770 --> 00:10:08,250
deploy or to run our application it will automatically attempt to run the start script right here.

146
00:10:08,320 --> 00:10:13,480
And so we are essentially saying hey Heroku we understand that you're going to run a script called start

147
00:10:13,870 --> 00:10:18,600
whenever you do execute this command right here and that's pretty much it.

148
00:10:19,270 --> 00:10:21,730
I'll get down to the very last step here.

149
00:10:21,790 --> 00:10:25,240
And then we can take a break and start the deployment.

150
00:10:25,270 --> 00:10:29,760
So the last step is to create a dot get ignore file.

151
00:10:29,830 --> 00:10:35,020
The purpose of this file is to make sure that we do not accidentally commit any of the dependencies

152
00:10:35,020 --> 00:10:37,000
that we have created or installed.

153
00:10:37,000 --> 00:10:40,590
Excuse me if we change back over to our code editor.

154
00:10:40,690 --> 00:10:46,690
Remember that when we installed express dependency inside of our project it automatically created this

155
00:10:46,690 --> 00:10:52,380
node modules directory where we got all these automatically install dependencies.

156
00:10:52,450 --> 00:10:59,260
Traditionally we do not commit these dependencies or we do not transmit them over to get me to Heroku

157
00:10:59,560 --> 00:11:02,110
when we attempt to deploy our application.

158
00:11:02,110 --> 00:11:06,810
Rather we let Heroku install all of our dependencies itself.

159
00:11:08,030 --> 00:11:13,490
So the purpose of a dot get ignore file is to make sure that we don't accidentally commit all of these

160
00:11:13,490 --> 00:11:18,320
dependencies to source or to version control when we deploy our application.

161
00:11:18,320 --> 00:11:19,220
So let's get to it.

162
00:11:19,220 --> 00:11:23,220
This is give me another easy step inside of our project directory.

163
00:11:23,300 --> 00:11:27,550
I'll make a new file called Daut get ignored.

164
00:11:27,820 --> 00:11:33,710
Do make sure you get the dot on the very front there and then inside of this file We're going to add

165
00:11:33,710 --> 00:11:38,560
the text node underscore modules and save it.

166
00:11:38,600 --> 00:11:43,790
This essentially tells get which we will use in just a second to commit our project to and use as version

167
00:11:43,790 --> 00:11:48,690
control to not attempt to commit the entire folder of node modules.

168
00:11:48,710 --> 00:11:51,450
Don't touch it don't worry about saving it to get.

169
00:11:51,470 --> 00:11:53,400
Just ignore it entirely.

170
00:11:54,190 --> 00:11:54,550
OK.

171
00:11:54,590 --> 00:11:57,480
So that's pretty much it for our pre-deployment checklist.

172
00:11:57,500 --> 00:11:59,390
We've gone through all four steps.

173
00:11:59,450 --> 00:12:01,040
So let's now take a break.

174
00:12:01,070 --> 00:12:06,140
When we come back we'll run through our first time deployment checklist and then we will figure out

175
00:12:06,140 --> 00:12:08,600
how we handle subsequent deployments.

176
00:12:08,600 --> 00:12:10,670
So I'll see you in just a second.