webpack-dev-middleware not serving my client

Question

I have a nodejs app on the server-side and a vue app on the client side

I want my server side to serve my client when accessing certain urls (for example '/')

my client is under project_root/frontend and my server is under project_root/server

This is my server/app.js file:

const webpackConfig = require('./webpack.config.js')
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const compiler = webpack(webpackConfig);

const app = express();

if(process.env['FUNDME_DEV']) {
  app.use(webpackMiddleware(compiler, {
    publicPath: path.join(__dirname, '/../frontend/dist')
  }))
} else {
  //production
  app.use(express.static(path.join(__dirname, '/../frontend/dist')));
}
app.listen(port, () => {
  console.log(`server started, listening on port ${port}`)
})

My webpack.config.js file is mostly guesswork and copying from the one the vue-cli made for me when I created the frontend, so it might be wrong, but the output when running the server in dev mode (export FUNDME_DEV=1) says it compiled successfully.

However, when I try to access my app, I'm getting "Cannot GET /", the middleware serves nothing :(

I don't know what am I missing, or how my webpack config should look exactly, I found none of the other similar questions helpful.

what am I suppose to do?

Answer 1

const webpackConfig = require('./webpack.config.js')
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const compiler = webpack(webpackConfig);

const app = express();

if(process.env.NODE_ENV === 'development') { // you don't have to compile the content first, just start this as dev.
  app.use(webpackMiddleware(compiler, {
    publicPath: '/' // <--- this has to be the same publicPath that you inserted on your webpack config, otherwise you could leave this as /
  }))
} else {
  //production
  app.use(express.static(path.join(__dirname, '/../frontend/dist')));
}
app.listen(port, () => {
  console.log(`server started, listening on port ${port}`)
})