1
00:00:01,150 --> 00:00:03,130
‫So, after all this time

2
00:00:03,130 --> 00:00:06,850
‫and all this work building this huge complete project,

3
00:00:06,850 --> 00:00:09,660
‫it's now finally time to really deploy it

4
00:00:09,660 --> 00:00:13,370
‫to a web server and really share it with the world.

5
00:00:13,370 --> 00:00:15,510
‫So, in this video, you will learn how

6
00:00:15,510 --> 00:00:18,467
‫to deploy a project onto Heroku.

7
00:00:20,167 --> 00:00:22,610
‫And, the first thing that we actually need to do is

8
00:00:22,610 --> 00:00:25,143
‫to install Heroku on our computer.

9
00:00:26,870 --> 00:00:30,427
‫So, let's just search for Heroku NodeJS.

10
00:00:35,020 --> 00:00:38,050
‫And so, here, we basically have a getting started guide

11
00:00:38,050 --> 00:00:41,530
‫for NodeJS with Heroku

12
00:00:41,530 --> 00:00:45,000
‫because you can host all kinds of apps on Heroku

13
00:00:45,000 --> 00:00:48,700
‫like PHP or Ruby on Rails applications.

14
00:00:48,700 --> 00:00:51,190
‫So, it doesn't only work for NodeJS.

15
00:00:51,190 --> 00:00:54,420
‫And, we will take a closer look at Heroku in a second,

16
00:00:54,420 --> 00:00:57,520
‫but for now, let's just start by installing

17
00:00:57,520 --> 00:00:59,200
‫this program here.

18
00:00:59,200 --> 00:01:02,630
‫So, I'm in the setup part of this guide here.

19
00:01:02,630 --> 00:01:05,580
‫And so, now, please go ahead and install the installer

20
00:01:05,580 --> 00:01:08,540
‫for your platform, whether that's macOS,

21
00:01:08,540 --> 00:01:10,660
‫Windows, or Linux.

22
00:01:10,660 --> 00:01:14,660
‫Or, in this case here, I guess it only works for Ubuntu.

23
00:01:14,660 --> 00:01:17,270
‫No, actually it says here that it's available

24
00:01:17,270 --> 00:01:19,770
‫for other Linux as well.

25
00:01:19,770 --> 00:01:22,260
‫Anyway, please go ahead and install the version

26
00:01:22,260 --> 00:01:24,010
‫that you need for your computer

27
00:01:24,010 --> 00:01:27,090
‫and then, in the meantime, while that is installing,

28
00:01:27,090 --> 00:01:30,190
‫go ahead and create a new account.

29
00:01:30,190 --> 00:01:32,700
‫So, click here on Sign up

30
00:01:32,700 --> 00:01:36,010
‫and then open up your free Heroku account.

31
00:01:36,010 --> 00:01:38,890
‫So, yet another account that you need to create.

32
00:01:38,890 --> 00:01:41,640
‫So, there really are a lot of different accounts

33
00:01:41,640 --> 00:01:45,140
‫that you need to create in order to complete this project,

34
00:01:45,140 --> 00:01:49,310
‫but I guess that's just how modern web development works.

35
00:01:49,310 --> 00:01:51,730
‫Anyway, after you have your account created,

36
00:01:51,730 --> 00:01:55,050
‫let's take a quick look here at the Heroku website

37
00:01:55,050 --> 00:01:59,830
‫just to get an overview of what this platform is all about.

38
00:01:59,830 --> 00:02:01,700
‫So, Heroku is this platform

39
00:02:01,700 --> 00:02:04,870
‫which makes it really, really easy and hassle-free

40
00:02:04,870 --> 00:02:07,290
‫to deploy your web applications.

41
00:02:07,290 --> 00:02:10,360
‫And, again, they can use any language

42
00:02:10,360 --> 00:02:11,650
‫that you can imagine.

43
00:02:11,650 --> 00:02:14,600
‫As you see, NodeJS, Ruby on Rails,

44
00:02:14,600 --> 00:02:17,820
‫this one I guess is Go, or actually it's Java,

45
00:02:17,820 --> 00:02:22,050
‫or PHP, Python, this one is Go, right?

46
00:02:22,050 --> 00:02:27,050
‫And so, all kinds of apps really run on Heroku.

47
00:02:28,380 --> 00:02:30,890
‫So, let's see what they say here.

48
00:02:30,890 --> 00:02:35,163
‫And, this is mostly just marketing talk I guess.

49
00:02:36,020 --> 00:02:38,220
‫So, nothing all too interesting here.

50
00:02:38,220 --> 00:02:40,660
‫But, of course, you can take a look here

51
00:02:40,660 --> 00:02:42,550
‫at all these different manuals.

52
00:02:42,550 --> 00:02:45,690
‫And, actually it is free to get started with Heroku

53
00:02:45,690 --> 00:02:47,900
‫on a really basic application.

54
00:02:47,900 --> 00:02:51,120
‫But, of course, once you start to level that up,

55
00:02:51,120 --> 00:02:53,083
‫you're gonna have to start to pay.

56
00:02:54,400 --> 00:02:56,470
‫But, here, the free version, as you can see,

57
00:02:56,470 --> 00:02:59,600
‫comes with all the core platform features.

58
00:02:59,600 --> 00:03:01,820
‫You can even add custom domains.

59
00:03:01,820 --> 00:03:03,800
‫But, the only problem with it is

