1
00:00:02,050 --> 00:00:04,030
Now to get started using Express,

2
00:00:04,030 --> 00:00:07,630
I simply want to migrate this existing NodeJS code here

3
00:00:07,630 --> 00:00:09,320
to Express.js code,

4
00:00:09,320 --> 00:00:11,460
since that will help us understand

5
00:00:11,460 --> 00:00:13,120
how Express.js works

6
00:00:13,120 --> 00:00:16,480
and how it can make our life a bit easier.

7
00:00:16,480 --> 00:00:19,840
And for that, instead of requiring HTTP,

8
00:00:19,840 --> 00:00:22,470
this core NodeJS module,

9
00:00:22,470 --> 00:00:25,240
which we use for building our server,

10
00:00:25,240 --> 00:00:26,890
we will now get rid of that

11
00:00:26,890 --> 00:00:30,220
and instead require Express,

12
00:00:30,220 --> 00:00:32,860
this Express package that we installed.

13
00:00:32,860 --> 00:00:36,530
You can require any package that you installed

14
00:00:36,530 --> 00:00:39,990
or the core packages like HTTP,

15
00:00:39,990 --> 00:00:42,233
which were built right into Node.

16
00:00:43,940 --> 00:00:45,960
Here we will now require Express,

17
00:00:45,960 --> 00:00:48,330
since we did install that package.

18
00:00:48,330 --> 00:00:49,850
You can require any package

19
00:00:49,850 --> 00:00:51,750
that is part of your dependencies

20
00:00:51,750 --> 00:00:54,393
or a dependency of another dependency.

21
00:00:56,100 --> 00:00:57,200
Now just as before,

22
00:00:57,200 --> 00:01:02,200
this will give us an Express object or something like that.

23
00:01:02,220 --> 00:01:04,083
And we can store this in a constant.

24
00:01:05,220 --> 00:01:07,130
But actually I said something like that

25
00:01:07,130 --> 00:01:10,200
because it turns out that this Express thing,

26
00:01:10,200 --> 00:01:12,090
which we require here,

27
00:01:12,090 --> 00:01:16,110
so the main thing made available by the Express package

28
00:01:16,110 --> 00:01:17,560
is not an object,

29
00:01:17,560 --> 00:01:21,300
as it was the case for the built-in HTTP package,

30
00:01:21,300 --> 00:01:23,030
but instead it's a function.

31
00:01:23,030 --> 00:01:25,960
Packages can simply decide what they want to expose:

32
00:01:25,960 --> 00:01:30,810
an object, a simple value like a number, or a function.

33
00:01:30,810 --> 00:01:32,170
And here it's a function,

34
00:01:32,170 --> 00:01:35,113
hence we can execute Express like that.

35
00:01:36,550 --> 00:01:39,180
The result of that will be an object though,

36
00:01:39,180 --> 00:01:41,470
a so-called app object.

37
00:01:41,470 --> 00:01:42,600
The name is up to you,

38
00:01:42,600 --> 00:01:44,290
but when we work with Express,

39
00:01:44,290 --> 00:01:47,553
we typically call the overall project

40
00:01:47,553 --> 00:01:50,020
an Express application.

41
00:01:50,020 --> 00:01:53,780
And by calling Express, we get an app object,

42
00:01:53,780 --> 00:01:57,203
which will then unlock more functionalities for us.

43
00:01:58,110 --> 00:01:59,990
Because on this app object,

44
00:01:59,990 --> 00:02:02,350
we can now call listen,

45
00:02:02,350 --> 00:02:04,480
just as we did it before on that server

46
00:02:04,480 --> 00:02:06,070
which we created manually,

47
00:02:06,070 --> 00:02:08,130
but now that server is created

48
00:02:08,130 --> 00:02:11,827
behind-the-scenes for us by Express.

49
00:02:11,827 --> 00:02:15,190
Through listen, we can still pass our port number,

50
00:02:15,190 --> 00:02:17,120
3,000 for example.

51
00:02:17,120 --> 00:02:19,550
But with that we already have a shorter way

52
00:02:19,550 --> 00:02:22,730
of creating such a server then we had before

53
00:02:22,730 --> 00:02:25,283
where we had to call create server.

54
00:02:27,520 --> 00:02:30,010
Now, still we want to let Express,

55
00:02:30,010 --> 00:02:32,310
and therefore implicitly Node,

