1
00:00:02,120 --> 00:00:04,620
Now to bring back our styles,

2
00:00:04,620 --> 00:00:06,480
we need to make sure that, a,

3
00:00:06,480 --> 00:00:09,700
our links to the style files are correct.

4
00:00:09,700 --> 00:00:12,600
They theoretically are, but still it's not working.

5
00:00:12,600 --> 00:00:15,470
And therefore, we also need to make sure that, b,

6
00:00:15,470 --> 00:00:19,320
we kind of serve these style and script files

7
00:00:19,320 --> 00:00:22,950
because that's the part that's currently missing.

8
00:00:22,950 --> 00:00:26,240
Yes, theoretically the links to the style files

9
00:00:26,240 --> 00:00:27,620
should be correct,

10
00:00:27,620 --> 00:00:32,619
but it is super important to understand that now here,

11
00:00:33,130 --> 00:00:35,380
since we have our custom server,

12
00:00:35,380 --> 00:00:39,230
we have to explicitly define which requests

13
00:00:39,230 --> 00:00:41,380
we wanna allow and handle

14
00:00:41,380 --> 00:00:44,810
and any request that's not listed here

15
00:00:44,810 --> 00:00:46,640
in this app.js file.

16
00:00:46,640 --> 00:00:49,100
So any request that doesn't have a route

17
00:00:49,100 --> 00:00:50,913
that we handle won't work.

18
00:00:51,830 --> 00:00:52,940
So therefore let's understand

19
00:00:52,940 --> 00:00:55,920
what happens here on /recommend, for example,

20
00:00:55,920 --> 00:00:59,010
if we open the network tab in the dev tools.

21
00:00:59,010 --> 00:01:02,240
If I reload, we see a couple of failing requests here,

22
00:01:02,240 --> 00:01:06,700
and these are the requests to the CSS and JavaScript files.

23
00:01:06,700 --> 00:01:09,090
Now it is super important to understand

24
00:01:09,090 --> 00:01:12,880
and recognize that these are standalone requests.

25
00:01:12,880 --> 00:01:15,100
That's how a website works.

26
00:01:15,100 --> 00:01:17,340
We didn't have to think about that before

27
00:01:17,340 --> 00:01:19,710
in this course because it didn't matter.

28
00:01:19,710 --> 00:01:21,700
But now it does matter.

29
00:01:21,700 --> 00:01:23,450
When we visit a website,

30
00:01:23,450 --> 00:01:26,670
we don't just have one request for everything.

31
00:01:26,670 --> 00:01:31,240
Instead, we have one initial request for the HTML file

32
00:01:31,240 --> 00:01:35,240
and then that that HTML file might be linking

33
00:01:35,240 --> 00:01:38,230
to other resources like we're doing it here.

34
00:01:38,230 --> 00:01:40,980
And for every resource we link to,

35
00:01:40,980 --> 00:01:44,250
no matter if it's a CSS file, a JavaScript file

36
00:01:44,250 --> 00:01:47,420
or an image somewhere in our code,

37
00:01:47,420 --> 00:01:51,830
a separate HTTP request will be sent by the browser.

38
00:01:51,830 --> 00:01:55,300
So it's not one request that gets everything in one go,

39
00:01:55,300 --> 00:01:57,840
but instead it's one request for HTML,

40
00:01:57,840 --> 00:02:00,430
one request for each CSS file,

41
00:02:00,430 --> 00:02:02,830
one request for each JavaScript file,

42
00:02:02,830 --> 00:02:06,160
one request for each image and so on.

43
00:02:06,160 --> 00:02:09,949
And therefore separate requests are sent for CSS

44
00:02:09,949 --> 00:02:12,500
and JavaScript files here as well.

45
00:02:12,500 --> 00:02:14,750
But in app.js, we got no routes

46
00:02:14,750 --> 00:02:16,453
that would handle these requests.

47
00:02:17,640 --> 00:02:20,470
Now, of course you wouldn't probably think

48
00:02:20,470 --> 00:02:21,730
that's a bit annoying.

49
00:02:21,730 --> 00:02:26,010
If we have to define separate routes for all the CSS

50
00:02:26,010 --> 00:02:28,800
and JavaScript files that we wanna send back,

51
00:02:28,800 --> 00:02:31,760
that can get very annoying for bigger projects,

52
00:02:31,760 --> 00:02:34,320
where you split your styles and script code

53
00:02:34,320 --> 00:02:36,150
in many, many files,

