1
00:00:00,000 --> 00:00:04,946
[MUSIC]

2
00:00:04,946 --> 00:00:09,700
In this exercise, we will explore
some of the code Node modules.

3
00:00:09,700 --> 00:00:15,326
In particular, we will look at the HTTP
module that is built into Node and

4
00:00:15,326 --> 00:00:20,411
use the HTTP module to configure and
start up a simple web server.

5
00:00:20,411 --> 00:00:28,090
We will also look at how we can serve up
static files from our Node HTTP server.

6
00:00:28,090 --> 00:00:32,510
We will also look at that file system
module and the path module and

7
00:00:32,510 --> 00:00:39,640
how they can help us to serve static
files in our Node-based HTTP server.

8
00:00:39,640 --> 00:00:43,790
So let's explore some of the code
Node modules in this exercise.

9
00:00:45,710 --> 00:00:51,050
To get started with this exercise, go to
a convenient location on your computer.

10
00:00:51,050 --> 00:00:54,820
So we will go to the NodeJS folder
that we have already created in one of

11
00:00:54,820 --> 00:00:56,400
the previous exercises.

12
00:00:56,400 --> 00:01:02,663
And in the NodeJS folder, I'm going to
create a new folder named node-http.

13
00:01:02,663 --> 00:01:07,370
And then,
we will set this up as a Node application.

14
00:01:07,370 --> 00:01:11,440
Also, moving into the node-http folder,

15
00:01:11,440 --> 00:01:16,770
let's create a sub folder there
named public which will continue

16
00:01:16,770 --> 00:01:23,080
some of the html files that we will
server from our Node HTTP application.

17
00:01:23,080 --> 00:01:28,072
Now moving to a terminal,
navigate to the node,

18
00:01:32,012 --> 00:01:33,478
-http folder.

19
00:01:38,222 --> 00:01:43,320
And let's initialize this folder
to be in our application.

20
00:01:43,320 --> 00:01:45,901
So we'll start with npm init and

21
00:01:45,901 --> 00:01:49,734
initialize that package
to our JSON file here.

22
00:01:49,734 --> 00:01:56,450
And then we'll give the package
name as node-http and

23
00:01:56,450 --> 00:02:00,684
accept the standard version, and

24
00:02:00,684 --> 00:02:06,390
the description is
Node HTTP Module Example.

25
00:02:06,390 --> 00:02:10,830
And the starting point is index.js,
no test command,

26
00:02:10,830 --> 00:02:14,890
no git repository for
the moment, and author,

27
00:02:15,960 --> 00:02:21,460
type in your name, and
accept the rest as is.

28
00:02:23,360 --> 00:02:27,240
And that should create the package for
a JSON manifest file.

29
00:02:27,240 --> 00:02:32,310
Now let's open this project
in our favorite editor.

30
00:02:32,310 --> 00:02:40,860
So let me start up my
Visual Studio code at this folder.

31
00:02:40,860 --> 00:02:44,919
And in the Visual Studio code,
let's go to the package to our JSON file.

32
00:02:44,919 --> 00:02:51,179
And then we will add in
another script to the package,

33
00:02:51,179 --> 00:02:54,936
to our JSON file called start and

34
00:02:54,936 --> 00:02:58,850
which would execute node index.

35
00:02:58,850 --> 00:03:02,710
And remember to put a comma
after the test hitch.

36
00:03:04,300 --> 00:03:08,797
And save the changes to
the package.json file.

37
00:03:08,797 --> 00:03:11,805
Now in where Project,

38
00:03:11,805 --> 00:03:16,720
create a new file called index.js.

39
00:03:16,720 --> 00:03:24,920
We're going to configure this
index.js to use the Node HTTP module.

40
00:03:24,920 --> 00:03:29,825
So in this file, let's type in const

41
00:03:29,825 --> 00:03:34,160
http = require ("http").

42
00:03:34,160 --> 00:03:38,485
So you can see that we are using
the HTTP code module, and

43
00:03:38,485 --> 00:03:44,484
we are requiring it by simply specifying
the HTTP code module's name there.

44
00:03:46,647 --> 00:03:48,994
In addition, let's declare,

45
00:03:52,843 --> 00:03:57,551
A couple of constants here and then,

46
00:03:59,779 --> 00:04:02,931
We'll call hostname and

47
00:04:02,931 --> 00:04:08,580
the port number as 3000 by default.