60
00:03:03,800 --> 00:03:06,550
‫that the application will basically sleep,

61
00:03:06,550 --> 00:03:08,210
‫so, basically, after 30 minutes

62
00:03:08,210 --> 00:03:10,283
‫of no one accessing the application.

63
00:03:11,760 --> 00:03:13,460
‫But, anyway, you can take a look

64
00:03:13,460 --> 00:03:15,660
‫at all of this on your own.

65
00:03:15,660 --> 00:03:18,870
‫So, let's now actually go back to our project here.

66
00:03:18,870 --> 00:03:21,430
‫And, to get started with the deployment process,

67
00:03:21,430 --> 00:03:25,300
‫let's start by logging into Heroku on our command line.

68
00:03:25,300 --> 00:03:28,370
‫And, that is going to work because of the installation

69
00:03:28,370 --> 00:03:29,367
‫that we just did.

70
00:03:30,290 --> 00:03:32,970
‫All right, let's give it some more space here.

71
00:03:32,970 --> 00:03:36,763
‫Clean that up and now write heroku login.

72
00:03:40,060 --> 00:03:43,350
‫So, if your Heroku installation was successful,

73
00:03:43,350 --> 00:03:47,410
‫upon typing heroku login, you should see this message here,

74
00:03:47,410 --> 00:03:50,100
‫press any key to open up the browser.

75
00:03:50,100 --> 00:03:52,890
‫So, just press really any key, as it says,

76
00:03:52,890 --> 00:03:55,663
‫except Q because that will exit the app.

77
00:03:57,270 --> 00:04:00,880
‫And so, that is then going to open up a window for you

78
00:04:00,880 --> 00:04:02,243
‫where you can log in.

79
00:04:04,690 --> 00:04:07,250
‫And, after that, just like magic,

80
00:04:07,250 --> 00:04:11,110
‫you will be logged in on Heroku in your command line.

81
00:04:11,110 --> 00:04:13,650
‫So, it should probably take a bit

82
00:04:14,490 --> 00:04:17,230
‫and sometimes, it doesn't even work on the first try.

83
00:04:17,230 --> 00:04:19,090
‫So, actually that happened to me before.

84
00:04:19,090 --> 00:04:20,873
‫And so, just hit control C.

85
00:04:22,990 --> 00:04:26,680
‫And so, on a Mac, that really is control C, not command C.

86
00:04:26,680 --> 00:04:28,163
‫And. Let's try that again.

87
00:04:29,370 --> 00:04:33,493
‫Press any key, go back to the browser, log in again.

88
00:04:35,980 --> 00:04:38,750
‫Go back again, and so then that's done.

89
00:04:38,750 --> 00:04:42,480
‫So, you see, now I'm logged in with my email address.

90
00:04:42,480 --> 00:04:44,890
‫So, again, this was not the first time

91
00:04:44,890 --> 00:04:47,920
‫it didn't work for me on the first time.

92
00:04:47,920 --> 00:04:49,500
‫And so, if that happened to you,

93
00:04:49,500 --> 00:04:53,120
‫then just do it exactly the way I did it here.

94
00:04:53,120 --> 00:04:55,130
‫Anyway, now, with this, we are logged

95
00:04:55,130 --> 00:04:57,660
‫into Heroku here in our console

96
00:04:57,660 --> 00:05:00,993
‫and so we should now be able to create a new project.

97
00:05:02,360 --> 00:05:05,560
‫Now, before doing that, we actually need to change something

98
00:05:05,560 --> 00:05:10,480
‫in our NPM package.json file.

99
00:05:10,480 --> 00:05:11,650
‫So, this one.

100
00:05:11,650 --> 00:05:13,760
‫And, that's because Heroku actually uses

101
00:05:13,760 --> 00:05:17,810
‫our start command here to start up our application.

102
00:05:17,810 --> 00:05:22,040
‫Now, in production, we do not want to use nodemon here.

103
00:05:22,040 --> 00:05:23,870
‫We simply want to run our application

104
00:05:23,870 --> 00:05:26,920
‫using the node command and not nodemon

105
00:05:26,920 --> 00:05:29,950
‫because that one is really only for development.

106
00:05:29,950 --> 00:05:32,970
‫And so, let's change that and I will duplicate this line

107
00:05:33,937 --> 00:05:35,587
‫and then we'll call this one dev.

108
00:05:36,450 --> 00:05:38,953
‫And then, the start one will only be node.

109
00:05:40,690 --> 00:05:43,810
‫So, again, in your package.json, you should always

110
00:05:43,810 --> 00:05:46,890
‫have this start script like this.

111
00:05:46,890 --> 00:05:49,773
‫So, the node command and then your entry point.

112
00:05:50,610 --> 00:05:53,920
‫Now, it's also important for Heroku is

113
00:05:53,920 --> 00:05:57,490
‫that you specify these engines here.

114
00:05:57,490 --> 00:05:59,670
‫And so, we did that before, I think,

115
00:05:59,670 --> 00:06:01,720
‫because some package, or actually

116
00:06:01,720 --> 00:06:05,230
‫because ESLint required it to work properly.

117
00:06:05,230 --> 00:06:07,440
‫But, if we hadn't set it back then,

118
00:06:07,440 --> 00:06:11,213
‫well, then we would need to really set it at this point.

119
00:06:12,610 --> 00:06:14,550
‫Now, since we changed this file,

