1
00:00:00,240 --> 00:00:00,750
Beautiful.

2
00:00:00,780 --> 00:00:02,730
We're done with our basic example.

3
00:00:02,940 --> 00:00:11,700
Now let's tackle the big beast, our Nampara, and the setup for the following examples is really up

4
00:00:11,700 --> 00:00:12,060
to you.

5
00:00:12,450 --> 00:00:19,380
If you're not a fan of retyping something you have already learned, you don't have to do that.

6
00:00:19,390 --> 00:00:23,640
You can just remove that, get all the way to Abdol.

7
00:00:24,000 --> 00:00:30,870
So basically leave the airport as well as instantiation and listen as well.

8
00:00:31,200 --> 00:00:38,520
However, I am a fan of repeating something because I work whenever I need to create something from

9
00:00:38,520 --> 00:00:39,170
scratch.

10
00:00:39,480 --> 00:00:44,500
I already have done it quite a few times, so I don't have that blank page syndrome where you're like

11
00:00:44,520 --> 00:00:48,040
looking at the empty file and you don't know what to do.

12
00:00:48,390 --> 00:00:51,630
So in my case, I'm going to remove everything and we'll start from scratch.

13
00:00:51,630 --> 00:00:58,770
The concept express is equal to require and of course we're looking for Express and I'm going to set

14
00:00:58,770 --> 00:01:00,840
up my app that is equal to express.

15
00:01:00,840 --> 00:01:06,440
We invoke it and again, we go with app that listen and we're going to go with 5000.

16
00:01:06,630 --> 00:01:12,870
Now, I'm not saying that I'm going to do that for every example, but I'm just showcasing what is in

17
00:01:12,870 --> 00:01:16,290
my approach when I'm starting something new.

18
00:01:16,560 --> 00:01:22,590
So when I'm learning something new, yes, I do like to retype some of the stuff quite a few times because

19
00:01:22,950 --> 00:01:25,880
I just make sure that I remember it better.

20
00:01:26,130 --> 00:01:29,940
And in here I'm going to go with server is listening.

21
00:01:31,130 --> 00:01:40,720
On port, we go with 5000 and that, and in order to set everything up, we're going to go with an app

22
00:01:40,730 --> 00:01:43,100
that gets so again, I'm looking for the road.

23
00:01:43,370 --> 00:01:46,530
And of course, I would want to start with my next e-mail.

24
00:01:46,580 --> 00:01:46,920
Correct.

25
00:01:47,270 --> 00:01:48,260
That's the start.

26
00:01:48,780 --> 00:01:55,940
And we go with apps that get so we're listening for all incoming requests that go to our route.

27
00:01:56,300 --> 00:01:59,390
And of course, we're specifically listening for get requests.

28
00:01:59,730 --> 00:02:05,840
Then we have our callback function, Barack, and rest, and we'll set up the functionality in a second

29
00:02:06,230 --> 00:02:07,140
before we do anything.

30
00:02:07,140 --> 00:02:13,730
And let's also set up all and this is, of course, going to be for all the requests that will hit four

31
00:02:13,730 --> 00:02:14,180
or four.

32
00:02:14,420 --> 00:02:20,060
So we're going to go with Iraq and rest and here, let's say Araz and status.

33
00:02:20,300 --> 00:02:24,950
So let's add here a two hundred or I'm sorry, four for my bad.

34
00:02:25,190 --> 00:02:32,980
And then we're going to go with sand and instead of the sun, let's just go with the resource not found.

35
00:02:33,440 --> 00:02:39,560
Now, when it comes to get in this case, I would want to send a file more specifically, I would want

36
00:02:39,560 --> 00:02:42,160
to send back the index HDMI.

37
00:02:42,590 --> 00:02:48,920
And in order to do that, I need to use file method that comes with Xpress.

38
00:02:49,430 --> 00:02:52,880
Now, in there, though, I do need to provide a absolute path.

39
00:02:53,180 --> 00:02:56,390
So we'll have to use one of the modules we covered before.

40
00:02:56,540 --> 00:02:58,460
And that is going to be a path module.

41
00:02:58,760 --> 00:03:05,420
So I go with const path is equal to require and I'm looking for a path module again.

42
00:03:05,420 --> 00:03:06,320
We don't have to install.

43
00:03:06,320 --> 00:03:10,970
It comes preinstalled with node, so we are in good shape.

44
00:03:11,240 --> 00:03:19,640
And then where we have our callback function, we go it araz and send file method and here let's pass

45
00:03:19,640 --> 00:03:24,620
in path and then resolve the path that resolve.

46
00:03:24,620 --> 00:03:30,680
Remember that was one of the methods we cover and effectively I would want to pass in their name.

47
00:03:31,430 --> 00:03:36,830
So this is going to be a path to our directory because we do need to provide that absolute path.

48
00:03:37,100 --> 00:03:42,200
And then of course we're looking for our index, which is sitting in that bar up.

