1
00:00:05,250 --> 00:00:10,740
Welcome to our first coding challenge under Node.js.

2
00:00:11,250 --> 00:00:14,250
So let's have a look at what we are going to do.

3
00:00:14,490 --> 00:00:22,200
First, we are going to create a server to render two pages with different content.

4
00:00:22,230 --> 00:00:24,030
The first task.

5
00:00:24,450 --> 00:00:34,920
The second task is use the FS module to create a main folder called public and to subfolders.

6
00:00:34,920 --> 00:00:38,250
That is pages and CSS folder.

7
00:00:39,060 --> 00:00:45,300
And we are going to create two, three files, two in the pages folder.

8
00:00:45,330 --> 00:00:48,660
That is a homepage and then about RS.

9
00:00:48,710 --> 00:00:50,310
Dot a HTML.

10
00:00:50,850 --> 00:00:57,630
And inside the CSS folder you are going to create the style CSS.

11
00:00:57,630 --> 00:01:02,880
And lastly, create a server to save these files.

12
00:01:04,190 --> 00:01:11,480
Well they take note here is that creating of the four days we are not going to use the manual way for

13
00:01:11,480 --> 00:01:20,030
example right clicking and create a for or public you are going to use the FS module to create all the

14
00:01:20,030 --> 00:01:22,190
folders and files.

15
00:01:22,400 --> 00:01:25,760
This challenge seems to be a challenge, right?

16
00:01:26,000 --> 00:01:28,250
Don't worry, just give it a try.

17
00:01:28,580 --> 00:01:34,160
If you are ready, post this video and give a try to this challenge.

18
00:01:34,580 --> 00:01:38,060
After that, I'm going to show you my solution.

19
00:01:51,430 --> 00:01:55,090
So let me show you how I'm going to solve this challenge.

20
00:01:55,150 --> 00:01:59,330
This video is going to be a little bit longer, so pardon me with that.

21
00:01:59,350 --> 00:02:05,110
So on the same file, I have commented out all what we did in the previous video.

22
00:02:05,110 --> 00:02:08,100
So what I need is these two modules.

23
00:02:08,110 --> 00:02:16,450
So come down here and let me paste it here as that and let me remove the comment as that.

24
00:02:16,450 --> 00:02:23,620
So let me have a beautiful comment says solution as that perfect.

25
00:02:23,620 --> 00:02:25,690
So now let's get rocking.

26
00:02:26,170 --> 00:02:29,590
The first step is I need to create the server.

27
00:02:29,590 --> 00:02:39,070
So the server instance cost the server is equal to eight http dot create server.

28
00:02:39,070 --> 00:02:44,950
And this what I want, I need the instance of the server and that is it.

29
00:02:45,280 --> 00:02:51,910
And down here listen to the server that is run the server.

30
00:02:51,910 --> 00:03:00,520
So on the server we have a method called listen and for this part let's use 8000.

31
00:03:00,550 --> 00:03:02,590
The next is my callback function.

32
00:03:02,590 --> 00:03:10,600
Remember console.log is a function so just console log and says that server is running.

33
00:03:13,260 --> 00:03:14,190
Has that.

34
00:03:14,190 --> 00:03:14,700
So.

35
00:03:14,730 --> 00:03:16,140
Moment of truth.

36
00:03:16,260 --> 00:03:18,630
So back to my terminal here.

37
00:03:18,780 --> 00:03:26,430
Let me run the application node server and could see that server is running, which is this.

38
00:03:26,640 --> 00:03:31,050
Now I have finished creating the instance of my server.

39
00:03:31,320 --> 00:03:37,470
The next step is let's go ahead and create those folders as is stated.

40
00:03:38,170 --> 00:03:43,300
So down here, let's go ahead and create the folder.

41
00:03:43,300 --> 00:03:45,550
So create public.

42
00:03:46,560 --> 00:03:48,060
Let's create folders.

43
00:03:49,100 --> 00:03:49,580
All right.

44
00:03:49,580 --> 00:03:52,550
So let me bring this one here before the server.

45
00:03:52,820 --> 00:03:53,280
Okay.

