WEBVTT

1
00:00:00.160 --> 00:00:00.940
Hello everyone.

2
00:00:00.970 --> 00:00:04.530
In this video we're
going to talk about NVM.

3
00:00:04.560 --> 00:00:10.340
NVM is Node Version Manager and we're
going to use it for our Firebase project.

4
00:00:10.370 --> 00:00:15.500
And we're going to talk about why
it's important for us to install NVM.

5
00:00:15.530 --> 00:00:17.420
Before we dive into NVM,

6
00:00:17.450 --> 00:00:22.140
let's discuss what it means to run a node
application on Firebase Functions.

7
00:00:22.170 --> 00:00:24.500
Firebase Functions is a serverless backend

8
00:00:24.530 --> 00:00:27.980
platform that allows you to write
and deploy serverside code without

9
00:00:28.010 --> 00:00:30.900
worrying about server
management or infrastructure.

10
00:00:30.920 --> 00:00:32.540
And when you create a new

11
00:00:32.570 --> 00:00:36.340
Firebase Functions project,
the platform automatically sets up

12
00:00:36.370 --> 00:00:42.580
a Node JS runtime environment for you
which includes a specific version of node.

13
00:00:42.610 --> 00:00:44.340
And as you see here,

14
00:00:44.370 --> 00:00:49.420
the Node version that is currently
used for Firebase functions is 16.

15
00:00:49.450 --> 00:00:54.340
Therefore, it's important that our local
development environment matches the same

16
00:00:54.370 --> 00:00:57.380
version of Node that
Firebase function uses.

17
00:00:57.410 --> 00:01:01.300
And this is where NVM comes in.

18
00:01:01.330 --> 00:01:04.460
NVM, or Node Version Manager is a command

19
00:01:04.490 --> 00:01:08.240
line tool that allows you to install
and manage multiple versions of node

20
00:01:08.270 --> 00:01:10.210
js on your local machine.

21
00:01:10.240 --> 00:01:14.210
This is important because different
projects may require different versions

22
00:01:14.240 --> 00:01:17.980
of Node, and by using NVM,
you can easily switch between different

23
00:01:18.010 --> 00:01:22.100
versions of Node without having
to install and uninstall them.

24
00:01:22.130 --> 00:01:24.060
So for example, if I want to check out

25
00:01:24.090 --> 00:01:28.260
my current version of Node,
I can type in node v and you can see

26
00:01:28.290 --> 00:01:31.740
that I'm on 19 font 5.0,
which is different from 16.

27
00:01:31.770 --> 00:01:33.700
And this is where we could use

28
00:01:33.730 --> 00:01:40.980
Node Version Manager to make sure that we
also could install the 16th version.

29
00:01:41.010 --> 00:01:44.740
So let's get started with
installing NVM for that

30
00:01:44.770 --> 00:01:47.210
what you might need to do is just go

31
00:01:47.240 --> 00:01:53.850
to a new browser, type in NVM and you
can just go to the first link here.

32
00:01:53.880 --> 00:01:56.540
That is the node version Manager.

33
00:01:56.570 --> 00:02:01.540
And here you're going to see
the installation command.

34
00:02:01.570 --> 00:02:04.380
So just copy this and paste it here.

35
00:02:04.410 --> 00:02:07.420
I already have it installed so you might

36
00:02:07.450 --> 00:02:11.300
see a different output,
but just wait for it to complete.

37
00:02:11.330 --> 00:02:14.380
And then what you could do to install

38
00:02:14.410 --> 00:02:20.890
the 16th version is follow
the directions given here.

39
00:02:20.920 --> 00:02:27.760
So let's say NVM install 16.

40
00:02:29.680 --> 00:02:31.890
I already have it installed so you might

41
00:02:31.920 --> 00:02:37.820
see a different output but wait
for this command to complete.

42
00:02:37.850 --> 00:02:44.900
And now if you want to switch to use 16
by default, the command that you would

43
00:02:44.930 --> 00:02:52.180
need to use for that would
be NVM alias default 16.