56
00:02:32,310 --> 00:02:35,290
know what should happen for different requests

57
00:02:35,290 --> 00:02:39,920
that might be sent to different paths on our URL.

58
00:02:39,920 --> 00:02:43,160
And for that we can use this app object

59
00:02:43,160 --> 00:02:47,000
after it was created, before we listen typically,

60
00:02:47,000 --> 00:02:51,050
and we can call another method on it, besides listen.

61
00:02:51,050 --> 00:02:54,433
And that is the get method.

62
00:02:55,600 --> 00:02:59,450
A get will allow us to define a request handler

63
00:02:59,450 --> 00:03:02,730
for incoming get requests.

64
00:03:02,730 --> 00:03:05,750
You might recall that in the forms section,

65
00:03:05,750 --> 00:03:09,750
I briefly talked about get and post requests,

66
00:03:09,750 --> 00:03:13,703
but there we weren't able to do anything with post requests.

67
00:03:14,720 --> 00:03:17,610
And a get request is the default kind of request

68
00:03:17,610 --> 00:03:19,250
that is sent by a browser

69
00:03:19,250 --> 00:03:21,310
if you just enter a URL

70
00:03:21,310 --> 00:03:24,263
and hit enter in the browser address bar.

71
00:03:25,330 --> 00:03:28,210
Therefore here I want to handle get requests

72
00:03:28,210 --> 00:03:30,510
sent to a certain path,

73
00:03:30,510 --> 00:03:33,940
so the part after our domain and port.

74
00:03:33,940 --> 00:03:36,380
And here, I want to handle get requests

75
00:03:36,380 --> 00:03:40,393
that are sent to slash current time.

76
00:03:41,460 --> 00:03:42,890
So that will handle requests

77
00:03:42,890 --> 00:03:46,950
that will be sent to local host 3,000 current time,

78
00:03:46,950 --> 00:03:47,923
that's the idea.

79
00:03:50,120 --> 00:03:51,810
And arguably that's shorter

80
00:03:51,810 --> 00:03:54,890
than having to manually write that if statement like this,

81
00:03:54,890 --> 00:03:57,963
where you check the incoming request URL.

82
00:03:59,040 --> 00:04:00,960
Now what's missing is the function

83
00:04:00,960 --> 00:04:04,290
that should be executed for that incoming request.

84
00:04:04,290 --> 00:04:06,730
And that's simply the second parameter value

85
00:04:06,730 --> 00:04:09,250
that you can add to this get method.

86
00:04:09,250 --> 00:04:11,760
The first value sets the path

87
00:04:11,760 --> 00:04:14,410
for which you wanna filter basically.

88
00:04:14,410 --> 00:04:16,410
The second value is the function

89
00:04:16,410 --> 00:04:20,029
that should be executed for such incoming requests.

90
00:04:20,029 --> 00:04:23,100
And here we can, again, create a function,

91
00:04:23,100 --> 00:04:28,100
handle current time request could be a fitting name,

92
00:04:29,240 --> 00:04:31,990
or we use an even shorter notation,

93
00:04:31,990 --> 00:04:34,230
which is not Express specific,

94
00:04:34,230 --> 00:04:37,770
but can be used in JavaScript in general.

95
00:04:37,770 --> 00:04:41,263
We can create a so-called anonymous function like this.

96
00:04:42,430 --> 00:04:44,780
So I'm creating a function right in the place

97
00:04:44,780 --> 00:04:48,130
where it's needed, but it's a function without a name.

98
00:04:48,130 --> 00:04:49,500
Instead, we have the parentheses

99
00:04:49,500 --> 00:04:51,823
directly after the function keyword.

100
00:04:54,200 --> 00:04:56,290
We could have done this before as well.

101
00:04:56,290 --> 00:04:57,790
Here for create server,

102
00:04:57,790 --> 00:05:00,380
which also wanted a pointer at a function,

103
00:05:00,380 --> 00:05:03,530
we could have also created the function just in time

104
00:05:03,530 --> 00:05:05,023
here in this place.

105
00:05:05,890 --> 00:05:09,020
This still doesn't execute the function immediately,

106
00:05:09,020 --> 00:05:12,070
it just creates it and then passes a pointer

107
00:05:12,070 --> 00:05:13,840
to the created function,

108
00:05:13,840 --> 00:05:16,250
to this function to which you pass it,

