Currently, I am delving into the world of expressJS and nodeJS in an effort to expand my skills. However, I've hit a bump in the road when the server fails to locate the CSS file (resulting in a 404 error) upon loading the HTML page. Surprisingly, the page loads without any styling when accessed through the server, but everything looks great when I open it directly. Here is my express and node file code snippet:
var http = require('http'),
express = require('express');
app = express();
app.get('/', function(req,res){
res.sendFile(__dirname + '/index.html');
});
app.use(express.static('public'));
app.listen(3000);
The CSS link in the HTML file is as follows:
<link href="public/main.css" rel="stylesheet">
Here is the structure of my files:
FrontEnd(folder)
- index.html
index.js
public(folder)
- main.css
Having scoured the internet and read through the documentation, I still can't seem to pinpoint the issue. What could I be missing here?