1
00:00:02,110 --> 00:00:04,710
So we did take care about the database

2
00:00:04,710 --> 00:00:05,970
as a next step,

3
00:00:05,970 --> 00:00:08,850
we can now deploy our code.

4
00:00:08,850 --> 00:00:09,730
And for this, we should,

5
00:00:09,730 --> 00:00:10,563
first of all,

6
00:00:10,563 --> 00:00:15,280
go through the Heroku language specific setup instructions.

7
00:00:15,280 --> 00:00:16,113
In our case,

8
00:00:16,113 --> 00:00:19,150
we should go through to a specific note JS deployment

9
00:00:19,150 --> 00:00:20,240
instructions,

10
00:00:20,240 --> 00:00:21,260
though no worries,

11
00:00:21,260 --> 00:00:22,963
that will be rather simple.

12
00:00:24,090 --> 00:00:24,923
Now here,

13
00:00:24,923 --> 00:00:27,610
we learned that we should have the dependencies that we need

14
00:00:27,610 --> 00:00:29,780
in package.Json.

15
00:00:29,780 --> 00:00:31,030
And we do have that

16
00:00:31,030 --> 00:00:33,010
because we always use the NPM installed

17
00:00:33,010 --> 00:00:33,870
for adding them,

18
00:00:33,870 --> 00:00:36,640
so they were automatically added.

19
00:00:36,640 --> 00:00:38,530
This is now all the where the difference

20
00:00:38,530 --> 00:00:40,850
between dependencies and dev dependencies

21
00:00:40,850 --> 00:00:43,980
becomes important because Heroku will,

22
00:00:43,980 --> 00:00:47,000
once we pushed our code to Heroku,

23
00:00:47,000 --> 00:00:49,880
automatically install all the dependencies,

24
00:00:49,880 --> 00:00:52,220
but not the dev dependencies,

25
00:00:52,220 --> 00:00:55,610
because the idea behind the dev dependencies is that,

26
00:00:55,610 --> 00:00:56,920
as their name suggests,

27
00:00:56,920 --> 00:00:59,605
we only need them during development.

28
00:00:59,605 --> 00:01:02,320
That's why it's so important to have all the

29
00:01:04,137 --> 00:01:05,752
key dependencies in this dependencies node

30
00:01:05,752 --> 00:01:06,585
in packaged.json,

31
00:01:06,585 --> 00:01:09,760
because Heroku will use that to install all the

32
00:01:09,760 --> 00:01:12,133
dependencies after we pushed our code.

33
00:01:13,961 --> 00:01:15,370
So that's something we have to take care about,

34
00:01:15,370 --> 00:01:18,291
and that is something we did take care about.

35
00:01:18,291 --> 00:01:19,860
As a next step,

36
00:01:19,860 --> 00:01:24,510
we can specify the specific node version we want to use.

37
00:01:24,510 --> 00:01:25,792
Now, of course,

38
00:01:25,792 --> 00:01:27,950
we have a certain version installed locally,

39
00:01:27,950 --> 00:01:31,250
we can see it if we type node--version

40
00:01:31,250 --> 00:01:33,460
but just because we have that locally,

41
00:01:33,460 --> 00:01:36,100
does not mean that Heroku will use the exact

42
00:01:36,100 --> 00:01:37,310
same version.

43
00:01:37,310 --> 00:01:39,280
It might be using an older version.

44
00:01:39,280 --> 00:01:43,140
And if we are then using a node JS feature that only exists

45
00:01:44,008 --> 00:01:44,841
in the latest version,

46
00:01:44,841 --> 00:01:47,350
then that older version Heroku might be using

47
00:01:47,350 --> 00:01:48,543
might not be enough.

48
00:01:49,380 --> 00:01:50,830
Now here, that's not the case.

49
00:01:50,830 --> 00:01:51,663
Still,

50
00:01:51,663 --> 00:01:54,120
you might want to add an extra node here