120
00:06:14,550 --> 00:06:18,353
‫now, we need to commit these changes to our repository,

121
00:06:19,200 --> 00:06:24,200
‫so let's git add package.json here.

122
00:06:24,560 --> 00:06:25,693
‫And then, git commit.

123
00:06:31,820 --> 00:06:34,323
‫And then, with a useful commit message.

124
00:06:37,652 --> 00:06:39,660
‫Now, another thing that's really important

125
00:06:39,660 --> 00:06:42,640
‫when you deploy an application to Heroku is

126
00:06:42,640 --> 00:06:46,543
‫that you listen to the port at process.env.PORT.

127
00:06:47,580 --> 00:06:52,580
‫So, right here in the server, we actually do that down here.

128
00:06:54,500 --> 00:06:59,100
‫So, we specify the port variable as process.env.PORT.

129
00:06:59,100 --> 00:07:02,460
‫And so, again, on Heroku, that's absolutely mandatory

130
00:07:02,460 --> 00:07:04,850
‫because otherwise, it will not work at all.

131
00:07:04,850 --> 00:07:07,010
‫So, if here, for example, we just specified

132
00:07:07,010 --> 00:07:10,130
‫some random port, like 3000 here,

133
00:07:10,130 --> 00:07:11,780
‫then that would really not work

134
00:07:13,035 --> 00:07:15,050
‫and that's because behind the scenes,

135
00:07:15,050 --> 00:07:18,730
‫Heroku will actually assign a random port

136
00:07:18,730 --> 00:07:20,780
‫to this environment variable.

137
00:07:20,780 --> 00:07:23,270
‫But, a bit more about that in a second

138
00:07:24,310 --> 00:07:26,320
‫because now, we are really ready

139
00:07:26,320 --> 00:07:28,780
‫to do the actual deployment.

140
00:07:28,780 --> 00:07:31,890
‫And, to do that, we create a brand new Heroku project

141
00:07:31,890 --> 00:07:33,420
‫in our project folder.

142
00:07:33,420 --> 00:07:36,830
‫So, make sure that you really are in your root folder

143
00:07:36,830 --> 00:07:38,700
‫and then, once you're sure you're there

144
00:07:38,700 --> 00:07:42,240
‫and you're logged into Heroku, which we did before,

145
00:07:42,240 --> 00:07:46,943
‫you can then write heroku create.

146
00:07:48,160 --> 00:07:52,000
‫And, this will then create a new app basically

147
00:07:52,000 --> 00:07:53,890
‫with a completely random name.

148
00:07:53,890 --> 00:07:57,060
‫So, in my case, that's radiant-springs

149
00:07:57,060 --> 00:07:59,320
‫and then this number, but your application

150
00:07:59,320 --> 00:08:02,350
‫will, of course, have a completely different name.

151
00:08:02,350 --> 00:08:04,020
‫Now, what this did was

152
00:08:04,020 --> 00:08:06,580
‫to actually create a new remote branch

153
00:08:06,580 --> 00:08:08,290
‫in our Git repository.

154
00:08:08,290 --> 00:08:10,500
‫And, this branch is called heroku.

155
00:08:10,500 --> 00:08:14,090
‫So, remember how before, in one of the previous lectures,

156
00:08:14,090 --> 00:08:17,150
‫we added a remote branch pointing to GitHub

157
00:08:17,150 --> 00:08:19,263
‫and that branch was called origin.

158
00:08:20,160 --> 00:08:23,530
‫And so, then we pushed our code to that remote branch

159
00:08:23,530 --> 00:08:27,423
‫using git push origin master, so like this.

160
00:08:29,090 --> 00:08:30,320
‫Remember that?

161
00:08:30,320 --> 00:08:31,610
‫And so, now, as I mentioned,

162
00:08:31,610 --> 00:08:35,040
‫we have a new remote branch here, which is called heroku.

163
00:08:35,040 --> 00:08:38,420
‫And so, really, the process of deploying our application is

164
00:08:38,420 --> 00:08:41,960
‫as simple as pushing our code to that remote branch.

165
00:08:41,960 --> 00:08:46,740
‫So, git push heroku master.

166
00:08:46,740 --> 00:08:49,450
‫And, it really needs to be the master branch.

167
00:08:49,450 --> 00:08:53,033
‫It is the only branch for which this deployment works.

168
00:08:53,870 --> 00:08:55,580
‫But, in our case, as you see here,

169
00:08:55,580 --> 00:08:57,700
‫we are actually in our master branch

170
00:08:57,700 --> 00:09:01,823
‫and you can also see it down here in the corner of VS Code.

171
00:09:03,020 --> 00:09:04,690
‫And so, that's no problem.

172
00:09:04,690 --> 00:09:06,670
‫So, let's now run this command,

173
00:09:06,670 --> 00:09:08,780
‫which should then take a couple of time

174
00:09:08,780 --> 00:09:11,580
‫because, of course, it will upload all your files

175
00:09:11,580 --> 00:09:14,323
‫that are in the repository up to Heroku.

176
00:09:18,330 --> 00:09:22,340
‫And now, you see all of this process here going on

177
00:09:22,340 --> 00:09:23,327
‫and so what this is doing is

178
00:09:23,327 --> 00:09:26,640
‫that it's actually installing all our dependencies here

179
00:09:26,640 --> 00:09:28,380
‫in our new application.