44
00:02:52.210 --> 00:02:54.520
And now my default version is going to be

45
00:02:54.550 --> 00:03:01.820
16.20, and if I close this terminal reopen
a new one and I type in Node v,

46
00:03:01.850 --> 00:03:09.540
I'm going to see that my current version
is 16.20, which is great for our Firebase

47
00:03:09.570 --> 00:03:15.980
project because they're going to be
using version 16 of node as well.

48
00:03:16.000 --> 00:03:16.500
Great.

49
00:03:16.530 --> 00:03:23.020
So now that we have that set up complete,
what we can do is actually start

50
00:03:23.050 --> 00:03:28.700
transferring our server JS
to use Firebase Functions.

51
00:03:28.730 --> 00:03:31.700
So inside index JS file,

52
00:03:31.730 --> 00:03:37.940
which is going to define what our server
will allow us to use as functions.

53
00:03:37.970 --> 00:03:40.860
You see that we're requiring Firebase

54
00:03:40.890 --> 00:03:45.660
functions and we have an example
here of how to create a new one.

55
00:03:45.680 --> 00:03:47.500
But we're not going
to go with this example.

56
00:03:47.530 --> 00:03:50.980
We're actually going to create our own.

57
00:03:51.010 --> 00:03:57.180
And I don't want to be using
require because this is an old way

58
00:03:57.210 --> 00:04:03.100
of defining what is imported for us
and I just want to use imports.

59
00:04:03.130 --> 00:04:06.940
And currently Firebase functions
doesn't really allow it.

60
00:04:06.960 --> 00:04:08.860
So we're going to have to change up our

61
00:04:08.890 --> 00:04:14.860
package JSON file to allow
for latest ES6 syntax.

62
00:04:14.890 --> 00:04:19.180
And to do that, first of all we're
going to go to package JSON.

63
00:04:19.210 --> 00:04:24.940
We're going to say that we want a modular
setup as we did on the last one.

64
00:04:24.970 --> 00:04:29.900
And we're also going to include
some other dependencies.

65
00:04:29.920 --> 00:04:33.860
So we are using body parser and Express.

66
00:04:33.890 --> 00:04:35.980
Therefore we're going to have to add them

67
00:04:36.010 --> 00:04:41.060
here
and you can just copy it from our setup

68
00:04:41.090 --> 00:04:45.100
here and place it in the
dependencies section.

69
00:04:45.130 --> 00:04:48.020
And we have some dev dependencies such as

70
00:04:48.040 --> 00:04:51.820
Babel which is taking care
of some of the things for use.

71
00:04:51.840 --> 00:04:55.460
So let's put them here as well and save

72
00:04:55.480 --> 00:05:02.420
this and we can get rid of package JSON
and package-lock jSON from here we don't

73
00:05:02.450 --> 00:05:08.700
need them anymore,
so we can just delete them.

74
00:05:08.720 --> 00:05:11.260
Great, because all of our setup is going

75
00:05:11.280 --> 00:05:16.300
to be in this functions
folder from now on.

76
00:05:16.330 --> 00:05:19.860
And then what we need to do is make sure

77
00:05:19.890 --> 00:05:25.140
that our index js file now
imports these functions instead.

78
00:05:25.160 --> 00:05:28.340
So we can just say import everything

79
00:05:28.360 --> 00:05:35.500
as functions
from Firebase functions and then we can

80
00:05:35.530 --> 00:05:39.820
comment this line out because we're
not going to be using it anymore.

81
00:05:39.850 --> 00:05:42.780
We can just go to the root of our project

82
00:05:42.800 --> 00:05:48.460
and then change our directory to functions
and we can just type in NPM install.

83
00:05:48.480 --> 00:05:53.300
So let's wait for this to complete
and our package lock JSON file will be

84
00:05:53.330 --> 00:05:59.020
updated and these will be installed
for us inside our node module.

85
00:05:59.040 --> 00:06:01.900
So everything should be all set.
Great.

86
00:06:01.920 --> 00:06:07.260
So now that we can use import as functions
from Firebase functions,