54
00:02:36,150 --> 00:02:39,970
leave-alone projects where you also have images

55
00:02:39,970 --> 00:02:42,780
where you might have hundreds of images.

56
00:02:42,780 --> 00:02:46,620
You don't wanna define a bunch of routes for those

57
00:02:46,620 --> 00:02:48,190
and you would be right.

58
00:02:48,190 --> 00:02:50,320
That's why Express has a built in feature

59
00:02:50,320 --> 00:02:53,030
for exactly this use case

60
00:02:53,030 --> 00:02:57,230
that we have general static files that we wanna serve.

61
00:02:57,230 --> 00:02:59,337
By the way, I'm saying static files,

62
00:02:59,337 --> 00:03:01,940
these style and JavaScript files

63
00:03:01,940 --> 00:03:06,170
will never be touched or changed by the server-side code.

64
00:03:06,170 --> 00:03:09,130
They are pre-written and therefore static.

65
00:03:09,130 --> 00:03:11,120
They are not dynamic.

66
00:03:11,120 --> 00:03:14,340
At the moment, our HTML files are also static,

67
00:03:14,340 --> 00:03:16,720
but at least some of those will become dynamic

68
00:03:16,720 --> 00:03:18,170
later in the course.

69
00:03:18,170 --> 00:03:21,080
And therefore, I don't consider these HTML files

70
00:03:21,080 --> 00:03:23,490
as static files right now.

71
00:03:23,490 --> 00:03:27,350
But we definitely have the static CSS and JavaScript files.

72
00:03:27,350 --> 00:03:28,860
And therefore here,

73
00:03:28,860 --> 00:03:32,190
we can now register a special middleware,

74
00:03:32,190 --> 00:03:35,290
which we can do with the use method here, as you learned,

75
00:03:35,290 --> 00:03:37,140
which is built into Express

76
00:03:37,140 --> 00:03:40,100
that helps us with serving static files.

77
00:03:40,100 --> 00:03:44,380
And just as before for parsing incoming request bodies,

78
00:03:44,380 --> 00:03:46,170
we can access this middleware,

79
00:03:46,170 --> 00:03:51,170
which is built into Express directly on this Express thing.

80
00:03:51,390 --> 00:03:53,130
Yes, it is a function,

81
00:03:53,130 --> 00:03:56,750
but it also has object-like properties

82
00:03:56,750 --> 00:03:59,220
because in JavaScript functions actually

83
00:03:59,220 --> 00:04:01,690
are also objects under the hood,

84
00:04:01,690 --> 00:04:03,860
though we can ignore this right now.

85
00:04:03,860 --> 00:04:05,280
The most important thing is that

86
00:04:05,280 --> 00:04:08,280
we can use the dot notation here again.

87
00:04:08,280 --> 00:04:12,380
And we can now use the static method here,

88
00:04:12,380 --> 00:04:13,773
which it actually is.

89
00:04:15,140 --> 00:04:18,149
This sets up a request handler

90
00:04:18,149 --> 00:04:22,070
that will be executed on every incoming request

91
00:04:22,070 --> 00:04:27,070
that simply checks if this is a request for a static file,

92
00:04:27,250 --> 00:04:30,420
for something like a CSS or JavaScript file,

93
00:04:30,420 --> 00:04:35,010
and if it's able to deliver that file from some folder

94
00:04:35,010 --> 00:04:36,700
in the project folder.

95
00:04:36,700 --> 00:04:37,910
And for this to work,

96
00:04:37,910 --> 00:04:41,740
we need to pass one parameter value to static.

97
00:04:41,740 --> 00:04:45,300
And that's the name of the folder in our project

98
00:04:45,300 --> 00:04:49,410
that should hold any static files that we wanna serve.

99
00:04:49,410 --> 00:04:53,450
And you can pass any name of your choice as a string here,

100
00:04:53,450 --> 00:04:58,013
I'll go for public, which is a commonly chosen name here.

101
00:05:00,280 --> 00:05:03,950
And now I will also create a public folder next

102
00:05:03,950 --> 00:05:06,140
to the app.js file.

103
00:05:06,140 --> 00:05:08,800
A public is a name which is commonly chosen

104
00:05:08,800 --> 00:05:11,750
because it makes it very clear that any content

105
00:05:11,750 --> 00:05:14,773
in this folder will be available to the public.

106
00:05:17,010 --> 00:05:19,290
And that is something you wanna clarify,

107
00:05:19,290 --> 00:05:22,310
because that means that any files you move in there