51
00:01:54,120 --> 00:01:57,590
to your package.json file anywhere in there.

52
00:01:57,590 --> 00:01:59,810
And that would be the engines node,

53
00:01:59,810 --> 00:02:02,240
the engines key value pair,

54
00:02:02,240 --> 00:02:05,720
just as mentioned here in the Heroku documentation,

55
00:02:05,720 --> 00:02:09,070
where you set the node version you want to use.

56
00:02:09,070 --> 00:02:11,330
So in the engines object here,

57
00:02:11,330 --> 00:02:12,410
we can set node.

58
00:02:12,410 --> 00:02:16,403
And in my case, I'll set it to 16.X to use that version,

59
00:02:17,680 --> 00:02:18,910
or to be precise,

60
00:02:18,910 --> 00:02:23,043
to force Heroku to use that version for executing our code.

61
00:02:23,893 --> 00:02:26,660
Now, once that is done,

62
00:02:26,660 --> 00:02:28,910
you can specify a start script,

63
00:02:28,910 --> 00:02:30,533
if you didn't add a Procfile.

64
00:02:31,590 --> 00:02:33,790
So if no Procfile exists,

65
00:02:33,790 --> 00:02:35,810
then you should update your start script

66
00:02:35,810 --> 00:02:38,870
to use node instead of node mon.

67
00:02:38,870 --> 00:02:41,418
But since I do have a Procfile,

68
00:02:41,418 --> 00:02:43,040
that will be prioritized by Heroku

69
00:02:43,040 --> 00:02:46,020
and this command will be executed instead.

70
00:02:46,020 --> 00:02:47,810
So we should be fine regarding that.

71
00:02:47,810 --> 00:02:50,593
And we don't need to update our start script.

72
00:02:52,100 --> 00:02:54,570
Now we can then also test this locally

73
00:02:54,570 --> 00:02:57,300
with the Heroku local web command

74
00:02:57,300 --> 00:03:00,160
to preview this website locally

75
00:03:00,160 --> 00:03:03,260
as Heroku would execute it on the server,

76
00:03:03,260 --> 00:03:05,240
but I'll skip this here.

77
00:03:05,240 --> 00:03:08,530
And instead I'll make sure that we have the

78
00:03:08,530 --> 00:03:10,820
get ignore file setup properly.

79
00:03:10,820 --> 00:03:11,653
And for this,

80
00:03:11,653 --> 00:03:13,540
we can copy the settings from here

81
00:03:13,540 --> 00:03:17,030
and override our get ignore file with the configuration

82
00:03:17,030 --> 00:03:18,130
from there though,

83
00:03:18,130 --> 00:03:21,143
the configuration we had before would have also worked.

84
00:03:23,190 --> 00:03:26,610
And now we can deploy our application to Heroku

85
00:03:26,610 --> 00:03:28,375
by first of all,

86
00:03:28,375 --> 00:03:29,208
adding a new commit

87
00:03:29,208 --> 00:03:31,330
logging in, which we already did,

88
00:03:31,330 --> 00:03:32,980
creating, which we already did.

89
00:03:32,980 --> 00:03:35,853
And therefore pushing is the step we now need to do.

90
00:03:36,940 --> 00:03:37,930
So, first of all,

91
00:03:37,930 --> 00:03:42,010
I'll create a never commit with all the changes we applied,

92
00:03:42,010 --> 00:03:46,910
get commit finalized deployment.

93
00:03:48,870 --> 00:03:53,740
And after doing this, we can run this command here,

94
00:03:53,740 --> 00:03:55,730
get push Heroku main

95
00:03:55,730 --> 00:03:58,420
to push our code from our local machine

96
00:03:58,420 --> 00:04:00,790
to Heroku's servers.

97
00:04:00,790 --> 00:04:02,300
Though actually, in my case,

98
00:04:02,300 --> 00:04:06,217
my main branch is still called master.