180
00:09:28,380 --> 00:09:30,357
‫So, in our application that is now on Heroku.

181
00:09:33,500 --> 00:09:35,970
‫So, let's wait until of this is done

182
00:09:35,970 --> 00:09:39,153
‫and I'll see you back when this process has finished.

183
00:09:40,470 --> 00:09:42,270
‫And so, that's done.

184
00:09:42,270 --> 00:09:46,350
‫So, I hope you got the message, Verifying deploy... done.

185
00:09:46,350 --> 00:09:50,610
‫So, you see, launching, and so it really means

186
00:09:50,610 --> 00:09:53,320
‫that our application is now deployed to Heroku

187
00:09:53,320 --> 00:09:55,023
‫onto this URL.

188
00:09:56,240 --> 00:09:58,770
‫So, you see the build succeed.

189
00:09:58,770 --> 00:10:01,920
‫And, really, all these messages

190
00:10:01,920 --> 00:10:04,190
‫that I already talked about before.

191
00:10:04,190 --> 00:10:06,810
‫And so, now, in order to open up our application,

192
00:10:06,810 --> 00:10:09,703
‫all we need to write is heroku open.

193
00:10:11,240 --> 00:10:13,750
‫Now, we don't expect this to work just yet

194
00:10:13,750 --> 00:10:16,250
‫because all of our environment variables

195
00:10:16,250 --> 00:10:17,620
‫are actually not defined

196
00:10:18,670 --> 00:10:22,780
‫because we did exclude this configuration file here

197
00:10:22,780 --> 00:10:24,163
‫from our Git repository.

198
00:10:25,560 --> 00:10:27,420
‫But, still, just for the fun of it,

199
00:10:27,420 --> 00:10:30,720
‫let's actually try to open our application.

200
00:10:30,720 --> 00:10:34,450
‫And so, indeed, that opens up our URL,

201
00:10:34,450 --> 00:10:38,517
‫in this case, at radiant-springs-85848.herokuapp.com.

202
00:10:41,100 --> 00:10:44,950
‫So, basically, it's the subdomain of Heroku.

203
00:10:44,950 --> 00:10:46,730
‫And so, again, as expected,

204
00:10:46,730 --> 00:10:49,320
‫we actually got some error here.

205
00:10:49,320 --> 00:10:52,430
‫And, once more, that's because our environment variables

206
00:10:52,430 --> 00:10:55,030
‫are, at this point, not yet defined.

207
00:10:55,030 --> 00:10:57,730
‫Now, we can also take a look at these errors

208
00:10:57,730 --> 00:10:59,850
‫in the Heroku logs.

209
00:10:59,850 --> 00:11:02,140
‫So, let me show you that as well.

210
00:11:02,140 --> 00:11:06,023
‫So, heroku logs --tail.

211
00:11:07,710 --> 00:11:11,313
‫So, here, you see state changed from storing to crashed,

212
00:11:13,100 --> 00:11:15,130
‫so let's see what we have here.

213
00:11:15,130 --> 00:11:17,170
‫Actually, you see the error message

214
00:11:17,170 --> 00:11:18,930
‫that we created ourselves here.

215
00:11:18,930 --> 00:11:21,530
‫So, UNCAUGHT EXECEPTION with this emoji

216
00:11:21,530 --> 00:11:23,060
‫and then Shutting down...

217
00:11:27,320 --> 00:11:28,700
‫And, you see here,

218
00:11:28,700 --> 00:11:31,980
‫Cannot read property 'replace' of undefined.

219
00:11:31,980 --> 00:11:35,170
‫And so, again, that's because the environment variables

220
00:11:35,170 --> 00:11:37,510
‫are not defined at this point.

221
00:11:37,510 --> 00:11:41,053
‫So, let's exit these logs here, again, with control C.

222
00:11:42,860 --> 00:11:44,810
‫And so, now, let's actually define

223
00:11:44,810 --> 00:11:46,800
‫these environment variables in order

224
00:11:46,800 --> 00:11:48,790
‫to make our application work.

225
00:11:48,790 --> 00:11:50,060
‫And, the way we do that is

226
00:11:50,060 --> 00:11:52,740
‫to specify each environment variable

227
00:11:52,740 --> 00:11:54,960
‫using a special Heroku command.

228
00:11:54,960 --> 00:11:58,080
‫So, Heroku and other hosting platforms,

229
00:11:58,080 --> 00:12:01,000
‫they don't use a .env file like we did here

230
00:12:01,000 --> 00:12:03,793
‫in development for all our config variables.

231
00:12:05,160 --> 00:12:09,560
‫So, again, here in development, we use this config.env

232
00:12:09,560 --> 00:12:11,560
‫to put our environment variables.

233
00:12:11,560 --> 00:12:13,730
‫But, here in Heroku, we will define them

234
00:12:13,730 --> 00:12:14,830
‫in a different way.

235
00:12:14,830 --> 00:12:16,610
‫But, then in our code, everything

236
00:12:16,610 --> 00:12:18,543
‫that we have works exactly the same.

237
00:12:19,856 --> 00:12:22,120
‫So, let's start with the NODE_ENV variable

238
00:12:22,120 --> 00:12:24,650
‫that we need to set to production.

239
00:12:24,650 --> 00:12:29,650
‫And so, we do that by saying heroku config:set

240
00:12:32,390 --> 00:12:36,160
‫and then the name of the variable, NODE_ENV=production.

