Receiving 404 status when trying to load local files with NodeJS - node.js

Question

I am relatively new to using Node and am trying to make a simple HTML page that can get images, stylesheets, and scripts locally. Every time I try to load a local file, it returns a 404 status. I have tried multiple solutions from StackOverflow and other sources and still cannot get this to work.
Here is my code in app.js:
const app = require('express')();
const http = require('http').createServer(app);
var portNumber = 8085;
app.get('/', function(reg, res) {
res.sendFile(__dirname + '/index.html');
});
http.listen(portNumber, function() {
console.log('Listening on port ' + portNumber);
});
I have a CSS file at public > stylesheets > style.css linked to my HTML document.
<link rel="stylesheet" type="text/css" href="public/stylesheets/style.css" />
I get a 404 error in my browser's console. I also get a MIME error:
The resource from “http://localhost:8085/public/stylesheets/style.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Any local images I try to load also give a 404 error.
I have tried adding app.use(express.static('public')); to make the public folder the root to serve static content as shown in the Express documentation, but I still got 404 errors.
const express = require('express');
const app = express();
const http = require('http').createServer(app);
var portNumber = 8085;
app.use(express.static('public'));
app.get('/', function(reg, res) {
res.sendFile(__dirname + '/index.html');
});
http.listen(portNumber, function() {
console.log('Listening on port ' + portNumber);
});
I am not sure what I am supposed to do. All I want is to be able to load local files in my HTML document. How do I get these files to be displayed publicly instead of giving a 404 error?

Answer 1

The reason for the mime error is actually confusing - it's due to the browser not being able to find that file.
Remove the /public part of the path location as that is the folder so it's being served from:
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
Same for all your other static files: /assets/mypic.png etc
Update your location for the static path as follows:
app.use(express.static(path.join(__dirname, 'public'), {index: false}));
Then, update sendFile to use and absolute path as follows:
return res.sendfile(path.resolve('./index.html'));
// or
return res.sendfile(path.join(__dirname, 'index.html'));

Answer 2

You should try using
app.use(express.static(__dirname + "/public"));
That way express knows where to search for that public folder.