1
00:00:02,140 --> 00:00:09,110
So we deployed our static page with HTML, Javascript and CSS, what about our Node.js application

2
00:00:09,110 --> 00:00:09,500
now?

3
00:00:09,520 --> 00:00:13,990
Here we have code that needs to execute on the server, not in the client,

4
00:00:13,990 --> 00:00:16,760
therefore this is not a static application,

5
00:00:16,790 --> 00:00:22,870
it's a dynamic application because we have code that needs to execute directly on the server and by

6
00:00:22,870 --> 00:00:28,120
the way, it does not matter if you have an application which produces HTML files and returns those

7
00:00:28,510 --> 00:00:31,750
as we set it up at the beginning of the Node.js module

8
00:00:31,750 --> 00:00:37,420
or if you have an application which just has a couple of routes and exchanges JSON data, that does not

9
00:00:37,420 --> 00:00:38,150
matter, 

10
00:00:38,200 --> 00:00:41,100
you need to execute Node.js code on the server,

11
00:00:41,100 --> 00:00:43,030
That is what matters.

12
00:00:43,030 --> 00:00:47,530
So now we need a host that supports this and Firebase is not such a host.

13
00:00:47,530 --> 00:00:53,830
Well they do have some cloud function service which actually allows you to execute code on the server

14
00:00:54,340 --> 00:00:55,900
but it's a little bit different,

15
00:00:55,900 --> 00:01:01,540
it's not really meant for this kind of deployment, even though technically there are ways of making it

16
00:01:01,540 --> 00:01:02,210
work.

17
00:01:02,260 --> 00:01:04,700
However it's not what we will use here,

18
00:01:04,810 --> 00:01:10,500
instead if you for example Google for Node.js hosting, then you will find a couple of advertisements

19
00:01:10,510 --> 00:01:15,390
and of course also real results that guide you towards Node.js hosting services

20
00:01:15,430 --> 00:01:20,470
and of course you can perform a similar research for other languages like PHP as well.

21
00:01:20,470 --> 00:01:26,030
Now one popular service for hosting Node.js applications is actually Heroku.

22
00:01:26,320 --> 00:01:28,420
It's of course again not the only one,

23
00:01:28,470 --> 00:01:34,930
AWS also has services for example but Heroku allows you to get started for free without a credit

24
00:01:34,930 --> 00:01:35,220
card

25
00:01:35,230 --> 00:01:38,540
just like Firebase and that of course is very convenient.

26
00:01:38,540 --> 00:01:39,880
Now just as Firebase,

27
00:01:39,910 --> 00:01:45,470
it also does have paid services and you should check the pricing pages there to learn more about that

28
00:01:45,580 --> 00:01:51,250
but what I'm about to show you and these basic hosting demos, they all can be implemented for free there.

29
00:01:51,970 --> 00:01:58,210
So we can simply visit the Heroku page there and it all starts with signing up, which you should do to

30
00:01:58,210 --> 00:02:03,920
create a new Heroku account which you will need to then get started hosting your application there.

31
00:02:03,940 --> 00:02:06,100
As I mentioned, you can get started for free,

32
00:02:06,130 --> 00:02:12,250
you should check the pricing page to learn what cost you money though and up to which point it is free

33
00:02:12,250 --> 00:02:14,320
and which limitations you have in a free account.

34
00:02:15,660 --> 00:02:20,520
So here I did login now and if you signed up, you should see the same screen in the end and we can click

35
00:02:20,520 --> 00:02:26,040
on create new app here and again, every hosting service of course differs regarding the exact steps you

36
00:02:26,040 --> 00:02:31,110
need to perform but the documentation of the hosting service you chose will be the place to go to learn

37
00:02:31,110 --> 00:02:34,520
how to get your application to run on that service then.

38
00:02:34,860 --> 00:02:41,490
Here I'll again name this jsnodejs-deployment, any name you want, choose a region where it will be

39
00:02:41,490 --> 00:02:41,970
deployed,

40
00:02:41,970 --> 00:02:44,750
I'll go for United States, create app,

41
00:02:44,760 --> 00:02:46,670
you don't need to do anything with that pipeline.

42
00:02:47,750 --> 00:02:52,250
Now you've got a couple of options here regarding how you want to deploy, you should go for Heroku

43
00:02:52,340 --> 00:02:56,250
Git here for which you need to have Git installed.

