0

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.

Derek Pollard
  • 6,953
  • 6
  • 39
  • 59
Tom Hanks
  • 594
  • 1
  • 5
  • 21
  • 1
    Your repo says [`app.use(express.static(path.join(__dirname, '../public')));`](https://github.com/NolWag/Shopify-eCommerce-App/blob/master/app.js#L27), not `app.use(express.static(path.join(__dirname, '/public')));`. – Patrick Roberts May 13 '19 at 18:04
  • Mistype on my part, either case doesn't work. – Tom Hanks May 13 '19 at 18:08
  • 1
    You might get more consistent results with `app.use(express.static(path.join(process.cwd(), '/public')));`, though maybe not. It appears your css may not be getting loaded at all based on [this](https://github.com/NolWag/Shopify-eCommerce-App/blob/master/dist/bundle.js#L765). – Patrick Roberts May 13 '19 at 18:10
  • 1
    I'd first determine whether and where the css is getting served. – Will May 13 '19 at 18:12
  • @PatrickRoberts that did the trick! Thank you – Tom Hanks May 13 '19 at 18:43

1 Answers1

1

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.

Wang Liang
  • 4,244
  • 6
  • 22
  • 45