109
00:05:16,250 --> 00:05:18,133
so create server in this case.

110
00:05:19,130 --> 00:05:20,930
I didn't do that before,

111
00:05:20,930 --> 00:05:23,400
but I will do it now with Express.

112
00:05:23,400 --> 00:05:26,743
I just wanna emphasize that it's not Express specific.

113
00:05:28,020 --> 00:05:29,060
In this function,

114
00:05:29,060 --> 00:05:32,390
you can now define the code that should be executed

115
00:05:32,390 --> 00:05:35,473
if we got an incoming get requests to this path.

116
00:05:37,520 --> 00:05:40,410
And here, I want to send back a response

117
00:05:40,410 --> 00:05:45,410
with that status code and with that h1 element inside of it

118
00:05:45,430 --> 00:05:48,000
that contains this date string here,

119
00:05:48,000 --> 00:05:49,513
this date snapshot.

120
00:05:51,090 --> 00:05:52,760
For that function,

121
00:05:52,760 --> 00:05:56,330
just like the handle request function we defined before,

122
00:05:56,330 --> 00:06:01,330
gets two main parameters passed in automatically by Express.

123
00:06:02,740 --> 00:06:06,960
And that, again, is a request parameter value

124
00:06:06,960 --> 00:06:10,590
giving us more information about the incoming request,

125
00:06:10,590 --> 00:06:13,720
and a response parameter value,

126
00:06:13,720 --> 00:06:17,173
giving us functionalities to prepare a response.

127
00:06:18,560 --> 00:06:22,320
Now, very often we abbreviate that with req and res,

128
00:06:22,320 --> 00:06:23,600
but that's optional.

129
00:06:23,600 --> 00:06:26,710
It's a bit shorter though and hence I'll use that.

130
00:06:26,710 --> 00:06:31,130
Actually, we also get a third value here

131
00:06:31,130 --> 00:06:33,320
passed in by Express

132
00:06:33,320 --> 00:06:36,800
and that's a function which we typically call next here.

133
00:06:36,800 --> 00:06:40,030
So it's a function we can execute inside of this function.

134
00:06:40,030 --> 00:06:42,150
For the moment though, we don't need it

135
00:06:42,150 --> 00:06:43,960
and hence all omit it here.

136
00:06:43,960 --> 00:06:46,293
I just wanted to briefly mention it already.

137
00:06:47,470 --> 00:06:50,050
But now we get information about the incoming request

138
00:06:50,050 --> 00:06:53,100
and we get an object with functionalities

139
00:06:53,100 --> 00:06:54,803
to prepare a response.

140
00:06:56,050 --> 00:06:59,060
Therefore, if I now want to send back a response,

141
00:06:59,060 --> 00:07:03,730
which is what he did before as well, with that h1 element,

142
00:07:03,730 --> 00:07:07,510
we can use this response object here

143
00:07:07,510 --> 00:07:10,480
and there just call send.

144
00:07:10,480 --> 00:07:14,260
So not end like before but send.

145
00:07:14,260 --> 00:07:17,570
Because this is not the same response object.

146
00:07:17,570 --> 00:07:20,870
We also don't have the same request object.

147
00:07:20,870 --> 00:07:23,780
Instead, we got request and response objects

148
00:07:23,780 --> 00:07:28,780
created by Express, by that third party library.

149
00:07:28,900 --> 00:07:31,380
Therefore they have properties and methods

150
00:07:31,380 --> 00:07:35,170
defined by the authors of that library.

151
00:07:35,170 --> 00:07:37,930
And response happens to have a send method,

152
00:07:37,930 --> 00:07:39,860
which does what the name implies,

153
00:07:39,860 --> 00:07:42,570
it sends back a response.

154
00:07:42,570 --> 00:07:45,960
And in its simplest form, you can pass the data

155
00:07:45,960 --> 00:07:50,960
that you want to send back as a parameter value to send.

156
00:07:51,210 --> 00:07:54,660
So basically just as we did it for end before.

157
00:07:54,660 --> 00:07:57,500
Hence I'll grab that value from down there

158
00:07:57,500 --> 00:08:02,500
and pass that to send then at a semi-colon here.

159
00:08:05,340 --> 00:08:06,790
Now, before we test this,

160
00:08:06,790 --> 00:08:10,970
let's also handle the just slash case here