241
00:12:40,930 --> 00:12:43,780
‫And, actually, this NODE_ENV variable

242
00:12:43,780 --> 00:12:47,220
‫is actually set by default to production by Heroku.

243
00:12:47,220 --> 00:12:49,980
‫But, still, let's make 100% sure

244
00:12:49,980 --> 00:12:52,240
‫that it really stays this way,

245
00:12:52,240 --> 00:12:54,760
‫even if Heroku changes something.

246
00:12:54,760 --> 00:12:57,440
‫So, really, to be sure, let's still do this

247
00:12:57,440 --> 00:13:00,610
‫because, as we know, a lot of our code actually depends

248
00:13:00,610 --> 00:13:03,130
‫on this variable and it also

249
00:13:03,130 --> 00:13:07,310
‫can make Node applications run up to three times faster.

250
00:13:07,310 --> 00:13:09,430
‫I think we talked about that before.

251
00:13:09,430 --> 00:13:12,610
‫So, the importance of setting NODE_ENV to production.

252
00:13:12,610 --> 00:13:15,913
‫But, anyway, it's a good thing to do it actually.

253
00:13:16,810 --> 00:13:18,950
‫So, just hit return and it will

254
00:13:18,950 --> 00:13:21,400
‫then set this environment variable

255
00:13:21,400 --> 00:13:22,980
‫and restart the application.

256
00:13:22,980 --> 00:13:25,500
‫And so, now, all we need to do is

257
00:13:25,500 --> 00:13:27,640
‫to basically do this for all

258
00:13:27,640 --> 00:13:30,580
‫of the relevant environment variables.

259
00:13:30,580 --> 00:13:34,490
‫So, we did NODE_ENV, now, the port, we will not set it

260
00:13:34,490 --> 00:13:36,360
‫because, as I mentioned before,

261
00:13:36,360 --> 00:13:38,380
‫Heroku will actually, behind the scenes,

262
00:13:38,380 --> 00:13:41,533
‫assign a random port to our application.

263
00:13:42,470 --> 00:13:44,913
‫And so, next up, let's add the database.

264
00:13:46,390 --> 00:13:48,290
‫And, actually, let's copy all of this.

265
00:13:52,550 --> 00:13:54,000
‫And then, just paste it here.

266
00:13:54,940 --> 00:13:56,960
‫And, that didn't really work,

267
00:13:56,960 --> 00:13:59,260
‫so let's try that with some quotes here maybe.

268
00:14:04,170 --> 00:14:06,580
‫Yeah, that looks much better.

269
00:14:06,580 --> 00:14:09,380
‫Next up, the database password.

270
00:14:10,853 --> 00:14:12,520
‫Let's clear it here.

271
00:14:18,667 --> 00:14:20,334
‫Next up, the secret.

272
00:14:24,720 --> 00:14:26,253
‫So, just like this.

273
00:14:30,587 --> 00:14:34,263
‫And so, this is a bit boring to do it for all of them,

274
00:14:35,740 --> 00:14:38,160
‫but, well, we only have to do it once,

275
00:14:38,160 --> 00:14:40,853
‫so it's not really a big deal.

276
00:14:43,981 --> 00:14:46,710
‫Now, we also need this one here

277
00:14:48,020 --> 00:14:51,070
‫because all of this here is just for mailtrap

278
00:14:51,070 --> 00:14:54,190
‫and we actually do not need that in production

279
00:14:54,190 --> 00:14:56,950
‫because remember that when we're in production,

280
00:14:56,950 --> 00:15:00,300
‫all our emails are actually sent using SENDGRID

281
00:15:00,300 --> 00:15:02,230
‫and no longer using mailtrap.

282
00:15:02,230 --> 00:15:04,270
‫And so, in our Heroku application,

283
00:15:04,270 --> 00:15:06,563
‫we do not need these for variables.

284
00:15:07,520 --> 00:15:09,773
‫But, we do need the email from.

285
00:15:13,520 --> 00:15:15,163
‫So, that's our next one.

286
00:15:17,820 --> 00:15:19,960
‫Then, we need to SENDGRID_USERNAME

287
00:15:26,670 --> 00:15:28,333
‫as well as the password.

288
00:15:37,330 --> 00:15:40,963
‫And finally, our secret stripe key.

289
00:15:46,320 --> 00:15:48,130
‫And, with this, I think we have all

290
00:15:48,130 --> 00:15:51,530
‫our relevant variables set here.

291
00:15:51,530 --> 00:15:55,653
‫And so, let's try again, heroku open.

292
00:15:59,850 --> 00:16:04,850
‫And, that looks perfect, beautiful.

293
00:16:04,960 --> 00:16:08,200
‫So, really, our application is now deployed

294
00:16:08,200 --> 00:16:12,610
‫onto radiant-springs or whatever you have in your case

295
00:16:12,610 --> 00:16:15,343
‫and everything seems to be working beautifully.

296
00:16:16,300 --> 00:16:18,083
‫So, all our images are here.

297
00:16:19,050 --> 00:16:22,393
‫Let's take a look at a single page here as well.

298
00:16:25,280 --> 00:16:29,500
‫And, indeed, all of that works just beautifully.

299
00:16:29,500 --> 00:16:31,333
‫So, our map also shows up.

300
00:16:34,190 --> 00:16:37,850
‫And, yeah, it seems to work just fine.

