Using Express to serve a Vue.js webpack app, I am receiving the following error after deploy: Is my code for serving the app is the issue here?

app.use(helmet())

app.use(express.static(path.resolve(__dirname, '../client/dist/static')));

app.all('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/dist', 'index.html'));
})

Otherwise isn't express.static supposed to automatically assign content types to the static files?

Using Express to serve a Vue.js webpack app, I am receiving the following error after deploy: Is my code for serving the app is the issue here?

app.use(helmet())

app.use(express.static(path.resolve(__dirname, '../client/dist/static')));

app.all('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/dist', 'index.html'));
})

Otherwise isn't express.static supposed to automatically assign content types to the static files?

• javascript
• node.js
• express
• webpack
• vue.js

• similar issue but my problem was overlooking that express.static() needs an absolute path. – user12582392 Commented Feb 19, 2022 at 14:07

3 Answers 3

You get this message also when the response status in 404 Not Found, so check carefully that the files actually exist from Network tab.

Network tab:

Console tab:

See a similar issue here: https://stackoverflow./a/48792698/258772

For some reason, had to now specify a mount path:

app.use('/static', express.static(path.resolve(__dirname, '../client/dist/static')));

Yes same problems over here.

I'm using ecstatic (still with express) now. I'm not sure if this is the solution (I'm not on the machine that made the error possible).

Will try it tommorow on the 'error' machine.

const express = require('express');
const ecstatic = require('ecstatic');
const http = require('http');

const app = express();

app.use(ecstatic({
  root: `${__dirname}/public`,
  showdir: false,
}));

http.createServer(app).listen(8080);

console.log('See if its cool on -> :8080');