46
00:03:53,300 --> 00:03:55,060
Here, the first step.

47
00:03:55,070 --> 00:03:57,590
So how are you going to create a folder?

48
00:03:57,620 --> 00:03:59,750
Remember, we make use of what?

49
00:03:59,750 --> 00:04:01,730
The FS module.

50
00:04:01,790 --> 00:04:03,110
So here we go.

51
00:04:03,230 --> 00:04:05,120
So f s dots.

52
00:04:05,120 --> 00:04:08,840
I'm k d i r and the name of the folder.

53
00:04:08,870 --> 00:04:14,400
The question says two folders public and then the SLC folder.

54
00:04:14,420 --> 00:04:16,720
So here you pass in the folder name.

55
00:04:16,730 --> 00:04:23,150
The question says that you should create two folders public and then inside we have to subfolders pages

56
00:04:23,150 --> 00:04:23,930
and CCIS.

57
00:04:23,930 --> 00:04:31,550
So for the meantime, let's create a public folder and as always you pass in a callback function.

58
00:04:31,550 --> 00:04:37,130
I'll start and if there are some errors, you're going to get it here as that.

59
00:04:37,130 --> 00:04:42,950
And let's check if error we are going to console.log the.

60
00:04:44,450 --> 00:04:45,470
Error here.

61
00:04:46,520 --> 00:04:55,160
Otherwise we will console.log and say that Fodor has been.

62
00:04:56,870 --> 00:04:57,920
Created.

63
00:04:58,780 --> 00:05:05,440
All right, so let's run a server again, click the console and then restart the server.

64
00:05:05,470 --> 00:05:09,070
Now folder has been created, so let's check it out.

65
00:05:10,190 --> 00:05:16,880
Indeed we have the folder being created by insists that we should create additional or stuff order.

66
00:05:16,880 --> 00:05:22,970
So here to create a folder we're going to make use of force slash and the name of the folder are going

67
00:05:22,970 --> 00:05:24,320
to be pages.

68
00:05:24,320 --> 00:05:26,330
So now moment of truth.

69
00:05:26,570 --> 00:05:31,130
So again, because I've made changes to my server, I need to restart it.

70
00:05:31,130 --> 00:05:34,100
So now folder has been created, check it out.

71
00:05:34,100 --> 00:05:41,240
And inside the public we have pages folder and then last folder is going to be the case folder.

72
00:05:41,360 --> 00:05:42,050
You get it?

73
00:05:42,050 --> 00:05:43,040
Yes, I get it.

74
00:05:43,040 --> 00:05:44,510
So CSS folder.

75
00:05:45,290 --> 00:05:50,600
Now again, let's run the server again and here we go.

76
00:05:50,600 --> 00:05:53,450
Folder has been created inside a public.

77
00:05:53,450 --> 00:06:02,480
We have two folders that is great or better so we can we run the code at once that is a public forward

78
00:06:02,480 --> 00:06:03,440
slide forward slash.

79
00:06:03,440 --> 00:06:05,900
We get it by I think the easiest way to go.

80
00:06:06,500 --> 00:06:09,890
That is the first the second task we are done with that.

81
00:06:10,160 --> 00:06:18,980
The next task is create three files, two in the pages folder called pages and about dot HTML.

82
00:06:19,400 --> 00:06:23,300
So let's go ahead and create those files.

83
00:06:23,300 --> 00:06:29,510
So here creates files, create files and less common.

84
00:06:29,510 --> 00:06:32,360
This one otherwise is going to run again.

85
00:06:32,690 --> 00:06:35,330
So here we go to create a file.

86
00:06:35,330 --> 00:06:39,470
I'm going to use the FS module, going to be write file.

87
00:06:40,010 --> 00:06:44,060
So next is I need to pass in the file that I want to create.

88
00:06:44,060 --> 00:06:49,730
The question is we need to create home a HTML and about a HTML.

89
00:06:49,970 --> 00:06:51,800
So I need to pass in the path.

90
00:06:51,800 --> 00:06:55,220
Remember, I want to create inside the pages folder.

91
00:06:55,220 --> 00:07:05,570
So I will go to the public folder for a slash pages and then force slash home dot HTML and that is the

