CODEWITHSUNDEEP
javascriptnode.jsexpress
Tom Hanks
Tom Hanks

Reputation: 614

Express static directory not working with CSS path

I have this in my app.js

app.use(express.static(path.join(__dirname, '../public')));

..and this is my main layout page

<link rel="stylesheet" href="/css/styles.css">

I've tried just about every combination I can think of, but I can't get the stylesheet to connect.

You can view the repo here to understand the file hierarchy - https://github.com/NolWag/Shopify-eCommerce-App

enter image description here

I can't seem to figure out what I'm missing, any help is greatly appreciated.

Upvotes: 0

Views: 719

Answers (1)

Wang Liang
Wang Liang

Reputation: 4434

Please use
app.use(express.static(path.join(__dirname, './public')));
instead of
app.use(express.static(path.join(__dirname, '../public')));

Of course, there are some problems in serve static files
How can I include css files using node, express, and ejs?
But, from your project, there is no problem

Interesting story: WHY We cannot find ../public is wrong path.

Screen

With chrome inspect, we can think as there are some mime type error.

???: Although there is no files for express.static, express is send message as 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Error</title>
    </head>
    <body>
        <pre>Cannot GET /css/styles.css</pre>
    </body>
</html>

instead of 404.

=> So, we are confused, and We cannot detect there is no the styles.css.

We can debug with http://localhost:3000/css/styles.css, then we can find Cannot GET /css/styles.css. So, we can find ../public is wrong, and fixed with ./public.

Upvotes: 1

Related Questions