49
00:03:42,200 --> 00:03:45,380
So forward slash and then nav bar.

50
00:03:46,360 --> 00:03:51,830
Half an up and then we have another Ford slash index HMO.

51
00:03:52,150 --> 00:03:58,480
Now we have to be perfectly honest in this case, we can also use path that Jordan doesn't really matter

52
00:03:58,480 --> 00:04:01,040
since their name provides that absolute path.

53
00:04:01,420 --> 00:04:06,670
But just to be a bit explicit that we are providing absolute path.

54
00:04:06,670 --> 00:04:14,970
I went with path dot result and under their name and mine, whatever is the path to my index HMO and

55
00:04:14,980 --> 00:04:21,070
the moment we save it will have the same errors, just like in the deep module.

56
00:04:21,339 --> 00:04:26,710
So I go to my local five thousand and I still have the same issues I still don't have.

57
00:04:26,710 --> 00:04:33,370
Styles's says there's no sign of browser up as well as the logo now and Express.

58
00:04:33,370 --> 00:04:40,420
Though we don't have to do this whole song and dance like in a deep module and express.

59
00:04:40,420 --> 00:04:48,400
I can simply go above all my Abdah get that alse and I can go with an app that you use.

60
00:04:48,760 --> 00:04:54,970
And this is going to be the case where I'll type out the code and then I'll explain everything that

61
00:04:54,970 --> 00:04:57,920
is happening and will pass in the express.

62
00:04:57,940 --> 00:05:00,130
So this is what we're importing.

63
00:05:00,550 --> 00:05:03,040
So this is not going to be our server instance.

64
00:05:03,260 --> 00:05:06,700
Instead, we're going to go with express and static.

65
00:05:06,970 --> 00:05:08,080
That's the method.

66
00:05:08,260 --> 00:05:10,900
And in here, again, we just need to provide a path.

67
00:05:11,110 --> 00:05:15,340
Now, common name is setting this up as the folder by the name of public.

68
00:05:15,730 --> 00:05:18,070
Please keep in mind, technically, you don't have to do that.

69
00:05:18,070 --> 00:05:21,100
You can just point to our nabob.

70
00:05:21,280 --> 00:05:22,990
But in my case, I will do that.

71
00:05:23,290 --> 00:05:28,470
I will set up here that forward slash and I'll call this public.

72
00:05:28,480 --> 00:05:36,190
So now, of course, what I need is to set up a folder by the name of public and then all my static

73
00:05:36,340 --> 00:05:39,660
resources, all my static files, I would want to transfer them.

74
00:05:39,940 --> 00:05:40,900
Now, don't worry about it.

75
00:05:40,900 --> 00:05:46,690
I'll cover in length what in a servalan means static resources for now.

76
00:05:46,690 --> 00:05:53,500
What I would want you to do is go back to our folder and that is going to be Turrill.

77
00:05:53,950 --> 00:05:56,050
And of course you can do that in visual pseudocode.

78
00:05:56,050 --> 00:05:59,290
I just think that this is going to be a bit easier to see.

79
00:05:59,290 --> 00:06:00,940
So I'm going to create a new folder.

80
00:06:01,120 --> 00:06:05,860
Again, Common Convention is calling this public, but you can call it whatever.

81
00:06:05,860 --> 00:06:07,480
Lobster doesn't really matter.

82
00:06:07,780 --> 00:06:11,080
And then in my case, I'm just going to copy these files.

83
00:06:11,350 --> 00:06:16,090
So take browser up, take a logo and take styles if you want.

84
00:06:16,090 --> 00:06:16,890
You can move them.

85
00:06:17,020 --> 00:06:22,450
Just remember that the previous code is not going to work as far as the HTP module setup.

86
00:06:22,690 --> 00:06:27,520
So I'm going to copy these ones and pasted here in my public.

87
00:06:27,760 --> 00:06:32,700
So now of course I have browser up logos and style access.

88
00:06:33,100 --> 00:06:38,950
So of course now I can zoom out and once I save.

89
00:06:39,870 --> 00:06:45,520
Check it out when we navigate to our route, there it is.

90
00:06:45,840 --> 00:06:52,700
This is our application and what's really cool, all of those resources are right away available.

91
00:06:52,950 --> 00:06:59,370
So if I go to my localhost five thousand remember, browser was looking for what it was looking, for

92
00:06:59,370 --> 00:07:01,320
example, for style access.

93
00:07:01,620 --> 00:07:05,820
If you go here, there is a resource by the name of solstices.

94
00:07:06,150 --> 00:07:14,970
And of course in here I have all my access code and notice how we didn't have to set up the statuses.

95
00:07:14,970 --> 00:07:18,540
We didn't have to set up the content types or any of that.

96
00:07:18,990 --> 00:07:21,090
Express takes care of it all.

97
00:07:21,480 --> 00:07:25,470
Now, of course, you probably at this point have more questions than answers.