87
00:06:07.290 --> 00:06:13.140
we can just transfer whole our
code inside index JS file.

88
00:06:13.170 --> 00:06:16.620
Before we do that,
we're going to have to transfer our

89
00:06:16.650 --> 00:06:21.220
babelrc file actually
inside our functions.

90
00:06:21.250 --> 00:06:22.940
So let's do that.

91
00:06:22.970 --> 00:06:26.820
And here we're going to have to say that

92
00:06:26.850 --> 00:06:33.940
our targets changed because we're going
to have to make sure that our Babel preset

93
00:06:33.970 --> 00:06:39.780
environment is dependent
on the node 16 when installing.

94
00:06:39.800 --> 00:06:45.320
So let's make sure that we have
another array defined here.

95
00:06:45.520 --> 00:06:47.380
And then inside here we're going to have

96
00:06:47.410 --> 00:06:57.060
to create a new object that makes sure
that our target is using node version 16.

97
00:06:57.090 --> 00:07:01.480
So let's just put this object here.

98
00:07:01.960 --> 00:07:05.540
Let's make sure that this
is closed as well.

99
00:07:05.570 --> 00:07:10.300
Great.
So now that we have updated our babelrc

100
00:07:10.330 --> 00:07:18.660
file using node 16 for installation and we
have updated our package JSON file as

101
00:07:18.690 --> 00:07:23.920
well, all we need to do is make sure
that we reinstall everything again just

102
00:07:23.950 --> 00:07:27.820
to make sure that everything's
set up for us correctly.

103
00:07:27.850 --> 00:07:31.580
And then we can just copy all of this code

104
00:07:31.600 --> 00:07:38.540
except for listening to some port,
and then we can just put it inside here.

105
00:07:38.570 --> 00:07:44.740
And then we can use this example that they
provided to set up a new function.

106
00:07:44.770 --> 00:07:51.700
So let's do this and let's call our
function app.

107
00:07:51.730 --> 00:07:58.500
And then what we want to do is actually
use functions Http on request.

108
00:07:58.530 --> 00:08:01.620
And instead of handling just

109
00:08:01.650 --> 00:08:08.100
one API call using app,
we're just going to put our app that we

110
00:08:08.130 --> 00:08:14.620
defined inside here as a handler of what
should happen on an API request.

111
00:08:14.650 --> 00:08:17.820
Great, so let's save this right now.

112
00:08:17.850 --> 00:08:21.700
And then what we're going
to have to do is the following.

113
00:08:21.730 --> 00:08:27.240
We can delete the server JS file because
we don't need it anymore,

114
00:08:28.720 --> 00:08:32.700
and everything's all
set inside our project.

115
00:08:32.730 --> 00:08:38.380
So now we're going to have to actually
deploy our changes to Firebase functions.

116
00:08:38.410 --> 00:08:43.740
Great, so now that we're ready for all
of this, all we have to do is

117
00:08:43.770 --> 00:08:49.020
run NPM run deploy,
and it will connect to this code given

118
00:08:49.050 --> 00:08:57.140
here that will automatically deploy our
index js file to the Firebase functions.

119
00:08:57.170 --> 00:09:01.700
So let's run npm run deploy
and we're going to see this output.

120
00:09:01.730 --> 00:09:05.980
And we're getting an error here which says

121
00:09:06.010 --> 00:09:10.900
that our project should be on blaze pay
as you go plan to complete this command.

122
00:09:10.930 --> 00:09:12.100
So let's do this.

123
00:09:12.130 --> 00:09:18.940
I'm going to click on this link
and it should redirect me to our project.

124
00:09:18.970 --> 00:09:20.380
So here it is.

125
00:09:20.410 --> 00:09:24.700
So I'm just going to click on Modify
my plan and I'm going to click

126
00:09:24.730 --> 00:09:30.340
on Selecting this plan,
and I'm just going to continue

127
00:09:30.370 --> 00:09:34.900
and I'm going to skip this step
and I'm going to say purchase.

128
00:09:34.920 --> 00:09:38.100
Great.
So now that I'm on the Blaze plan,