44
00:02:56,250 --> 00:03:03,470
If you google for Git, you'll find that gitscm.com page, Git is a version control tool which allows

45
00:03:03,470 --> 00:03:09,170
you to create multiple snapshots of your code whilst you are developing, it also can help you push

46
00:03:09,170 --> 00:03:15,950
your code to remote repositories where you can store it or in the case of Heroku to Heroku's servers

47
00:03:16,340 --> 00:03:21,150
and you can simply download Git from this Git page. Simply choose download here,

48
00:03:21,170 --> 00:03:26,480
it should automatically select your operating system, otherwise you can select it from down there and

49
00:03:26,480 --> 00:03:31,910
walk through the installer that gives you, this will install Git on your system. Attached you also find a link

50
00:03:32,180 --> 00:03:36,770
where you can learn more about Git and get started with it, though here we won't need to do too much

51
00:03:36,770 --> 00:03:37,450
with it.

52
00:03:37,580 --> 00:03:43,280
Instead let's go back to Heroku's page here and make sure you also download the Heroku CLI or

53
00:03:43,280 --> 00:03:45,500
you install the Heroku CLI.

54
00:03:46,000 --> 00:03:51,230
Now for that, if you scroll down to download and install, there are various ways of installing it and you can

55
00:03:51,230 --> 00:03:57,110
follow the instructions given here using the Windows installer or using this command here on Mac for example

56
00:03:57,170 --> 00:04:01,460
or using the Mac installer if you can't use that command here and so on.

57
00:04:01,460 --> 00:04:06,680
You can also use other installation methods here as you see, so in the end you should be able to get this

58
00:04:06,680 --> 00:04:13,880
Heroku CLI onto your system. Now once you got the Heroku CLI installed, you can run Heroku login,

59
00:04:13,910 --> 00:04:19,850
so here I'll copy that in my project folder and now you need to enter or confirm if you already were

60
00:04:19,850 --> 00:04:24,970
logged in, your email and then enter your password.

61
00:04:25,130 --> 00:04:28,730
Now once you are logged in, you can continue with these steps here,

62
00:04:28,760 --> 00:04:34,930
if you installed Git which you need to have installed, you now have a git command available which you

63
00:04:34,930 --> 00:04:35,620
can run,

64
00:04:35,620 --> 00:04:40,870
so make sure you navigate into your project folder, which you already are here with built-in terminal,

65
00:04:41,230 --> 00:04:41,590
and run

66
00:04:41,590 --> 00:04:47,140
git init unless you already are managing this folder with GIt, which I am doing here and you might or

67
00:04:47,140 --> 00:04:48,630
might not be doing that already.

68
00:04:48,640 --> 00:04:51,140
So otherwise if you've never used git before,

69
00:04:51,160 --> 00:04:59,650
simply run git init in your project folder now. Thereafter, you can copy this command here and simply

70
00:04:59,650 --> 00:05:03,220
paste it in here in your project terminal and hit enter.

71
00:05:03,220 --> 00:05:08,500
This will now basically configure your project here to be deployed as a Node.js application to this

72
00:05:08,520 --> 00:05:11,240
Heroku application you just created.

73
00:05:11,380 --> 00:05:18,250
So once you did that, these are three commands which you now need to execute to get your code onto your

74
00:05:18,250 --> 00:05:20,140
Heroku app in the web here,

75
00:05:20,140 --> 00:05:22,690
so to basically deploy your files.

76
00:05:22,870 --> 00:05:28,390
Now I already added files and created a so-called commit which is basically a snapshot in code, so I will

77
00:05:28,390 --> 00:05:33,250
just move on right away to this git push heroku master comment and execute this

78
00:05:33,250 --> 00:05:38,020
and what this does is it now takes my latest snapshot which you created with the add command and the

79
00:05:38,020 --> 00:05:43,840
commit command and try to push that to Heroku's servers. Now here,

80
00:05:43,850 --> 00:05:50,390
it actually failed with an error message that no default language could be detected for this app,

81
00:05:50,510 --> 00:05:54,320
so with that, a programming language is meant. To fix this,

82
00:05:54,320 --> 00:06:01,580
go to your package.json file and add a new script there, you name it start and then simply write

83
00:06:01,610 --> 00:06:09,070
node app.js here, this in the end will tell the server how it then starts your server. So with this script

84
00:06:09,130 --> 00:06:09,430
added,

