Now to bring back our styles,
we need to make sure that, a,
our links to the style files are correct.
They theoretically are, but still it's not working.
And therefore, we also need to make sure that, b,
we kind of serve these style and script files
because that's the part that's currently missing.
Yes, theoretically the links to the style files
should be correct,
but it is super important to understand that now here,
since we have our custom server,
we have to explicitly define which requests
we wanna allow and handle
and any request that's not listed here
in this app.js file.
So any request that doesn't have a route
that we handle won't work.
So therefore let's understand
what happens here on /recommend, for example,
if we open the network tab in the dev tools.
If I reload, we see a couple of failing requests here,
and these are the requests to the CSS and JavaScript files.
Now it is super important to understand
and recognize that these are standalone requests.
That's how a website works.
We didn't have to think about that before
in this course because it didn't matter.
But now it does matter.
When we visit a website,
we don't just have one request for everything.
Instead, we have one initial request for the HTML file
and then that that HTML file might be linking
to other resources like we're doing it here.
And for every resource we link to,
no matter if it's a CSS file, a JavaScript file
or an image somewhere in our code,
a separate HTTP request will be sent by the browser.
So it's not one request that gets everything in one go,
but instead it's one request for HTML,
one request for each CSS file,
one request for each JavaScript file,
one request for each image and so on.
And therefore separate requests are sent for CSS
and JavaScript files here as well.
But in app.js, we got no routes
that would handle these requests.
Now, of course you wouldn't probably think
that's a bit annoying.
If we have to define separate routes for all the CSS
and JavaScript files that we wanna send back,
that can get very annoying for bigger projects,
where you split your styles and script code
in many, many files,
leave-alone projects where you also have images
where you might have hundreds of images.
You don't wanna define a bunch of routes for those
and you would be right.
That's why Express has a built in feature
for exactly this use case
that we have general static files that we wanna serve.
By the way, I'm saying static files,
these style and JavaScript files
will never be touched or changed by the server-side code.
They are pre-written and therefore static.
They are not dynamic.
At the moment, our HTML files are also static,
but at least some of those will become dynamic
later in the course.
And therefore, I don't consider these HTML files
as static files right now.
But we definitely have the static CSS and JavaScript files.
And therefore here,
we can now register a special middleware,
which we can do with the use method here, as you learned,
which is built into Express
that helps us with serving static files.
And just as before for parsing incoming request bodies,
we can access this middleware,
which is built into Express directly on this Express thing.
Yes, it is a function,
but it also has object-like properties
because in JavaScript functions actually
are also objects under the hood,
though we can ignore this right now.
The most important thing is that
we can use the dot notation here again.
And we can now use the static method here,
which it actually is.
This sets up a request handler
that will be executed on every incoming request
that simply checks if this is a request for a static file,
for something like a CSS or JavaScript file,
and if it's able to deliver that file from some folder
in the project folder.
And for this to work,
we need to pass one parameter value to static.
And that's the name of the folder in our project
that should hold any static files that we wanna serve.
And you can pass any name of your choice as a string here,
I'll go for public, which is a commonly chosen name here.
And now I will also create a public folder next
to the app.js file.
A public is a name which is commonly chosen
because it makes it very clear that any content
in this folder will be available to the public.
And that is something you wanna clarify,
because that means that any files you move in there
can directly be accessed if users enter the path
to file in their browser address bar.
Now that is definitely something you wanna do for images,
your scripts and CSS files.
But for example, not for user submitted data.
Other visitors of your site should not be able
to just enter a path to some text file
and then read the raw data that might be stored there.
That's something you wanna do in your server-side code,
but not expose to the public.
But for styles and scripts, we wanna use that public folder.
And so now I move styles into this public folder
and I moved the scripts folder into the public folder.
So that scripts and styles both sit in a public folder
and we can now delete the front-end site folder.
Now with this line of code here in line seven,
we're telling Express that for every incoming request,
it should check if it's a request to a file
that can be found here in this public folder.
And if it is, then the file will be returned as a response.
If it's not, the request will be forwarded
to our other routes.
And if there, we also have no route
that handles the request, the request will fail.
But with that, requests to our style and script files
should now succeed.
And therefore, if we now save everything again here,
and we reload this /recommend page, it's working.
Now I'm zoomed in quite a bit here.
So let me zoom out.
And that's looking good now.
And with that, we got this working page,
we can navigate around,
and we now have a way of seeing
our page in a nicer way now again,
with the styles added.
In the mobile view,
we also have this site drawer or this mobile menu,
which does work.
So that's now how we can serve static files
along with our server-side routes,
which we use for our content heavy pages.
And with that, we have the best of both worlds.
We can just serve a couple of files
that should just be accessible like this.
And we still have full control over our main routes
where we potentially wanna do more
than just return files.
At the moment, we aren't doing more
but soon we will do more,
at least in some of these routes.
Soon we will also handle incoming data
and we will also populate some of these HTML files
with dynamic data.