108
00:05:22,310 --> 00:05:26,470
can directly be accessed if users enter the path

109
00:05:26,470 --> 00:05:29,930
to file in their browser address bar.

110
00:05:29,930 --> 00:05:32,740
Now that is definitely something you wanna do for images,

111
00:05:32,740 --> 00:05:34,740
your scripts and CSS files.

112
00:05:34,740 --> 00:05:37,823
But for example, not for user submitted data.

113
00:05:38,710 --> 00:05:41,410
Other visitors of your site should not be able

114
00:05:41,410 --> 00:05:44,230
to just enter a path to some text file

115
00:05:44,230 --> 00:05:47,510
and then read the raw data that might be stored there.

116
00:05:47,510 --> 00:05:50,200
That's something you wanna do in your server-side code,

117
00:05:50,200 --> 00:05:52,193
but not expose to the public.

118
00:05:53,150 --> 00:05:56,070
But for styles and scripts, we wanna use that public folder.

119
00:05:56,070 --> 00:05:59,250
And so now I move styles into this public folder

120
00:05:59,250 --> 00:06:02,810
and I moved the scripts folder into the public folder.

121
00:06:02,810 --> 00:06:06,190
So that scripts and styles both sit in a public folder

122
00:06:06,190 --> 00:06:09,113
and we can now delete the front-end site folder.

123
00:06:10,410 --> 00:06:13,110
Now with this line of code here in line seven,

124
00:06:13,110 --> 00:06:17,380
we're telling Express that for every incoming request,

125
00:06:17,380 --> 00:06:20,760
it should check if it's a request to a file

126
00:06:20,760 --> 00:06:24,060
that can be found here in this public folder.

127
00:06:24,060 --> 00:06:29,060
And if it is, then the file will be returned as a response.

128
00:06:29,160 --> 00:06:32,040
If it's not, the request will be forwarded

129
00:06:32,040 --> 00:06:34,210
to our other routes.

130
00:06:34,210 --> 00:06:36,650
And if there, we also have no route

131
00:06:36,650 --> 00:06:39,473
that handles the request, the request will fail.

132
00:06:40,380 --> 00:06:44,150
But with that, requests to our style and script files

133
00:06:44,150 --> 00:06:45,803
should now succeed.

134
00:06:46,880 --> 00:06:50,530
And therefore, if we now save everything again here,

135
00:06:50,530 --> 00:06:54,763
and we reload this /recommend page, it's working.

136
00:06:55,700 --> 00:06:57,360
Now I'm zoomed in quite a bit here.

137
00:06:57,360 --> 00:06:58,730
So let me zoom out.

138
00:06:58,730 --> 00:07:01,310
And that's looking good now.

139
00:07:01,310 --> 00:07:04,420
And with that, we got this working page,

140
00:07:04,420 --> 00:07:06,210
we can navigate around,

141
00:07:06,210 --> 00:07:09,850
and we now have a way of seeing

142
00:07:09,850 --> 00:07:12,250
our page in a nicer way now again,

143
00:07:12,250 --> 00:07:14,270
with the styles added.

144
00:07:14,270 --> 00:07:15,590
In the mobile view,

145
00:07:15,590 --> 00:07:20,090
we also have this site drawer or this mobile menu,

146
00:07:20,090 --> 00:07:21,213
which does work.

147
00:07:22,280 --> 00:07:25,170
So that's now how we can serve static files

148
00:07:25,170 --> 00:07:28,520
along with our server-side routes,

149
00:07:28,520 --> 00:07:32,240
which we use for our content heavy pages.

150
00:07:32,240 --> 00:07:34,930
And with that, we have the best of both worlds.

151
00:07:34,930 --> 00:07:36,950
We can just serve a couple of files

152
00:07:36,950 --> 00:07:39,480
that should just be accessible like this.

153
00:07:39,480 --> 00:07:43,340
And we still have full control over our main routes

154
00:07:43,340 --> 00:07:45,690
where we potentially wanna do more

155
00:07:45,690 --> 00:07:48,190
than just return files.

156
00:07:48,190 --> 00:07:50,290
At the moment, we aren't doing more

157
00:07:50,290 --> 00:07:52,030
but soon we will do more,

158
00:07:52,030 --> 00:07:53,880
at least in some of these routes.

159
00:07:53,880 --> 00:07:57,090
Soon we will also handle incoming data

160
00:07:57,090 --> 00:08:00,580
and we will also populate some of these HTML files

161
00:08:00,580 --> 00:08:02,023
with dynamic data.