I had no issue serving my react application with express static; that serves my root URL:
// Serving the root URL?
app.use(express.static(path.join(__dirname, "client", "build")));
When my application calls the root url EG: http://localhost:3000/ My react app is served successfully.
However when I try to serve it from another path, say:
app.use("/react", express.static(path.join(__dirname, "client", "build")));
I get a blank page, and when I open my developer tools and see the console, I get these errors:
Refused to apply style from 'http://localhost:3000/static/css/main.a617e044.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 GET http://localhost:3000/static/js/2.74b4deaf.chunk.js net::ERR_ABORTED 404 (Not Found)
localhost/:1 GET http://localhost:3000/static/js/main.0cb91811.chunk.js net::ERR_ABORTED 404 (Not Found)
localhost/:1 GET http://localhost:3000/static/js/2.74b4deaf.chunk.js net::ERR_ABORTED 404 (Not Found)
localhost/:1 GET http://localhost:3000/static/js/main.0cb91811.chunk.js net::ERR_ABORTED 404 (Not Found)
manifest.json:1 GET http://localhost:3000/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
I tried using a wildcard "*" like so:
app.use("/react", express.static(path.join(__dirname, "client", "build")));
app.get('*', (req, res) => {
res.sendFile('index.html', {root: path.join(__dirname, '/client/build')});
})
Instead in my console I see this:
Uncaught SyntaxError: Unexpected token '<'
main.0cb91811.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
At this point I am very confused as to how express static works, and how does it decide which static folder to serve if multiple express static statements exist (with each having different directories) and why is my application not being served when I call a specific URL path.
I would appreciate any help to help me understand express further and solve this issue.