48
00:04:08,580 --> 00:04:10,990
Now let's set up the server.

49
00:04:10,990 --> 00:04:18,330
To set up the server,
we'll say const server = http.

50
00:04:18,330 --> 00:04:24,210
The HTTP module supports
a method called createServer,

51
00:04:24,210 --> 00:04:28,312
so they going to use
the createServer method on that.

52
00:04:28,312 --> 00:04:36,670
This createServer method will take
a function as a parameter and

53
00:04:36,670 --> 00:04:40,683
this function takes two

54
00:04:40,683 --> 00:04:46,560
values as parameters,
request and response.

55
00:04:46,560 --> 00:04:49,960
And as you can see,
I am writing an arrow function here.

56
00:04:49,960 --> 00:04:54,770
So the request and response are the two
parameters to the function that we supply

57
00:04:54,770 --> 00:04:59,290
as a parameter to
the createServer method here.

58
00:04:59,290 --> 00:05:04,224
And inside this, we will say

59
00:05:04,224 --> 00:05:10,580
console.log (req.headers).

60
00:05:10,580 --> 00:05:18,892
So here, the req and res are the incoming
HTTP request to the server.

61
00:05:18,892 --> 00:05:22,548
And they kind of spawning
response object that is going

62
00:05:22,548 --> 00:05:26,443
to be constructed by this server and
returned to the client

63
00:05:26,443 --> 00:05:30,820
that connects to this HTTP server
that we are creating here.

64
00:05:30,820 --> 00:05:35,120
So the request is the incoming
request from any browser or

65
00:05:35,120 --> 00:05:39,700
from anywhere that is trying to access
this server that we're going to start up

66
00:05:39,700 --> 00:05:45,590
using this HTTP Node application
that we are developing here.

67
00:05:45,590 --> 00:05:47,500
So from the request,

68
00:05:47,500 --> 00:05:53,190
the request object gives us access to
the headers in the incoming HTTP request.

69
00:05:53,190 --> 00:05:55,690
So I'm going to log the incoming

70
00:05:55,690 --> 00:06:00,420
headers of the HTTP request
coming in using this console.log.

71
00:06:00,420 --> 00:06:05,920
Just for my information, just to know
where this request is coming from.

72
00:06:05,920 --> 00:06:11,948
Thereafter, we can construct
the response by using the res and

73
00:06:11,948 --> 00:06:16,739
this will provide us
a method called statusCode.

74
00:06:16,739 --> 00:06:24,315
The statusCode will enable us to set up
the statusCode for the response message.

75
00:06:24,315 --> 00:06:28,026
So in this case,
I will set up the statusCode as 200.

76
00:06:28,026 --> 00:06:32,259
If you recall from the earlier
discussion on networking essentials,

77
00:06:32,259 --> 00:06:36,576
you will know that statusCode of
200 means that everything is okay.

78
00:06:36,576 --> 00:06:41,856
And so, we set up the status code here for
the response message and

79
00:06:41,856 --> 00:06:46,763
then we will also set up the header for
the response message.

80
00:06:46,763 --> 00:06:51,984
And one of the header
fears that we are going

81
00:06:51,984 --> 00:06:56,344
to set up is called Content-Type.

82
00:06:56,344 --> 00:06:59,447
And the Content-Type,

83
00:06:59,447 --> 00:07:04,928
we will specify this to be 'text/html'.

84
00:07:04,928 --> 00:07:13,360
So the response body will contain
the data in the form of html here.

85
00:07:13,360 --> 00:07:18,740
So the header is setup to inform
the client that you are sending

86
00:07:18,740 --> 00:07:25,160
in the response and
the body is formatted in html format.

87
00:07:25,160 --> 00:07:27,840
And then finally,
we will say res.end(' ').

88
00:07:27,840 --> 00:07:32,500
So this ends the response here,
and when this is done,

89
00:07:32,500 --> 00:07:37,620
this information will be
sent back to the client.

90
00:07:37,620 --> 00:07:45,992
So in here, let me just construct
an in-line html page here,

91
00:07:45,992 --> 00:07:52,754
so I'll say <html><body><h1><Hello,

92
00:07:52,754 --> 00:07:55,540
World!</h1>.

93
00:07:58,328 --> 00:08:04,211
And close off the h1 tag, the body tag,

94
00:08:04,211 --> 00:08:09,270
and the html tag, right there.