301
00:16:37,850 --> 00:16:41,970
‫And, the fact that all of this works just so seamlessly

302
00:16:41,970 --> 00:16:43,360
‫also shows the beauty

303
00:16:43,360 --> 00:16:46,550
‫of having a hosted database all the time

304
00:16:46,550 --> 00:16:48,690
‫also during development

305
00:16:48,690 --> 00:16:50,910
‫because no matter if we're in development

306
00:16:50,910 --> 00:16:54,890
‫or in production, our database just keeps working.

307
00:16:54,890 --> 00:16:57,360
‫So, if we had used a local database,

308
00:16:57,360 --> 00:17:00,030
‫then now, we would have to export all the data

309
00:17:00,030 --> 00:17:03,890
‫from that local database then create a hosted database

310
00:17:03,890 --> 00:17:07,600
‫and upload all the data onto that hosted database.

311
00:17:07,600 --> 00:17:10,460
‫And so, that would, of course, create an extra step

312
00:17:10,460 --> 00:17:12,160
‫and some extra work.

313
00:17:12,160 --> 00:17:15,340
‫And, again, with this, it just works.

314
00:17:15,340 --> 00:17:19,210
‫So, that's a very nice developer experience right there.

315
00:17:19,210 --> 00:17:22,743
‫So, let's see if we can also log in here,

316
00:17:23,830 --> 00:17:26,370
‫which should, of course, be possible

317
00:17:26,370 --> 00:17:28,900
‫with laura@example 2, 3, 4.

318
00:17:34,700 --> 00:17:36,313
‫And, it seems so.

319
00:17:39,697 --> 00:17:40,823
‫So, beautiful.

320
00:17:41,960 --> 00:17:45,353
‫Let's see if all our book tours are still here,

321
00:17:46,470 --> 00:17:48,440
‫but why wouldn't they?

322
00:17:48,440 --> 00:17:51,270
‫And, indeed, well, it's actually only one,

323
00:17:51,270 --> 00:17:53,373
‫but, indeed, it is here.

324
00:17:54,460 --> 00:17:58,100
‫So, great, that's absolutely fantastic.

325
00:17:58,100 --> 00:18:00,420
‫And now, let's just take a quick look

326
00:18:00,420 --> 00:18:02,763
‫into our Heroku dashboard.

327
00:18:07,270 --> 00:18:09,293
‫So, here, let's open up Heroku.

328
00:18:11,010 --> 00:18:12,343
‫Close these two.

329
00:18:14,120 --> 00:18:16,390
‫And so, since we logged in previously here,

330
00:18:16,390 --> 00:18:19,810
‫this should automatically take us to the dashboard

331
00:18:19,810 --> 00:18:23,060
‫and that dashboard will then show you, by default,

332
00:18:23,060 --> 00:18:26,210
‫all the applications that you have currently deployed.

333
00:18:26,210 --> 00:18:28,800
‫And so, the one that we just deployed is

334
00:18:28,800 --> 00:18:30,970
‫this radiant-springs here.

335
00:18:30,970 --> 00:18:33,260
‫So, let's open that one up.

336
00:18:33,260 --> 00:18:34,390
‫Then, here, on the right side,

337
00:18:34,390 --> 00:18:36,180
‫you can see all the activity.

338
00:18:36,180 --> 00:18:39,390
‫For example, setting all these configuration variables

339
00:18:39,390 --> 00:18:41,040
‫that we just did.

340
00:18:41,040 --> 00:18:45,810
‫You have your resources and many of this is only interesting

341
00:18:45,810 --> 00:18:47,920
‫if you have a paid dyno.

342
00:18:47,920 --> 00:18:50,390
‫And, a dyno is really just the term

343
00:18:50,390 --> 00:18:53,340
‫that Heroku uses basically for a container

344
00:18:53,340 --> 00:18:54,913
‫in which your application runs.

345
00:18:56,366 --> 00:18:58,390
‫So, we have some metrics where we can see

346
00:18:58,390 --> 00:19:01,410
‫who is accessing the app, but, once more,

347
00:19:01,410 --> 00:19:03,250
‫that only works if you have a hobby

348
00:19:03,250 --> 00:19:05,093
‫or a professional dyno.

349
00:19:06,950 --> 00:19:09,460
‫But, what really matters here is the settings

350
00:19:09,460 --> 00:19:10,920
‫and so here, I wanted to show you

351
00:19:10,920 --> 00:19:14,420
‫that we can reveal the configuration variables.

352
00:19:14,420 --> 00:19:17,000
‫And so, instead of changing or adding them

353
00:19:17,000 --> 00:19:20,253
‫in the command line, we could also do so right here.

354
00:19:21,650 --> 00:19:24,170
‫So, these are all of them that we just added

355
00:19:24,170 --> 00:19:25,223
‫in the command line.

356
00:19:27,250 --> 00:19:31,540
‫Then, another very important thing is up here in More,

357
00:19:31,540 --> 00:19:33,623
‫we can actually see our logs.

358
00:19:37,560 --> 00:19:40,710
‫So, let's wait for it here.

359
00:19:40,710 --> 00:19:44,430
‫And so, Heroku then gives you all of these loggings really

360
00:19:44,430 --> 00:19:47,190
‫for everything that happens in your application.

361
00:19:47,190 --> 00:19:49,640
‫So, when we opened up the app in the browser,

362
00:19:49,640 --> 00:19:52,300
‫it requested all of these files