85
00:06:09,430 --> 00:06:18,150
now let's create a new snapshot with git add . and git commit -m "added entry

86
00:06:18,340 --> 00:06:18,910
script"

87
00:06:22,210 --> 00:06:27,660
and thereafter repeat repeat that git push heroku master command which failed before.

88
00:06:27,820 --> 00:06:30,580
If it still fails like it does for me here,

89
00:06:30,580 --> 00:06:35,130
create a new file in your project, a proc file, simply name it like this,

90
00:06:35,170 --> 00:06:37,860
no file extension and add this line into it,

91
00:06:37,900 --> 00:06:41,670
web: node app.js,

92
00:06:41,680 --> 00:06:42,960
so this is then your start

93
00:06:42,950 --> 00:06:47,400
command here and a proc file is a file Heroku specifically looks for.

94
00:06:47,440 --> 00:06:56,260
So then let's again run git add, git commit  -m "added proc file" and thereafter repeat that push command

95
00:06:56,320 --> 00:07:00,600
and at this point it should certainly succeed. If it succeeded earlier,

96
00:07:00,600 --> 00:07:02,390
that's of course also fine.

97
00:07:02,670 --> 00:07:06,340
Now with that, you can go back to Heroku and there, click on open app

98
00:07:06,510 --> 00:07:10,650
and this now is our server for this application.

99
00:07:10,710 --> 00:07:15,750
Now of course, the application we deployed here is a node application which doesn't return any HTML

100
00:07:15,750 --> 00:07:16,630
code anymore,

101
00:07:16,650 --> 00:07:22,470
instead this connects it to a database and gets data from there and allows us to add data there.

102
00:07:22,470 --> 00:07:30,290
So for example we can send a request this URL here and replace our location ID here with some ID

103
00:07:30,290 --> 00:07:36,870
we might have or with some random text and if we now open the console or go to the network tab to

104
00:07:36,870 --> 00:07:40,930
be precise and reload this, we of course see that this request fails.

105
00:07:40,990 --> 00:07:46,290
Now obviously it fails because this server will actually not successfully connect to our cloud database

106
00:07:46,290 --> 00:07:52,460
here, to a MongoDB database because there we haven't whitelisted the Heroku server yet.

107
00:07:53,440 --> 00:08:00,310
So here you would have to go to network access and actually make sure that all IP addresses, so asked from

108
00:08:00,370 --> 00:08:01,540
anywhere, is allowed,

109
00:08:01,540 --> 00:08:06,880
people still need your username and your password but now we're not restricting this to our local IP

110
00:08:06,880 --> 00:08:07,960
address anymore

111
00:08:07,960 --> 00:08:13,240
and since Heroku in the free setting at least always assigns a new IP address, we want to allow all IP

112
00:08:13,240 --> 00:08:19,120
addresses to be flexible there because we won't have a fixed IP address. So we'll have to do that to

113
00:08:19,120 --> 00:08:27,410
make sure that Heroku is actually able to connect our Node.js application or with our application to

114
00:08:27,410 --> 00:08:28,670
this database.

115
00:08:28,670 --> 00:08:36,170
So let's wait for this to update here and with that completed, go back to your Heroku management page

116
00:08:36,170 --> 00:08:41,870
here and under more, restart all diners which basically means restart your server, which we want to do

117
00:08:41,870 --> 00:08:47,990
here to make sure that it cleanly restarts again because it will have crashed before. You can go back

118
00:08:47,990 --> 00:08:55,780
to your web console and click on open app, now this will open your deployed application here in the browser.

119
00:08:55,790 --> 00:09:00,230
Now of course for this default route, it will not find anything because in the application we deployed,

120
00:09:00,560 --> 00:09:04,130
we only have two supported routes set up in location.js file

121
00:09:04,280 --> 00:09:09,170
and by the way it does of course not matter whether you have a page that returns HTML or you have

122
00:09:09,170 --> 00:09:11,480
a page that exchanges JSON like ours,

123
00:09:11,570 --> 00:09:16,340
you need to visit a route that exists, unless you have a general fallback route which we here haven't,

124
00:09:16,520 --> 00:09:19,350
we have no 404 fallback route.

125
00:09:19,430 --> 00:09:25,070
So now we can for example enter this URL though, of course enter something here instead of that

126
00:09:25,610 --> 00:09:33,730
dummy placeholder for the ID and hit enter. Now chances are that this will take very long and/or