95
00:08:09,270 --> 00:08:13,850
And that's a valid HTML response that can

96
00:08:13,850 --> 00:08:18,100
be sent back from our server here.

97
00:08:18,100 --> 00:08:23,730
So this server, as you expect to simply
going send a hello world to the client.

98
00:08:23,730 --> 00:08:28,320
So now that we have set up the server,
we need to start this server.

99
00:08:28,320 --> 00:08:32,350
To start this server in note,

100
00:08:32,350 --> 00:08:37,930
we need to say server.listen.

101
00:08:37,930 --> 00:08:43,330
And this will start the listening port
on which the server will listen for

102
00:08:43,330 --> 00:08:45,030
incoming requests.

103
00:08:45,030 --> 00:08:50,050
And this would be started at
the port number given my port,

104
00:08:50,050 --> 00:08:53,910
which we have set up already
here in the const port.

105
00:08:53,910 --> 00:08:59,990
And the second parameter is the hostname
which we already set up earlier.

106
00:08:59,990 --> 00:09:03,560
And the third parameter is
a function that will be

107
00:09:04,720 --> 00:09:07,520
executed when the server starts up.

108
00:09:07,520 --> 00:09:13,560
In this function we just go to print
out the information about the server.

109
00:09:13,560 --> 00:09:18,505
So in here I'm just going
to say console.log.

110
00:09:19,560 --> 00:09:22,110
And in the console.log,

111
00:09:22,110 --> 00:09:26,640
I'm going to print out the information so
I will use a back quote.

112
00:09:26,640 --> 00:09:30,876
So note the use of back
quote not the normal quote.

113
00:09:30,876 --> 00:09:35,103
The reason why we are using that
is because we're going to be using

114
00:09:35,103 --> 00:09:39,830
some variables inside the string
that we are going to construct here.

115
00:09:39,830 --> 00:09:45,608
So we'll say server running at http://.

116
00:09:45,608 --> 00:09:50,965
And then we will say $ and

117
00:09:50,965 --> 00:09:55,780
then Host name.

118
00:09:55,780 --> 00:09:59,582
Recall that this host name,
you have already declared earlier.

119
00:09:59,582 --> 00:10:04,187
And then the second part,

120
00:10:04,187 --> 00:10:08,800
we'll say :$ and port.

121
00:10:08,800 --> 00:10:14,130
So these two values will be substituted
for the corresponding values.

122
00:10:14,130 --> 00:10:17,370
And since we are enclosing
this in back quotes.

123
00:10:17,370 --> 00:10:21,070
And if you include something
inside dollar raises,

124
00:10:21,070 --> 00:10:26,150
that will be replaced by its
value in this string here.

125
00:10:28,230 --> 00:10:29,150
That's it.

126
00:10:29,150 --> 00:10:33,990
We have a simple HTTP server up and
running.

127
00:10:33,990 --> 00:10:37,480
So let's save the changes to this.

128
00:10:37,480 --> 00:10:42,920
And we'll go and start up our
application and see what it serves up.

129
00:10:42,920 --> 00:10:47,010
Going to the terminal,
let's type npm start, and

130
00:10:47,010 --> 00:10:50,820
this should start up our application.

131
00:10:50,820 --> 00:10:54,020
And we notice that it prints
our saying that server running

132
00:10:54,020 --> 00:10:57,420
at http://localhost:3000.

133
00:10:57,420 --> 00:11:05,950
Now you can access this URL by typing
it into the address bar of any browser.

134
00:11:05,950 --> 00:11:09,490
So let me start of a Chrome browser
window and then type this and

135
00:11:09,490 --> 00:11:11,340
see what the server will return.

136
00:11:19,160 --> 00:11:20,848
Starting a new window.

137
00:11:20,848 --> 00:11:27,260
Let me just type in http://

138
00:11:30,028 --> 00:11:34,400
localhost:3000.

139
00:11:34,400 --> 00:11:39,490
And that should return
a Hello World as we expect.

140
00:11:39,490 --> 00:11:47,020
Now when we go to the console you
see that on the console there

141
00:11:48,820 --> 00:11:54,530
details of the incoming requests
header is printed out here.

142
00:11:54,530 --> 00:11:56,650
Some things are very easy to locate here.

143
00:11:56,650 --> 00:12:02,290
So this is host, localhost:3000, and
you also see that the "user-agent"