129
00:09:38.130 --> 00:09:42.820
I should be able to continue
with my deployment.

130
00:09:42.850 --> 00:09:47.160
So I'm just going to type
in npm run deploy again.

131
00:09:50.880 --> 00:09:53.380
Okay, so because we're using ES6

132
00:09:53.410 --> 00:09:58.820
module, actually we can't use exports
here as given in our example.

133
00:09:58.850 --> 00:10:02.088
So let's modify our code

134
00:10:02.288 --> 00:10:05.460
and say export const app.

135
00:10:05.490 --> 00:10:07.540
But we already have defined app,

136
00:10:07.560 --> 00:10:16.620
so I'm just going to call it Hello World
and then I'm going to say functions https.

137
00:10:16.650 --> 00:10:19.999
Actually, I'm just going to copy this

138
00:10:20.200 --> 00:10:23.440
and I'm going to get rid of this line.

139
00:10:24.920 --> 00:10:29.280
And now I'm going to run
the deployment again.

140
00:10:29.480 --> 00:10:32.980
Great, so everything want
successfully and it's being uploaded.

141
00:10:33.010 --> 00:10:35.140
So let's wait for this to complete.

142
00:10:35.170 --> 00:10:37.600
Great, so our deploy is complete and if we

143
00:10:37.630 --> 00:10:43.060
want to check out our function URL,
we can just click on this link here.

144
00:10:43.080 --> 00:10:50.620
So I'm going to click here and we're going
to see our hello world response because we

145
00:10:50.650 --> 00:10:55.580
have this get function here that responds
with hello world on that link.

146
00:10:55.610 --> 00:10:58.380
So if we were to, for example,

147
00:10:58.410 --> 00:11:03.660
use the user get function,
we're going to see the function that we

148
00:11:03.690 --> 00:11:08.900
set up for our API endpoint responding
with your getting a user data back.

149
00:11:08.930 --> 00:11:12.580
So we can just copy

150
00:11:12.610 --> 00:11:22.100
this URL, open our postman and paste
it here and then send a request.

151
00:11:22.130 --> 00:11:26.020
And we're going to see you're getting
a user data back here as well.

152
00:11:26.050 --> 00:11:28.900
So if we want to make a post request

153
00:11:28.930 --> 00:11:32.980
that we get up,
for example, let's go to our post here,

154
00:11:33.010 --> 00:11:39.980
we see that we have an endpoint for the
user and let's send in some parameters.

155
00:11:40.010 --> 00:11:43.900
So select body here, then Raw

156
00:11:43.930 --> 00:11:53.260
and let's set this to JSON
and let's say that username is Nata,

157
00:11:53.290 --> 00:12:02.100
first name is Nata and last name
is Vacheishvili.

158
00:12:02.130 --> 00:12:04.340
You can send whatever other requests you

159
00:12:04.370 --> 00:12:10.780
want, but we are using in our post request
the first name parameter that we send in.

160
00:12:10.810 --> 00:12:15.900
So let's send this post request
and you're going to see a message.

161
00:12:15.930 --> 00:12:20.660
We created a user with first name of Nata.

162
00:12:20.690 --> 00:12:25.820
Well, we don't have a database set up,
so we actually didn't create anything

163
00:12:25.850 --> 00:12:31.100
in our database, but this is
the response that we set up here.

164
00:12:31.130 --> 00:12:34.860
Therefore, we can verify that our firebase

165
00:12:34.890 --> 00:12:40.020
functions are working as they
were working on our local host.

166
00:12:40.050 --> 00:12:41.540
That's it for this video.

167
00:12:41.570 --> 00:12:44.260
I hope you found this useful.

168
00:12:44.290 --> 00:12:46.020
Thanks so much for watching.

169
00:12:46.050 --> 00:12:49.580
And in the next section,
we're actually going to use firebase

170
00:12:49.610 --> 00:12:57.220
functions to set up stripe payment
system for our donation application.

171
00:12:57.240 --> 00:12:58.200
See you in the next video.