99
00:04:06,217 --> 00:04:07,820
So I'll have to change this.

100
00:04:07,820 --> 00:04:09,680
You in the end can run get branch

101
00:04:09,680 --> 00:04:11,850
to see what your branch name is.

102
00:04:11,850 --> 00:04:14,660
And if this this main, this command will work.

103
00:04:14,660 --> 00:04:16,720
If it's master, as it is here for me,

104
00:04:16,720 --> 00:04:18,463
you should change this to master.

105
00:04:19,670 --> 00:04:23,460
And this will now push our code to Heroku's servers.

106
00:04:23,460 --> 00:04:24,660
And then there,

107
00:04:24,660 --> 00:04:27,540
we automatically will get this built output

108
00:04:27,540 --> 00:04:30,480
where Heroku will now install all dependencies

109
00:04:30,480 --> 00:04:33,120
and then start our server.

110
00:04:33,120 --> 00:04:35,370
Though, starting that server

111
00:04:35,370 --> 00:04:37,440
will actually fail here,

112
00:04:37,440 --> 00:04:38,940
as you will see soon,

113
00:04:38,940 --> 00:04:42,004
because connecting to the database will fail.

114
00:04:42,004 --> 00:04:45,190
Now we get the URL automatically here

115
00:04:45,190 --> 00:04:47,610
in the output where we should be able to

116
00:04:47,610 --> 00:04:49,620
visit our deployed website.

117
00:04:49,620 --> 00:04:50,570
But if you entered this,

118
00:04:50,570 --> 00:04:52,030
you won't see anything there,

119
00:04:52,030 --> 00:04:53,660
because as I just mentioned,

120
00:04:53,660 --> 00:04:55,180
deployment will fail

121
00:04:56,530 --> 00:04:57,960
because what we need to do,

122
00:04:57,960 --> 00:04:59,810
since we used environment variables,

123
00:04:59,810 --> 00:05:02,010
is we show up log into Heroku

124
00:05:02,010 --> 00:05:05,170
and go to dashboard.heroku.com,

125
00:05:05,170 --> 00:05:07,669
or just to heroku.com,

126
00:05:07,669 --> 00:05:10,690
and I'll accept this here,

127
00:05:10,690 --> 00:05:12,000
and now here,

128
00:05:12,000 --> 00:05:13,960
I got two applications actually,

129
00:05:13,960 --> 00:05:16,420
because I did this twice on different machines.

130
00:05:16,420 --> 00:05:18,900
This one is the one I just pushed.

131
00:05:18,900 --> 00:05:20,765
So you probably only have one

132
00:05:20,765 --> 00:05:22,920
application here.

133
00:05:22,920 --> 00:05:24,060
And here on this screen

134
00:05:24,060 --> 00:05:26,410
you'll find more information about your website,

135
00:05:26,410 --> 00:05:29,200
your application, and you can configure it.

136
00:05:29,200 --> 00:05:30,750
And most importantly,

137
00:05:30,750 --> 00:05:34,470
here we can also add environment variables.

138
00:05:34,470 --> 00:05:36,810
Here under config vars.

139
00:05:36,810 --> 00:05:40,350
Here, we now need to add this environment variable,

140
00:05:40,350 --> 00:05:42,420
which we expect in database JS

141
00:05:42,420 --> 00:05:45,033
the MONGODB URL variable,

142
00:05:45,920 --> 00:05:47,550
not the process.env part,

143
00:05:47,550 --> 00:05:49,190
that's not JS specific,

144
00:05:49,190 --> 00:05:51,303
just the name after .env.

145
00:05:52,380 --> 00:05:55,260
and that is now what we add here as a key,

146
00:05:55,260 --> 00:05:56,850
and as a value,

147
00:05:56,850 --> 00:06:01,113
we take this URL here from MongoDB atlas,

148
00:06:04,230 --> 00:06:07,670
and we paste this in here as a value though,