161
00:08:10,970 --> 00:08:13,040
so that the request is just sent

162
00:08:13,040 --> 00:08:15,653
to our domain slash nothing.

163
00:08:16,950 --> 00:08:20,130
For this, we now don't add any if check here,

164
00:08:20,130 --> 00:08:24,430
instead we just define another so-called route

165
00:08:24,430 --> 00:08:28,860
by again using app get forward slash nothing.

166
00:08:28,860 --> 00:08:31,600
And then again, we have our handler function,

167
00:08:31,600 --> 00:08:34,230
which gets the request and response objects,

168
00:08:34,230 --> 00:08:36,423
and in there we define our code.

169
00:08:37,760 --> 00:08:38,860
So in here,

170
00:08:38,860 --> 00:08:43,210
I now wanna send back this hello world text here,

171
00:08:43,210 --> 00:08:47,713
so I will write res dot send hello world.

172
00:08:50,080 --> 00:08:52,330
And that will then handle the requests

173
00:08:52,330 --> 00:08:55,433
to a local host 3,000 slash nothing.

174
00:08:56,790 --> 00:09:00,430
As a side note, I'm never setting the status code here

175
00:09:00,430 --> 00:09:04,230
because Express will set it to 200 as a default

176
00:09:04,230 --> 00:09:06,820
if I don't set it myself.

177
00:09:06,820 --> 00:09:08,270
We could override it,

178
00:09:08,270 --> 00:09:10,360
but we don't need to do that right now.

179
00:09:10,360 --> 00:09:12,290
And hence this is now how we can handle

180
00:09:12,290 --> 00:09:15,330
these two different requests

181
00:09:15,330 --> 00:09:18,203
that could arrive here on our server.

182
00:09:19,590 --> 00:09:21,330
And therefore now we can get rid of

183
00:09:21,330 --> 00:09:24,160
that old NodeJS code down there

184
00:09:24,160 --> 00:09:27,300
because now we're using Express instead.

185
00:09:27,300 --> 00:09:29,740
And if you now have a look at this code

186
00:09:29,740 --> 00:09:33,460
and you compare it to the NodeJS code from before

187
00:09:33,460 --> 00:09:36,587
then this definitely looks more structured

188
00:09:36,587 --> 00:09:41,070
and is a bit easier to digest, read, and maintain.

189
00:09:41,070 --> 00:09:44,950
And for this simple project, that might not matter too much,

190
00:09:44,950 --> 00:09:47,390
but if you're building more complex projects,

191
00:09:47,390 --> 00:09:51,430
you can hopefully see the value Express might offer to you

192
00:09:51,430 --> 00:09:55,090
since it makes writing and structuring code easier

193
00:09:55,090 --> 00:09:57,077
than it would be with just NodeJS.

194
00:09:58,620 --> 00:10:01,130
And that's just the tip of the iceberg,

195
00:10:01,130 --> 00:10:04,880
especially once it comes to parsing and handling user input,

196
00:10:04,880 --> 00:10:09,633
Express.js will make it way easier than just NodeJS does.

197
00:10:11,270 --> 00:10:13,910
So therefore now, if you save that file,

198
00:10:13,910 --> 00:10:18,180
we can again run our app.js file with Node.

199
00:10:18,180 --> 00:10:19,640
That hasn't changed,

200
00:10:19,640 --> 00:10:22,020
it's still Node app.js.

201
00:10:22,020 --> 00:10:24,330
And this will then start this web server

202
00:10:24,330 --> 00:10:26,530
as it did before.

203
00:10:26,530 --> 00:10:30,380
But if we now enter local host 3,000 like that,

204
00:10:30,380 --> 00:10:32,320
we see hello world.

205
00:10:32,320 --> 00:10:36,260
And if I enter slash current time, like we did it before,

206
00:10:36,260 --> 00:10:38,670
I get this current timestamp.

207
00:10:38,670 --> 00:10:40,800
And of course that's a different timestamp

208
00:10:40,800 --> 00:10:42,700
every time I reload here,

209
00:10:42,700 --> 00:10:47,420
because this is generated just in time on the server.

210
00:10:47,420 --> 00:10:49,560
That was the case before as well

211
00:10:49,560 --> 00:10:51,410
but now with Express.js,

212
00:10:51,410 --> 00:10:54,193
our code is a bit easier and more structured.