363
00:19:52,300 --> 00:19:54,283
‫as you can see here, for example.

364
00:19:56,600 --> 00:19:58,380
‫So, really, everything that's going on

365
00:19:58,380 --> 00:20:00,870
‫will be right here in these logs.

366
00:20:00,870 --> 00:20:04,210
‫And so, if your app crashes or if something happens

367
00:20:04,210 --> 00:20:07,660
‫and basically everything for which we used a console.log

368
00:20:07,660 --> 00:20:10,843
‫will then end up showing here in these logs.

369
00:20:10,843 --> 00:20:13,400
‫And so, these were the Heroku logs

370
00:20:13,400 --> 00:20:15,933
‫that I mentioned in one of the previous lectures.

371
00:20:17,987 --> 00:20:19,770
‫Now, one thing that we can do is

372
00:20:19,770 --> 00:20:22,300
‫to actually change the name of our application.

373
00:20:22,300 --> 00:20:25,410
‫So, instead of it being called this random name,

374
00:20:25,410 --> 00:20:27,800
‫we can give it a more meaningful name.

375
00:20:27,800 --> 00:20:29,960
‫Now, we could do that here, but that would

376
00:20:29,960 --> 00:20:34,090
‫then kind of mess up our application in the terminal

377
00:20:34,090 --> 00:20:35,810
‫on our local computer.

378
00:20:35,810 --> 00:20:38,620
‫And so, instead, what we do is

379
00:20:38,620 --> 00:20:40,763
‫to change the name directly here.

380
00:20:41,970 --> 00:20:46,813
‫So, let's say, heroku apps:rename, like this,

381
00:20:48,460 --> 00:20:51,530
‫and then the new name for the application.

382
00:20:51,530 --> 00:20:53,470
‫And, I will call it natours,

383
00:20:53,470 --> 00:20:55,740
‫but you, of course, will then not be able

384
00:20:55,740 --> 00:20:59,420
‫to also call it natours because that subdomain

385
00:20:59,420 --> 00:21:01,620
‫will then already be taken.

386
00:21:01,620 --> 00:21:04,350
‫So, you can then call it natours with your name

387
00:21:04,350 --> 00:21:07,660
‫or with your username or really any other word

388
00:21:07,660 --> 00:21:08,633
‫that you'd like.

389
00:21:10,000 --> 00:21:12,763
‫So, I'll go ahead and now, really call it natours.

390
00:21:13,660 --> 00:21:18,320
‫Oh, but I see that someone already took that name from me,

391
00:21:18,320 --> 00:21:20,223
‫so that's unfortunate.

392
00:21:21,304 --> 00:21:24,360
‫But, probably that's because I already used the name natours

393
00:21:24,360 --> 00:21:26,570
‫in a project in another course.

394
00:21:26,570 --> 00:21:28,853
‫And so, someone must have taken it.

395
00:21:30,231 --> 00:21:33,080
‫So, let's call it natoursapp and, of course,

396
00:21:33,080 --> 00:21:35,440
‫I need to then write everything else.

397
00:21:35,440 --> 00:21:39,660
‫So, heroku apps:rename

398
00:21:39,660 --> 00:21:41,840
‫and then natoursapp.

399
00:21:41,840 --> 00:21:44,033
‫So, hopefully, no one took this one.

400
00:21:45,780 --> 00:21:47,980
‫And, it seems it's doing something,

401
00:21:47,980 --> 00:21:51,020
‫but someone has already taken that one as well.

402
00:21:51,020 --> 00:21:52,373
‫Well, that's really weird.

403
00:21:53,930 --> 00:21:56,120
‫So, I guess I have a lot of students out there

404
00:21:56,120 --> 00:21:59,110
‫who post their apps to Heroku,

405
00:21:59,110 --> 00:22:02,250
‫so I will just follow the example that I gave earlier

406
00:22:02,250 --> 00:22:03,920
‫and will add my name here.

407
00:22:03,920 --> 00:22:07,800
‫So, third try with natours-jonas.

408
00:22:07,800 --> 00:22:12,683
‫So, yeah, let's hope that the third time, it will work.

409
00:22:13,780 --> 00:22:15,493
‫So, let's wait for it here.

410
00:22:17,880 --> 00:22:18,960
‫And, that's it.

411
00:22:18,960 --> 00:22:21,163
‫So, let's try heroku open.

412
00:22:24,800 --> 00:22:27,150
‫All right, and here we go.

413
00:22:27,150 --> 00:22:29,030
‫And, now, at this point, the old version

414
00:22:29,030 --> 00:22:31,330
‫will actually no longer work.

415
00:22:31,330 --> 00:22:34,163
‫So, this one is gone, let's close it.

416
00:22:35,030 --> 00:22:36,780
‫Let's go back to the Personal here.

417
00:22:38,010 --> 00:22:40,840
‫And so, yeah, here we go.

418
00:22:40,840 --> 00:22:42,993
‫That is natours-jonas.

419
00:22:44,750 --> 00:22:49,640
‫Great, so our website is now officially in production.

420
00:22:49,640 --> 00:22:52,070
‫Now, another thing that I want to do here is

421
00:22:52,070 --> 00:22:55,340
‫to actually update the Postman environment variable

422
00:22:55,340 --> 00:22:57,580
‫for production, remember that?

423
00:22:57,580 --> 00:22:59,480
‫So, let's go ahead and copy this here.