144
00:12:02,290 --> 00:12:08,200
is set to "Chrome" here,
the Chrome version that I am using here.

145
00:12:08,200 --> 00:12:14,470
So that is an interesting illustration
of the HTTP request message.

146
00:12:14,470 --> 00:12:19,860
And what is contained in the header of
the request message that came in here.

147
00:12:19,860 --> 00:12:24,700
So interesting to observe
what your sever is

148
00:12:24,700 --> 00:12:28,690
printing out onto the screen here.

149
00:12:28,690 --> 00:12:32,935
With this, we complete the first
half of this exercise.

150
00:12:32,935 --> 00:12:38,895
Now we can initialize this
application into a Git repository,

151
00:12:38,895 --> 00:12:41,505
and then save the changes
to the Git repository.

152
00:12:41,505 --> 00:12:44,695
So let's go ahead and do that next.

153
00:12:44,695 --> 00:12:51,435
At the prompt type, get init, and
that initialized the repository.

154
00:12:51,435 --> 00:12:57,420
And then we'll say git status and
you see that these two files are new.

155
00:12:57,420 --> 00:12:59,502
So we'll say git add.

156
00:12:59,502 --> 00:13:04,702
And do git commit

157
00:13:04,702 --> 00:13:15,260
-m "Node HTTP Example 1".

158
00:13:15,260 --> 00:13:19,260
And then check this into
our Git repository.

159
00:13:19,260 --> 00:13:22,640
Now yet another tool that is very useful

160
00:13:22,640 --> 00:13:28,370
when we are looking at server side
applications is called Postman.

161
00:13:28,370 --> 00:13:33,330
Now Postman comes in the form of
either a Chrome browser extension or

162
00:13:33,330 --> 00:13:38,430
a standalone tool that you can
download and install on your computer.

163
00:13:38,430 --> 00:13:43,998
So to do that,
in our browser let's type http.

164
00:13:43,998 --> 00:13:47,425
getpostman.com.

165
00:13:47,425 --> 00:13:52,550
And then this is where you
can obtain the Postman

166
00:13:52,550 --> 00:13:57,660
tool for your specific OS and install it.

167
00:13:57,660 --> 00:14:04,360
The Postman tool allows you to create
HTTP requests and then send them.

168
00:14:04,360 --> 00:14:09,960
And it also gives you the flexibility
of setting up the headers for

169
00:14:09,960 --> 00:14:12,520
your HTTP request before you send it in.

170
00:14:12,520 --> 00:14:16,140
And then when the response comes back,
you're able to examine the response

171
00:14:16,140 --> 00:14:20,500
including the headers of the response
that comes back from the server side.

172
00:14:20,500 --> 00:14:23,160
So I find Postman to be very useful.

173
00:14:23,160 --> 00:14:25,410
There are a few other tools like this,

174
00:14:25,410 --> 00:14:30,040
but Postman seems to be the best
in the market at the moment.

175
00:14:30,040 --> 00:14:35,010
So I'm going to make use of Postman
through the rest of this course.

176
00:14:35,010 --> 00:14:36,830
If you don't want to install it,

177
00:14:36,830 --> 00:14:41,720
you can also install the Chrome browser
extension of Postman and then use it.

178
00:14:41,720 --> 00:14:45,260
I'm going to download the MacOS
version of Postman and

179
00:14:45,260 --> 00:14:49,130
then install it on my machine and
then make use of it.

180
00:14:50,230 --> 00:14:54,280
Once you have the Postman,
either the standalone version or

181
00:14:54,280 --> 00:14:57,880
the Chrome browser extension installed,
you can start it up.

182
00:14:57,880 --> 00:15:02,210
And you will see that the user
interface is more or less the same for

183
00:15:02,210 --> 00:15:07,060
both the standard version and
also the Chrome browser extension.

184
00:15:07,060 --> 00:15:10,955
And once you have the Postman up and
running,

185
00:15:10,955 --> 00:15:18,105
then type in in the Request URL box,

186
00:15:18,105 --> 00:15:21,510
localhost:3000.

187
00:15:21,510 --> 00:15:24,090
And send the request to yourself.

188
00:15:24,090 --> 00:15:28,990
Make sure that your Node HTTP
server is up and running.

189
00:15:28,990 --> 00:15:30,440
So when you send the request,