127
00:09:33,730 --> 00:09:35,720
crash at some point.

128
00:09:35,860 --> 00:09:42,880
The reason for that simply is that this is an invalid string to be used as an ID and therefore here

129
00:09:42,940 --> 00:09:47,860
when we try to convert this to an object ID, this will actually fail, cause an error and since we

130
00:09:47,860 --> 00:09:54,090
have no proper error handling here which you of course would learn about in my Node.js course, this crashes.

131
00:09:54,160 --> 00:09:59,200
Now again, I do cover error handling in great detail in my Node.js course of course, since that's not

132
00:09:59,200 --> 00:10:00,390
the focus of this course,

133
00:10:00,460 --> 00:10:05,690
I decided not to dive deeply into it. Here the problem is that we have an unhandled error and therefore

134
00:10:05,710 --> 00:10:08,270
our server crashes after some time.

135
00:10:08,320 --> 00:10:12,420
Theoretically though, it would work and just to prove this,

136
00:10:12,460 --> 00:10:18,340
I searched for the ID which we use in the past which we created in an earlier module, I'll restart

137
00:10:18,460 --> 00:10:24,160
my server here because it crashed and of course therefore you should have error handling in a real application

138
00:10:24,400 --> 00:10:30,040
but here I'll restart it and I'll try to fetch data for my valid location ID here.

139
00:10:30,040 --> 00:10:34,890
So this alone won't do the trick though, it will still fail and the reason for that is quite trivial,

140
00:10:34,900 --> 00:10:39,770
one preparation was missing, in app.js I'm listening to port 3000.

141
00:10:39,850 --> 00:10:44,830
Now actually when we plan on deploying this to a real server, we don't want to use this dummy port which

142
00:10:44,830 --> 00:10:45,950
we only use locally,

143
00:10:45,970 --> 00:10:53,530
instead we want to use the port the server we push this to assigns to us and we can tell Node.js

144
00:10:53,530 --> 00:10:54,880
to do that,

145
00:10:54,880 --> 00:11:00,430
we need define the 3000 as an alternative here by adding two pipe symbols in front of it and

146
00:11:00,430 --> 00:11:04,840
instead refer to process.env.port here as a main value.

147
00:11:04,850 --> 00:11:09,970
Now what does this do? This looks strange at first but this uses a system built into Node.js called

148
00:11:10,030 --> 00:11:11,440
environment variables.

149
00:11:11,440 --> 00:11:16,750
This in the end is a placeholder where the concrete value will be injected dynamically by the environment

150
00:11:16,750 --> 00:11:18,690
that runs our script.

151
00:11:18,700 --> 00:11:24,880
Now if it's not provided, for example during development when we start the script, we'll fall back to 3000.

152
00:11:25,000 --> 00:11:29,680
If it is provided however and Heroku will provide a value for this port variable,

153
00:11:29,680 --> 00:11:32,320
this provided data will be used instead,

154
00:11:32,350 --> 00:11:38,120
so Heroku can provide its own port where we want to listen instead of that 3000 port which is just

155
00:11:38,120 --> 00:11:39,690
there for development.

156
00:11:39,940 --> 00:11:42,770
So now with that, we just have to add this change here,

157
00:11:45,230 --> 00:11:53,310
added port-env and then again push this to Heroku and there wait for the installation and the build

158
00:11:53,310 --> 00:11:59,360
process and the startup to finish and thereafter we should be able to visit and run our application.

159
00:12:00,810 --> 00:12:08,300
So let's wait for that to finish up and thereafter once you revisit this page, you should get your location

160
00:12:08,300 --> 00:12:09,280
data.

161
00:12:09,380 --> 00:12:15,140
So this is how you could deploy a Node.js application to Heroku, of course Heroku is just one of many

162
00:12:15,140 --> 00:12:20,840
hosts, a couple of steps are always the same though like providing this environment variable, catching

163
00:12:20,840 --> 00:12:24,580
errors is a good idea which you might consider implementing,

164
00:12:24,650 --> 00:12:29,690
you'll also want to make sure that you whitelist the IP address of the server where your application

165
00:12:29,690 --> 00:12:35,390
runs or if you don't know the IP or if it changes frequently, you whitelist all IPs as we did it here

166
00:12:35,890 --> 00:12:43,070
and with that, you're able to also deploy applications that use Javascript on the server, namely Node.js