424
00:23:00,440 --> 00:23:03,610
‫And, also not how actually automatically

425
00:23:03,610 --> 00:23:07,000
‫we are on https here on Heroku.

426
00:23:07,000 --> 00:23:10,620
‫So, Heroku does all the SSL certificate management

427
00:23:10,620 --> 00:23:14,810
‫for us behind the scenes so that our page is always secure,

428
00:23:14,810 --> 00:23:16,840
‫always with https.

429
00:23:16,840 --> 00:23:20,773
‫So, that's another really nice feature of Heroku.

430
00:23:22,540 --> 00:23:24,860
‫So, now, here in Postman,

431
00:23:24,860 --> 00:23:29,860
‫let's go ahead and change this production and the URL.

432
00:23:30,450 --> 00:23:32,733
‫Of course, this one was just a placeholder.

433
00:23:33,680 --> 00:23:38,120
‫And, instead, what we want is now our real production URL.

434
00:23:38,120 --> 00:23:40,593
‫And, I'm not sure if it is correct like this,

435
00:23:41,820 --> 00:23:44,900
‫but just update and compare it with the development one.

436
00:23:44,900 --> 00:23:46,340
‫But, indeed, it is.

437
00:23:46,340 --> 00:23:48,823
‫So, it needs to end with this slash.

438
00:23:50,380 --> 00:23:53,483
‫And so, the one that we just did does that as well.

439
00:23:54,320 --> 00:23:57,220
‫So, let's update, close, and now,

440
00:23:57,220 --> 00:24:00,560
‫all we need to do here is to change from development

441
00:24:00,560 --> 00:24:03,683
‫to this production natours environment.

442
00:24:04,560 --> 00:24:08,660
‫And so, now, if, for example, I try to get Get All Tours,

443
00:24:08,660 --> 00:24:11,260
‫which is actually the one that we had open,

444
00:24:11,260 --> 00:24:13,860
‫then let's see if that works.

445
00:24:13,860 --> 00:24:15,363
‫Let's turn all of this off.

446
00:24:17,200 --> 00:24:20,093
‫And, indeed, it does, great.

447
00:24:21,400 --> 00:24:23,220
‫Let's see if we can actually

448
00:24:23,220 --> 00:24:26,543
‫see the complete URL somewhere here.

449
00:24:28,270 --> 00:24:29,823
‫Well, it doesn't really show.

450
00:24:31,870 --> 00:24:34,110
‫But, anyway, it doesn't really matter

451
00:24:34,110 --> 00:24:37,810
‫because we still know that it did actually work.

452
00:24:37,810 --> 00:24:40,110
‫So, we now really got this data back here

453
00:24:40,110 --> 00:24:43,860
‫from our production API and we can easily prove that

454
00:24:43,860 --> 00:24:46,470
‫because the development version is currently

455
00:24:46,470 --> 00:24:48,010
‫not even running.

456
00:24:48,010 --> 00:24:50,943
‫So, if we send this, we get this error.

457
00:24:54,830 --> 00:24:58,420
‫So, once more, really, congratulations

458
00:24:58,420 --> 00:25:02,970
‫for almost now finishing the project at this point.

459
00:25:02,970 --> 00:25:04,920
‫It's already at the live server

460
00:25:04,920 --> 00:25:07,260
‫and you can, at this point, share your project

461
00:25:07,260 --> 00:25:10,650
‫with the world and show everyone what you've accomplished

462
00:25:10,650 --> 00:25:13,883
‫after all of this work building this project.

463
00:25:14,720 --> 00:25:18,420
‫Just one more really small thing that I wanted to do here,

464
00:25:18,420 --> 00:25:22,720
‫as I said in the last lecture, is to test that compression.

465
00:25:22,720 --> 00:25:27,320
‫So, let's just search for test gzip compression here.

466
00:25:30,740 --> 00:25:33,850
‫And then, that should be this first result here,

467
00:25:33,850 --> 00:25:35,163
‫Gift of Speed.

468
00:25:36,150 --> 00:25:40,710
‫And so, if we enter our URL here and then check, let's see.

469
00:25:42,450 --> 00:25:45,200
‫And, we see GZIP Is Enabled.

470
00:25:45,200 --> 00:25:47,903
‫And so, that is because of that compression package

471
00:25:47,903 --> 00:25:50,200
‫that we used in the last lecture.

472
00:25:50,200 --> 00:25:53,380
‫So, originally, our page would have 14K,

473
00:25:53,380 --> 00:25:55,560
‫but then compressed, it's 2K.

474
00:25:55,560 --> 00:25:58,610
‫And, of course, that doesn't make a big difference

475
00:25:58,610 --> 00:26:02,610
‫in this case, but for a much larger page, of course,

476
00:26:02,610 --> 00:26:05,903
‫it can really make a difference for your users.

477
00:26:06,840 --> 00:26:10,470
‫Perfect, now, in the next couple of videos,

478
00:26:10,470 --> 00:26:12,740
‫there's only a couple of small things

479
00:26:12,740 --> 00:26:15,023
‫that we still need to fix here.

480
00:26:16,020 --> 00:26:17,330
‫And so, we will do that

481
00:26:17,330 --> 00:26:20,200
‫over the next two or three lectures though.

482
00:26:20,200 --> 00:26:21,730
‫And so, after that is

483
00:26:21,730 --> 00:26:24,463
‫when the project is really 100% finished.