190
00:15:30,440 --> 00:15:36,100
you would immediately get a response
from the server with the HTML code here.

191
00:15:36,100 --> 00:15:38,170
Now the advantage, as you see,

192
00:15:38,170 --> 00:15:43,480
with using Postman is that you can
see the actual body of the message.

193
00:15:43,480 --> 00:15:49,380
You can also look at the headers to see
what has been sent back from the server.

194
00:15:49,380 --> 00:15:54,890
You can also setup a lot of details
in Postman when you're sending.

195
00:15:54,890 --> 00:15:57,600
Request from the server.

196
00:15:57,600 --> 00:16:02,930
Now many of these may not be very easy
to do using a standard browser window.

197
00:16:02,930 --> 00:16:07,092
So that's the reason why I
prefer to use [INAUDIBLE] for

198
00:16:07,092 --> 00:16:10,780
generating the HTTP requests to my server.

199
00:16:10,780 --> 00:16:14,630
And then observing the response that
comes back from the server side.

200
00:16:14,630 --> 00:16:20,490
Also notice that it shows the status code
here and some other information about

201
00:16:21,650 --> 00:16:26,140
the request and
the response time from the server side.

202
00:16:26,140 --> 00:16:31,760
Now that we have created its
simple-node based HTTP server,

203
00:16:31,760 --> 00:16:39,380
let's extend it further, let's create
a couple HTML files in the public folder.

204
00:16:39,380 --> 00:16:43,632
We'll call it this as index.html.

205
00:16:43,632 --> 00:16:49,657
And then also aboutus.html,

206
00:16:49,657 --> 00:16:55,160
and then just include some bare
bones information in here.

207
00:16:55,160 --> 00:17:00,809
So we'll say html, and

208
00:17:00,809 --> 00:17:08,160
title as This is index.html.

209
00:17:08,160 --> 00:17:15,790
And then we'll type in
body of the html page.

210
00:17:15,790 --> 00:17:21,044
Say h1 Index.html and

211
00:17:21,044 --> 00:17:26,298
the body and then this is

212
00:17:26,298 --> 00:17:32,346
the contents of this file.

213
00:17:32,346 --> 00:17:36,187
Some basic html code here,
let me copy this and

214
00:17:36,187 --> 00:17:40,040
then paste also into
the aboutus.html page.

215
00:17:58,607 --> 00:18:02,560
And contents of the aboutus.html file,
that's it.

216
00:18:02,560 --> 00:18:05,310
We just created two HTML pages, and

217
00:18:05,310 --> 00:18:09,840
these are static HTML pages that we
have created in the public folder.

218
00:18:09,840 --> 00:18:16,800
Now, can we set up our node HTTP server
to be able to serve up static pages?

219
00:18:16,800 --> 00:18:24,030
So this is what we're going to configure
in the second part of this exercise.

220
00:18:24,030 --> 00:18:27,928
So going back to index.js file,

221
00:18:27,928 --> 00:18:32,244
in addition to the HTTP code module,

222
00:18:32,244 --> 00:18:38,660
I'm going to also import
the file system code module.

223
00:18:45,192 --> 00:18:49,920
And that path code module.

224
00:18:51,230 --> 00:18:56,560
The path allows you to specify the part
of a file in your local file system.

225
00:18:56,560 --> 00:18:59,430
The file system module
allows you to read and

226
00:18:59,430 --> 00:19:02,330
write files from your local file system.

227
00:19:02,330 --> 00:19:08,880
So with this, they will say
constant server, http.createServer.

228
00:19:08,880 --> 00:19:13,583
For the console log, instead of
typing in entire request headers,

229
00:19:13,583 --> 00:19:17,378
I will simply type in just
sufficient information, so

230
00:19:17,378 --> 00:19:24,212
I will say, Request for,

231
00:19:29,291 --> 00:19:32,329
Just the URL of that request.

232
00:19:39,786 --> 00:19:41,195
By method.

233
00:19:46,917 --> 00:19:51,218
So the method would be either
get port post or delete methods.

234
00:19:51,218 --> 00:19:56,450
So this will log this information.

235
00:19:56,450 --> 00:20:01,478
Now, what we're going to
do is instead of sending

236
00:20:01,478 --> 00:20:06,440
this response,
the standard hello world response.

237
00:20:06,440 --> 00:20:11,176
Here, we are going to
examine the method and