149
00:06:07,670 --> 00:06:10,930
you have to make sure you use the correct username here,

150
00:06:10,930 --> 00:06:14,330
and you replace the password with the concrete password

151
00:06:14,330 --> 00:06:17,253
you set up for this MongoDB database user.

152
00:06:18,230 --> 00:06:19,420
And then click add

153
00:06:20,840 --> 00:06:21,690
that's important.

154
00:06:22,580 --> 00:06:26,270
We could have done that locally with that Heroku tool

155
00:06:26,270 --> 00:06:27,103
as well,

156
00:06:27,103 --> 00:06:29,280
but I wanted to also show you this interface

157
00:06:29,280 --> 00:06:32,593
and where you could set environment variables there.

158
00:06:34,090 --> 00:06:36,134
Now, there are more things you can configure here.

159
00:06:36,134 --> 00:06:37,390
For example,

160
00:06:37,390 --> 00:06:41,730
you could add a SSL certificate for HTTPS serving,

161
00:06:41,730 --> 00:06:45,390
which is recommended if this would be a serious website.

162
00:06:45,390 --> 00:06:49,700
You've got documentation and easy to use process here

163
00:06:49,700 --> 00:06:52,300
on Heroku to add this certificate,

164
00:06:52,300 --> 00:06:55,660
to add extra security to your website.

165
00:06:55,660 --> 00:06:57,930
And you can also add a custom domain here

166
00:06:57,930 --> 00:07:00,450
just as you could do it on Netlify.

167
00:07:00,450 --> 00:07:01,700
As I mentioned earlier,

168
00:07:01,700 --> 00:07:04,623
most hosting providers offer features like this.

169
00:07:06,020 --> 00:07:08,440
Now here, that's all fine, though.

170
00:07:08,440 --> 00:07:10,970
I'll instead go here to more

171
00:07:12,080 --> 00:07:14,560
and actually click restart all dynos.

172
00:07:14,560 --> 00:07:16,930
A dyno is just a remote machine,

173
00:07:16,930 --> 00:07:19,600
a server in Heroku's world.

174
00:07:19,600 --> 00:07:22,560
And with that, I restart my website,

175
00:07:22,560 --> 00:07:25,683
now that I got the updated environment variable.

176
00:07:27,000 --> 00:07:28,820
Now, after doing that,

177
00:07:28,820 --> 00:07:31,290
maybe after waiting a couple of seconds,

178
00:07:31,290 --> 00:07:33,500
you should be able to click open app,

179
00:07:33,500 --> 00:07:35,790
and now you should see your website

180
00:07:35,790 --> 00:07:38,100
and you can also click this button here,

181
00:07:38,100 --> 00:07:39,450
and when you click that button,

182
00:07:39,450 --> 00:07:41,670
you see the counter increases.

183
00:07:41,670 --> 00:07:42,893
And if you reload,

184
00:07:43,780 --> 00:07:44,613
of course,

185
00:07:44,613 --> 00:07:47,930
it's still there because this is now dynamic

186
00:07:47,930 --> 00:07:49,810
with our service site code.

187
00:07:49,810 --> 00:07:51,030
Now, however,

188
00:07:51,030 --> 00:07:52,920
as you can tell by the URL,

189
00:07:52,920 --> 00:07:55,010
not running on our local machine,

190
00:07:55,010 --> 00:07:59,770
but instead on a remote machine provided by Heroku.

191
00:07:59,770 --> 00:08:00,910
And now as mentioned,

192
00:08:00,910 --> 00:08:02,900
you could dive deeper into Heroku

193
00:08:02,900 --> 00:08:04,360
into its documentation,

194
00:08:04,360 --> 00:08:06,530
add a custom domain, and so on,

195
00:08:06,530 --> 00:08:08,668
and then you would have a real website hosting

196
00:08:08,668 --> 00:08:10,763
for a real website.