ENOENT: no such file or directory, stat ERROR with Express Middleware

Question

This seems to be a common error with file paths but my problem is a but more strange because code worked fine yesterday but not today (and I did not change any code). My folder directory is quite simple:

-node_modules
-public
    -css
    -js
    control_panel.html
    index.html
app.js
packages.json

and I am using an Express middleware inside app.js to help render files.

var express = require("express");
var app = express();

app.use(express.static("public"));

app.get('/', function get(req, res) {
    res.sendFile('/index.html');
});

app.get('/control_panel', function get(req, res) {
    res.sendFile('/control_panel.html');
});

When I try to open index.html in the browser, there is no problem, everything works as expected. When I try to open control_panel.html in the browser, however, I get Error: ENOENT: no such file or directory, stat '/control_panel.html' at Error (native)

What is causing the problem?

Answer 1

A number of relevant points based on your situation:

1. All static assets (html files, images, CSS files, client-side script files, etc...) should be serviced automatically with an appropriate express.static(...) statement. You should not be creating individual routes for static resources.

2. To make express.static() work properly, you must locate all your static resources in a directory hierarchy that contains only files meant to be public.

3. Your private server-side files such as app.js should not be in that public directory hierarchy. They should be elsewhere.

4. Your path to express.static() is not correct.

5. Your path for res.sendFile() is not correct.

What I would suggest you do to fix things is the following:

1. Move app.js out of the public directory. It needs to be in a private directory. I'd suggest the public directory be a sub-directory from where app.js is located.
2. Then, your express.static() in app.js will work property to serve your static HTML fiels.
3. Then, you can remove the two routes you have for index.html and control_panel.html because express.static() should be serving them.

Here's one hierarchy that would work:

server
    app.js
    public
        index.html
        control_panel.html

And, an app.js like this:

var express = require("express");
var app = express();

// serve static files found in the public sub-directory automatically
app.use(express.static("public")); 

app.listen(80);