238
00:20:11,176 --> 00:20:16,600
then we will say if
req.method is equal to GET.

239
00:20:16,600 --> 00:20:21,689
So we will only service GET
requests in this example.

240
00:20:25,904 --> 00:20:28,750
Otherwise, we will say
that there is an if.

241
00:20:28,750 --> 00:20:34,035
So if there is a GET
request that comes in,

242
00:20:34,035 --> 00:20:36,911
then we'll examine,

243
00:20:42,139 --> 00:20:47,577
The URL that comes in,

244
00:20:47,577 --> 00:20:55,304
so we'll say if req.url is /,

245
00:20:55,304 --> 00:21:03,615
we'll say fileUrl equal to html.

246
00:21:03,615 --> 00:21:06,645
So if you do not get
a specific file name but

247
00:21:06,645 --> 00:21:10,380
you just send request to
local host code 3000.

248
00:21:10,380 --> 00:21:15,371
It will default to the index.html,

249
00:21:15,371 --> 00:21:22,460
otherwise it'll say fileUrl
is equal to req.url.

250
00:21:24,650 --> 00:21:28,148
So this way,
you have constructed which file to server.

251
00:21:28,148 --> 00:21:35,929
Now, we'll say We'll find
the path of the file,

252
00:21:35,929 --> 00:21:41,279
we'll say path, Resolve,

253
00:21:41,279 --> 00:21:48,404
so the path module supports this
resolve method, so this will

254
00:21:52,013 --> 00:21:57,331
Translate this into the full
fledged path folders file,

255
00:21:57,331 --> 00:22:01,096
the file that we have just constructed,

256
00:22:01,096 --> 00:22:05,620
the fileUrl that we have just constructed.

257
00:22:05,620 --> 00:22:10,480
So this will give us the full path for
the file, and

258
00:22:10,480 --> 00:22:17,000
then we'll say constant fileExtension.

259
00:22:17,000 --> 00:22:21,524
So if you want to make sure that

260
00:22:21,524 --> 00:22:26,808
the file name extension is HTML.

261
00:22:30,003 --> 00:22:32,904
So from the filePath,

262
00:22:32,904 --> 00:22:38,402
we will examine the filename extension and

263
00:22:38,402 --> 00:22:42,710
then we'll say if fileExt ==.

264
00:22:42,710 --> 00:22:47,270
So if it is an HTML file, then we know
how to serve it from this particular

265
00:22:48,410 --> 00:22:51,830
relation of the node HTTP server.

266
00:22:51,830 --> 00:22:57,025
So we'll say if file extension is HTML,
then we know that

267
00:22:57,025 --> 00:23:02,835
the file is an HTML file and we have
the two files, index and aboutus.html.

268
00:23:02,835 --> 00:23:06,986
So we will check to see
if this file exists, so

269
00:23:06,986 --> 00:23:11,435
we'll say if file exists, filePath.

270
00:23:11,435 --> 00:23:17,915
So the exists method will check
to see if the file exists,

271
00:23:17,915 --> 00:23:24,180
so we'll say fs.exists(filePath),

272
00:23:24,180 --> 00:23:26,860
and this one will take

273
00:23:29,780 --> 00:23:34,170
as a second parameter,
a call back function.

274
00:23:34,170 --> 00:23:39,180
So notice the use of the first
call back function in our example.

275
00:23:39,180 --> 00:23:46,430
So this callback function will be called
with this parameter exists in there.

276
00:23:46,430 --> 00:23:50,740
So inside this callback parameter,
this exists will be either true or false.

277
00:23:50,740 --> 00:23:54,160
So this is the return parameter for
this callback function.

278
00:23:54,160 --> 00:23:58,336
So in here, We will check, and

279
00:23:58,336 --> 00:24:02,584
we'll say if(!exists), so

280
00:24:02,584 --> 00:24:08,248
which means that the file doesn't exist,

281
00:24:08,248 --> 00:24:14,241
then we will say res.statusCode = 404.

282
00:24:14,241 --> 00:24:19,107
Recall that if the file doesn't exist,
you will send a status code of 404 saying,

283
00:24:19,107 --> 00:24:20,608
you cannot find the file.

284
00:24:20,608 --> 00:24:26,393
And then we'll say res.setHeader,

285
00:24:26,393 --> 00:24:33,996
and we'll set the header
to 'Content-Type',

