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
I can't seem to figure out what I'm missing, any help is greatly appreciated.
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.
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.
app.use(express.static(path.join(__dirname, '../public')));, notapp.use(express.static(path.join(__dirname, '/public')));.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.