92
00:07:05,570 --> 00:07:07,100
file I want to create.

93
00:07:07,280 --> 00:07:13,970
So the next agreement is a content that we want to write onto the file because you are going to write

94
00:07:13,970 --> 00:07:15,740
a HTML onto the page.

95
00:07:15,740 --> 00:07:21,170
Let's use backtrack so I can bring it down here to have more room.

96
00:07:21,170 --> 00:07:23,520
So let me open the back take.

97
00:07:23,540 --> 00:07:32,540
Now here I can write any HTML syntax, so let's create a simple HTML syntax here as that and let me

98
00:07:32,540 --> 00:07:40,070
close the div as that and let's add h one and says that welcome home.

99
00:07:41,530 --> 00:07:52,750
And let's close the H one and let's add some P tag here and says that where this is home.

100
00:07:53,490 --> 00:07:54,480
Page.

101
00:07:54,570 --> 00:07:56,940
And let me close the pea.

102
00:07:57,300 --> 00:08:00,600
Now, the next argument going to be a callback function.

103
00:08:00,600 --> 00:08:09,750
So after this one, after this, you need to add comma and then the callback function, let's use normal

104
00:08:09,750 --> 00:08:13,170
function here and we have access to error.

105
00:08:13,170 --> 00:08:14,700
So let's check it out here.

106
00:08:14,880 --> 00:08:26,130
So if error, then why not you go ahead and console.log the error, save it otherwise, or else we will

107
00:08:26,130 --> 00:08:29,670
console.log and save that file.

108
00:08:30,660 --> 00:08:31,530
Create it.

109
00:08:31,560 --> 00:08:33,270
Moment of truth.

110
00:08:33,309 --> 00:08:39,820
Okay, so now let's clear the console and start a server again.

111
00:08:39,840 --> 00:08:40,350
Yes.

112
00:08:40,350 --> 00:08:41,419
File created.

113
00:08:41,429 --> 00:08:43,950
So let's see inside the pages.

114
00:08:43,950 --> 00:08:47,610
And indeed we have the home page.

115
00:08:47,640 --> 00:08:49,590
These ones are from the previous video.

116
00:08:49,590 --> 00:08:49,830
Right.

117
00:08:49,830 --> 00:08:52,290
So don't worry about this one because on the pages.

118
00:08:52,410 --> 00:08:57,270
But the question says that we should create two files.

119
00:08:57,270 --> 00:08:59,730
One is a home and about.

120
00:08:59,730 --> 00:09:07,920
So instead of home here we are going to create about and now let's say welcome.

121
00:09:08,040 --> 00:09:09,600
Let's say about.

122
00:09:09,900 --> 00:09:11,370
Let's say about.

123
00:09:11,370 --> 00:09:14,070
And this is about page.

124
00:09:15,490 --> 00:09:17,230
Is that so again?

125
00:09:17,320 --> 00:09:21,480
Run the server again, click the console and then lets restart it.

126
00:09:21,490 --> 00:09:23,170
Now file created.

127
00:09:23,170 --> 00:09:28,600
And indeed we have two files about an homepage.

128
00:09:28,600 --> 00:09:32,890
So now we are done with this once.

129
00:09:33,730 --> 00:09:37,180
No last one is here, which is the case file.

130
00:09:37,210 --> 00:09:38,620
So the same thing.

131
00:09:38,680 --> 00:09:42,490
I'm going to use the same function to create a file.

132
00:09:43,060 --> 00:09:47,230
So to create the case you are going to create inside the case folder.

133
00:09:47,230 --> 00:09:57,830
So here instead of pages is going to be the case and now it's going to be style dot CSS, dot cc.

134
00:09:57,850 --> 00:09:59,620
And there you go.

135
00:09:59,680 --> 00:10:01,190
So what about the contents?

136
00:10:01,210 --> 00:10:10,510
Let's add a simple CSS here says H one, and then let's give it a color of, say, red.

137
00:10:10,540 --> 00:10:16,030
Now let's save it and let's try to restart our server.

138
00:10:16,300 --> 00:10:20,260
Click the console and have a look file created.