286
00:24:37,305 --> 00:24:39,587
'text/html'.

287
00:24:42,729 --> 00:24:51,940
And then we need to send the,
HTML file here, or the HTML code.

288
00:24:51,940 --> 00:24:59,150
So I will do the basic HTML code,
html body h1.

289
00:25:01,582 --> 00:25:05,590
Error 404,

290
00:25:05,590 --> 00:25:12,378
we'll say, + fileUrl +

291
00:25:17,421 --> 00:25:20,668
' not found'.

292
00:25:24,185 --> 00:25:31,670
And close off, The HTML page.

293
00:25:31,670 --> 00:25:36,560
So in here, as you notice,
you're using the exists function

294
00:25:36,560 --> 00:25:41,350
of the file system module to
check if the file exists.

295
00:25:41,350 --> 00:25:43,670
So you give the file path
as the first parameter, and

296
00:25:43,670 --> 00:25:45,970
the second is the callback function.

297
00:25:45,970 --> 00:25:51,380
Inside this callback function, if it says
the exists is false, then you're going to

298
00:25:51,380 --> 00:25:58,010
send back standard 404 error message,
saying that you cannot find the file.

299
00:25:58,010 --> 00:26:01,420
And after we do this, we'll simply,

300
00:26:04,918 --> 00:26:08,088
return, otherwise,

301
00:26:10,507 --> 00:26:16,151
We'll say res.statusCode

302
00:26:16,151 --> 00:26:22,267
= 200, res.setHeader,

303
00:26:26,156 --> 00:26:32,481
('Content-Type', 'text/html').

304
00:26:37,154 --> 00:26:41,950
Now, we need to read in the file and
then send the file out.

305
00:26:41,950 --> 00:26:44,950
So this is where,
from the file system module,

306
00:26:44,950 --> 00:26:50,510
we will use the createReadStream,

307
00:26:50,510 --> 00:26:54,770
which will take the filePath
as a parameter.

308
00:26:54,770 --> 00:27:00,810
So this createReadStream method will
read in the file from this filePath.

309
00:27:00,810 --> 00:27:05,930
And then convert that
into stream of bytes,

310
00:27:05,930 --> 00:27:10,530
and then they will pipe this
through to the response.

311
00:27:10,530 --> 00:27:15,300
So that will be included into
the response, in the body of the response.

312
00:27:15,300 --> 00:27:17,978
So that way we have
just taken the file and

313
00:27:17,978 --> 00:27:22,274
then constructed it
into the response here.

314
00:27:22,274 --> 00:27:26,640
And that's it,
the file is ready to be sent out, okay?

315
00:27:26,640 --> 00:27:29,875
So this is if the file extension is html,

316
00:27:29,875 --> 00:27:34,740
we are checking to make sure
that you handle this correctly.

317
00:27:34,740 --> 00:27:38,770
So this is where you will read in
the file and then send it out.

318
00:27:38,770 --> 00:27:46,560
If the file extension is not html, then of
course, we need to send an error message.

319
00:27:46,560 --> 00:27:51,481
So right there we will see,
we will copy this

320
00:27:51,481 --> 00:27:56,890
particular, Code from here.

321
00:27:58,774 --> 00:28:03,364
And then paste it in there.

322
00:28:03,364 --> 00:28:10,553
We'll say, else statusCode = 404,
Context text/html,

323
00:28:10,553 --> 00:28:16,685
and the error message says,
Error 404, fileUrl.

324
00:28:16,685 --> 00:28:20,849
It's not found, but

325
00:28:20,849 --> 00:28:25,250
it is not an HTML file.

326
00:28:25,250 --> 00:28:28,648
So that is the error that we're
going to send back in this case.

327
00:28:28,648 --> 00:28:34,384
And finally, for the last else case,

328
00:28:34,384 --> 00:28:39,650
so here we are saying the method.

329
00:28:39,650 --> 00:28:44,910
So this else corresponds
to the request method.

330
00:28:44,910 --> 00:28:48,230
So if the request method is not GET,
but some other request method,

331
00:28:48,230 --> 00:28:54,380
then we won't handle that in this
version our Node application.

332
00:28:54,380 --> 00:28:58,333
So we'll send back statusCode 404,

333
00:28:58,333 --> 00:29:02,759
Content html, and we will say Error 404.

334
00:29:04,100 --> 00:29:09,117
And we'll say, req method,