98
00:07:25,680 --> 00:07:27,270
So let me start clearing them up.

99
00:07:27,540 --> 00:07:34,710
And first, I'm just going to add a comment of setup static and lower and lower.

100
00:07:35,190 --> 00:07:40,170
And like I mentioned above, that use is for setting up the middleware.

101
00:07:40,530 --> 00:07:44,100
And we have more serious examples coming up.

102
00:07:44,790 --> 00:07:50,340
So for the time being, please don't worry about this line, so please don't worry about that use.

103
00:07:50,520 --> 00:07:53,850
What is the express static that is essentially a built in middleware.

104
00:07:54,240 --> 00:07:58,140
I will cover everything step by step in this video.

105
00:07:58,140 --> 00:08:05,220
I want you to understand what the term static asset means, and it simply means that it is a file.

106
00:08:05,460 --> 00:08:07,680
That server doesn't have to change it.

107
00:08:08,460 --> 00:08:18,390
So instead of our HTP example where we created a path for every such resource, and if I were to have,

108
00:08:18,390 --> 00:08:24,840
I don't know, twenty thousand images, I would have to repeat the same steps instead.

109
00:08:25,150 --> 00:08:33,210
Since this is a static asset, meaning an asset where the server doesn't need to change it, we simply

110
00:08:33,480 --> 00:08:36,360
place it in designated folder.

111
00:08:36,590 --> 00:08:44,670
Again, the common name for those folders are public or static and then we just dump all those assets

112
00:08:44,670 --> 00:08:45,020
in there.

113
00:08:45,420 --> 00:08:53,220
So if I were to have, I don't know, twenty thousand extra images in here, I can just dump them and

114
00:08:53,220 --> 00:08:54,690
Express will take care of it all.

115
00:08:55,140 --> 00:09:01,830
It will set up the path, it will set up the MYM types, it will set up the status code and all of that

116
00:09:01,830 --> 00:09:02,370
good stuff.

117
00:09:02,730 --> 00:09:03,930
So hopefully that is clear.

118
00:09:04,500 --> 00:09:09,450
Static assets are just files of that server doesn't have to change.

119
00:09:09,750 --> 00:09:17,460
And an example of a static asset is an image file is the style file and also a JavaScript file.

120
00:09:18,210 --> 00:09:20,040
And here comes the next question.

121
00:09:20,670 --> 00:09:24,780
Well, what is this guy with weird Eastern European accent talking about?

122
00:09:25,380 --> 00:09:32,070
Because all my life I've been told that the JavaScript makes my apps dynamic.

123
00:09:32,880 --> 00:09:34,890
It adds all the functionality.

124
00:09:35,520 --> 00:09:38,270
So how come this is just another static asset?

125
00:09:38,970 --> 00:09:41,700
And to answer your question, yeah, you're right.

126
00:09:42,090 --> 00:09:46,110
JavaScript does make our apps dynamic.

127
00:09:46,500 --> 00:09:47,970
However, think about it.

128
00:09:48,180 --> 00:09:52,110
This is a browser app, so it makes dynamic on the browser.

129
00:09:52,740 --> 00:09:56,340
As far as service is concerned, it is just a ASEP.

130
00:09:56,340 --> 00:10:02,340
Does it need to change now if you're wondering, well, how to set up something dynamic, just please

131
00:10:02,340 --> 00:10:08,070
put the pin on that and we're going to cover that when we cover server side rendering because there

132
00:10:08,100 --> 00:10:10,740
is such thing as template engines.

133
00:10:11,130 --> 00:10:18,030
And the simplest way for me to explain is imagine a scenario where you can actually log in.

134
00:10:19,020 --> 00:10:25,950
Or, in other words, just showcase whoever is visiting the site and then dynamically hour display,

135
00:10:25,950 --> 00:10:26,870
for example, name.

136
00:10:27,330 --> 00:10:34,030
So if the logs in that I'm sending back the e-mail with a text of Hi, Peter.

137
00:10:34,260 --> 00:10:41,160
Now, if the John Logsdon and of course, I'm sending back the username with the value of John, so

138
00:10:41,160 --> 00:10:48,510
hopefully you get the gist where in this case, no, this is just same old indexed HTML that I'm sending

139
00:10:48,510 --> 00:10:51,110
back, regardless of who is visiting the site.

140
00:10:51,120 --> 00:10:57,510
But yes, there's also an option of setting this dynamically where depending on who is visiting the

141
00:10:57,510 --> 00:11:05,190
site or what the user is trying to do, I'm actually modifying my file before I'm sending it back.

142
00:11:05,610 --> 00:11:13,140
So hopefully it is clear how much easier it is to work with Express, where if we have static assets,

143
00:11:13,410 --> 00:11:21,750
we just set up a designated folder and just dump them all in static assets just means a file that doesn't

144
00:11:21,750 --> 00:11:22,470
need to change.

145
00:11:22,810 --> 00:11:26,430
And of course, we can start working on our next example.