139
00:10:20,290 --> 00:10:25,630
Now indeed, we have this CSS being added on to the file.

140
00:10:25,870 --> 00:10:33,910
Now we are done with the whole logic with the exception of rendering the pages.

141
00:10:34,120 --> 00:10:40,490
So now let's commence these ones out here, the functions that we have created.

142
00:10:40,510 --> 00:10:41,590
We are done with that.

143
00:10:41,590 --> 00:10:45,220
Now let's come back to the actual server implementation.

144
00:10:45,670 --> 00:10:51,990
So when a server is running, we need to listen to an event.

145
00:10:52,000 --> 00:10:54,040
So down here.

146
00:10:55,320 --> 00:10:58,000
Listen to events.

147
00:10:58,030 --> 00:11:08,460
Remember on the server, we are going to listen to an event which is on and on that we can check the

148
00:11:08,460 --> 00:11:11,400
you are or the user is trying to request.

149
00:11:11,610 --> 00:11:20,310
So here server dot on meaning we are ready to listen to an event and the event type here are going to

150
00:11:20,310 --> 00:11:21,450
be requests.

151
00:11:21,450 --> 00:11:28,560
And here we pass in a callback function which have access to my requests or to a request and response.

152
00:11:28,590 --> 00:11:30,000
It is the my request.

153
00:11:30,330 --> 00:11:32,700
Okay, so let's use a real function this time around.

154
00:11:32,700 --> 00:11:36,360
I have access to the request and response as that.

155
00:11:36,660 --> 00:11:38,640
Now here we go.

156
00:11:38,940 --> 00:11:43,110
Well, we have a couple of ways to render those files as we did before.

157
00:11:43,110 --> 00:11:47,010
So the first step is get the you are error.

158
00:11:47,310 --> 00:11:55,350
So as we did const you are error we can get you are error and I request that you are URL as we did before.

159
00:11:55,620 --> 00:12:01,910
So let's check if the you are error is equal to false slash.

160
00:12:01,920 --> 00:12:03,480
That is the home page.

161
00:12:03,480 --> 00:12:10,750
What we are going to do is we need to read the file, the home page and then pass it to the rest dot

162
00:12:10,770 --> 00:12:13,830
right to be able to send to the user.

163
00:12:14,250 --> 00:12:15,600
So here we go.

164
00:12:15,900 --> 00:12:24,390
So let's say read the file on the HTML on the home dot HTML.

165
00:12:24,630 --> 00:12:29,220
So here we go, make use of the file module and then read file.

166
00:12:29,430 --> 00:12:33,630
And here we need to know the file that we want to read.

167
00:12:33,960 --> 00:12:36,960
At this point, we have two ways of doing it.

168
00:12:37,230 --> 00:12:42,510
Let me show you the first, the easiest way, and let me show you the other way, which is most recommended.

169
00:12:42,600 --> 00:12:47,160
So as we did, we need to locate the file that we want to read.

170
00:12:47,190 --> 00:12:53,130
And lucky for us, it is inside the public folder pages and then home.

171
00:12:53,130 --> 00:13:03,900
So here we need to trace the path so public and then force slash pages and forward slash home dot HTML.

172
00:13:03,900 --> 00:13:08,340
And the next argument going to be a callback function that we want.

173
00:13:08,340 --> 00:13:11,310
So here we have access to the error.

174
00:13:11,310 --> 00:13:14,850
So let's check if error, why not?

175
00:13:14,850 --> 00:13:18,810
We will go ahead and then console.log the error.

176
00:13:19,200 --> 00:13:28,590
Otherwise we are going to display a message says that well file has been loaded, but instead we are

177
00:13:28,590 --> 00:13:31,170
going to write and send to the user.

178
00:13:31,170 --> 00:13:39,240
So here I'm going to make use of red dot right head as we did before and it passed in the status quo

179
00:13:39,270 --> 00:13:44,130
200, which simply means okay then you pass in the content type.

180
00:13:44,160 --> 00:13:47,880
This time around you are going to send only a HTML.

181
00:13:48,000 --> 00:13:53,940
So the value is going to be text for a slash a HTML and that is it.