335
00:29:11,763 --> 00:29:16,394
Not, Supported,

336
00:29:16,394 --> 00:29:21,800
not supported by this Node HTML
server here, that's it.

337
00:29:21,800 --> 00:29:28,667
With these changes,
we are now ready to restart our browser.

338
00:29:28,667 --> 00:29:33,850
And then let it serve
up the HTML files here.

339
00:29:35,800 --> 00:29:42,351
So let's save the changes, And
then go and restart our server, and

340
00:29:42,351 --> 00:29:48,018
then examine what it sends when we
send various requests to server.

341
00:29:48,018 --> 00:29:51,974
Going to the terminal,
if your server is running,

342
00:29:51,974 --> 00:29:56,398
stop it by typing Ctrl+C,
and then restart the server.

343
00:29:56,398 --> 00:30:00,490
And when the server is up and running,
let's send some requests to it.

344
00:30:00,490 --> 00:30:05,722
First, from a browser, and
thereafter from Postman.

345
00:30:05,722 --> 00:30:10,340
Go into your browser window,
let's type localhost:3000, and

346
00:30:10,340 --> 00:30:16,320
see that this returns
the index.html file as we expect.

347
00:30:16,320 --> 00:30:21,073
And then we'll say
localhost:3000/index.html,

348
00:30:21,073 --> 00:30:24,974
and this will also return
the index.html file.

349
00:30:24,974 --> 00:30:32,530
Now if we send aboutus.html, it says
Aboutus.html, and it returns it correctly.

350
00:30:32,530 --> 00:30:38,390
Let's now send a request for
aboutus.txt, and see what it does.

351
00:30:38,390 --> 00:30:43,365
So it says /aboutus.txt
is Is not an HTML file.

352
00:30:43,365 --> 00:30:49,992
Then let's send a request to test.html.

353
00:30:49,992 --> 00:30:56,005
And we know that test.html doesn't exist,
so it says /test.html not found.

354
00:30:56,005 --> 00:31:01,185
So we see that by using the browser,
we are able to fetch

355
00:31:01,185 --> 00:31:06,620
those files that exist, and the server is
able to send up the files to the browser.

356
00:31:06,620 --> 00:31:10,420
Let's now go to Postman and
try to generate the same requests,

357
00:31:10,420 --> 00:31:13,400
and see the response from the server.

358
00:31:13,400 --> 00:31:20,280
Next, going to Postman, let's send
a GET request to localhost:3000/.

359
00:31:20,280 --> 00:31:25,150
And you see that this
returns the index.html file.

360
00:31:25,150 --> 00:31:30,530
Let's send a request to aboutus.html.

361
00:31:30,530 --> 00:31:35,159
And then you see that it
returns the aboutus.html file.

362
00:31:35,159 --> 00:31:38,650
And then we'll send
a request to the text file,

363
00:31:38,650 --> 00:31:42,240
and then it says error 404,
not an HTML file.

364
00:31:42,240 --> 00:31:46,920
And you will see that the status
here says, 404 not found.

365
00:31:46,920 --> 00:31:51,400
And then we'll,
instead of sending a GET request,

366
00:31:51,400 --> 00:31:56,730
see this is the advantage of using
Postman, I'll send a PUT request.

367
00:31:56,730 --> 00:32:01,040
And you'll notice that this says,
Error: PUT not supported, and

368
00:32:01,040 --> 00:32:04,800
so with the Status 404 here, and so on.

369
00:32:04,800 --> 00:32:11,010
So this is how you can
configure a Node HTTP server

370
00:32:11,010 --> 00:32:16,600
to be able to serve up files,
HTTP files in this particular case.

371
00:32:16,600 --> 00:32:19,420
Now you can easily imagine extending

372
00:32:19,420 --> 00:32:23,900
this HTTP server to handle many
different kinds of files and so on.

373
00:32:23,900 --> 00:32:25,630
But of course, correspondingly,

374
00:32:25,630 --> 00:32:30,350
the code will also get more complicated
than what we have at this moment.

375
00:32:30,350 --> 00:32:33,140
With this, we complete this exercise.

376
00:32:33,140 --> 00:32:38,589
In this exercise,
we have seen how we can set up a simple

377
00:32:38,589 --> 00:32:45,356
Node-based HTTP server that serves
up files from our server site.

378
00:32:45,356 --> 00:32:48,260
[MUSIC]