182
00:13:53,940 --> 00:14:00,960
So next is we want to sign the response or data to the user which is red dot, right.

183
00:14:00,960 --> 00:14:08,070
And you want to send the data so you have access to the data also as a callback function here, the

184
00:14:08,070 --> 00:14:11,160
actual data after you read from this file.

185
00:14:11,280 --> 00:14:14,370
So here are going to send the data to the user.

186
00:14:14,370 --> 00:14:22,740
And lastly, we want to end the response because we are done the server has done sending the response.

187
00:14:22,740 --> 00:14:24,270
We need to end it here.

188
00:14:24,510 --> 00:14:33,060
So now let's try again and then restart our server if everything is going to be all right.

189
00:14:33,330 --> 00:14:39,510
So back to our terminal here, let's make sure that we restart our server.

190
00:14:39,840 --> 00:14:44,310
And now let's go to this where we left the previous video.

191
00:14:44,340 --> 00:14:45,780
This is our server, right?

192
00:14:45,780 --> 00:14:56,010
So here the port is 8000 so let's change to look our host colon 8000 and now something incredible is

193
00:14:56,010 --> 00:15:04,680
happening nothing is rendering oh batter by side instead of triple equal to I use assignment operator

194
00:15:04,830 --> 00:15:15,690
sorry guys so he is supposed to be at triple equal to as that so let's make sure that I restart the

195
00:15:15,690 --> 00:15:22,830
server again and let's check it out, refresh it and work from home.

196
00:15:22,860 --> 00:15:24,180
That is great.

197
00:15:24,180 --> 00:15:25,650
Perfect, guys.

198
00:15:26,040 --> 00:15:26,370
All right.

199
00:15:26,370 --> 00:15:28,050
Let's finish up the last task.

200
00:15:28,050 --> 00:15:32,640
That is the rendering the about page and I'll show you something.

201
00:15:32,820 --> 00:15:36,990
So again, for this one, we can copy the if statement.

202
00:15:36,990 --> 00:15:40,260
The difference here is the location of the path.

203
00:15:40,260 --> 00:15:43,650
So here are going to be about page.

204
00:15:44,930 --> 00:15:52,930
So here, if the u r l is equal to about, then the location or the file is going to be the about a

205
00:15:52,970 --> 00:15:57,110
HTML template, which is this one, and that is it and that is it.

206
00:15:57,110 --> 00:16:00,500
So let's try to restart the server again.

207
00:16:00,620 --> 00:16:03,320
So let's go to four slash.

208
00:16:04,400 --> 00:16:12,380
About and indeed we have about page now we are done with the whole solution about the challenge.

209
00:16:12,770 --> 00:16:15,800
But guys, we have some problems here.

210
00:16:16,220 --> 00:16:19,910
So let's say that we have deployed this particular application.

211
00:16:20,030 --> 00:16:27,650
Well, what you are going to face is that the location of a file varies depending on operating system.

212
00:16:28,190 --> 00:16:35,060
So to make sure that we have dynamic path to the file, we are going to modify this one a little bit

213
00:16:35,240 --> 00:16:37,190
using the journey.

214
00:16:37,610 --> 00:16:44,120
So what we are going to do is that we are going to make the location of the file more dynamic, irrespective

215
00:16:44,120 --> 00:16:45,770
of the operating system.

216
00:16:45,800 --> 00:16:55,100
A user might be using to access our application and and the path we talk about join and the base name

217
00:16:55,100 --> 00:16:59,820
and the name and remember you talk about path module.

218
00:16:59,840 --> 00:17:02,010
So let's see how we are going to do this once.

219
00:17:02,210 --> 00:17:05,180
So I'm going to use it inside the about page.

220
00:17:05,180 --> 00:17:09,680
When we finish, we can also modify this code and use it as well.

221
00:17:10,130 --> 00:17:14,839
So what I going to do is that we are going to work on the location of this file.

222
00:17:15,170 --> 00:17:15,619
All right.

223
00:17:15,619 --> 00:17:18,020
So here these are going to be.

224
00:17:18,200 --> 00:17:22,190
So the first step is let's require the path module.

225
00:17:22,220 --> 00:17:30,410
So const path is equal to require the path module.

226
00:17:30,950 --> 00:17:39,620
So down here and I about page here or route, let's get the location of the file.

227
00:17:39,770 --> 00:17:43,710
So here is going to be get comments here.

228
00:17:44,660 --> 00:17:48,500
Get the file location.

229
00:17:49,340 --> 00:17:50,990
Location.

230
00:17:51,080 --> 00:17:51,530
All right.

231
00:17:51,530 --> 00:17:59,960
So going to use const, then the file path is equal to path dot joint.

232
00:17:59,960 --> 00:18:01,790
So what does this mean?

233
00:18:02,000 --> 00:18:10,970
It means that we want to get the actual path because one, you want to know the name, that's the location

234
00:18:10,970 --> 00:18:18,710
or the current working directly of this particular file and then the folder and inside that you want

235
00:18:18,710 --> 00:18:19,910
the actual file.

236
00:18:20,090 --> 00:18:27,950
So for the meantime, before we finish up this one, let's try to console.log the name as we did before.

237
00:18:28,770 --> 00:18:33,180
And the path module, it's going to be underscore underscore it.

238
00:18:33,750 --> 00:18:38,130
So let's try to run the server and see what the name represents.

239
00:18:38,130 --> 00:18:43,650
So again, and let's go to about let's refresh it and now check it out.

240
00:18:43,680 --> 00:18:47,550
You could see that this is my journey for me.

241
00:18:47,550 --> 00:18:53,310
My name is uses the name of my operating system, desktop and then web server folder.

242
00:18:53,310 --> 00:18:59,880
So now we know that we can get the name as this and going to be dynamic irrespective of your operating

243
00:18:59,880 --> 00:19:00,510
system.

244
00:19:00,510 --> 00:19:03,900
So now we know what the name represents.

245
00:19:04,170 --> 00:19:07,590
So next is you pass in the name as that.

246
00:19:07,590 --> 00:19:11,910
The next is the folder where the files are located.

247
00:19:11,910 --> 00:19:22,080
It's inside the public folder and then comma and the file that we want, which is about dot HTML.

248
00:19:22,320 --> 00:19:28,050
So this line of course simply means that you want a file inside the public folder.

249
00:19:28,080 --> 00:19:32,280
So if you try to console.log the file path.

250
00:19:34,230 --> 00:19:35,400
Firepower.

251
00:19:35,520 --> 00:19:38,340
Let's see what the firepower represents.

252
00:19:39,890 --> 00:19:40,670
As that.

253
00:19:40,670 --> 00:19:43,190
And let's get back to Node started.

254
00:19:43,190 --> 00:19:50,930
And now you can see that now we have the path to the file that is about HTML.

255
00:19:51,320 --> 00:19:53,600
But there is something wrong here.

256
00:19:53,870 --> 00:20:02,630
This about the HTML is not directly inside the public folder, but instead it is inside pages folder.

257
00:20:02,780 --> 00:20:09,500
So what we need to do is to make sure that we add forward slash and pages, which goes like this one.

258
00:20:09,800 --> 00:20:17,270
We want the de name which represents the current folder and then going into the public and pages and

259
00:20:17,270 --> 00:20:19,250
take about the HTML.

260
00:20:19,520 --> 00:20:29,710
So here, if we if we save it and then restart the server and then we go to about refresh it and none

261
00:20:29,720 --> 00:20:34,780
we see that now we have the path which is this public and then pages.

262
00:20:34,790 --> 00:20:40,790
So now instead of the hardcoded path here, we can use this dynamic path.

263
00:20:40,880 --> 00:20:44,720
Now let's restart the server, play the console.

264
00:20:46,940 --> 00:20:48,490
And have a look.

265
00:20:48,500 --> 00:20:50,180
Now, let's refresh it.

266
00:20:50,510 --> 00:20:55,490
And you can see that it's still the same and this is the ideal way to go.

267
00:20:55,520 --> 00:21:00,830
So you can modify the home route or you are allowed to use this format.

268
00:21:00,860 --> 00:21:01,520
All right.

269
00:21:01,520 --> 00:21:02,540
Thanks for watching.