title: webpack-dev-middleware not serving my client
body: <p>I have a nodejs app on the server-side and a vue app on the client side</p>
  
  <p>I want my server side to serve my client when accessing certain urls (for example '/')</p>
  
  <p>my client is under <code>project_root/frontend</code> and my server is under <code>project_root/server</code></p>
  
  <p>This is my <code>server/app.js</code> file:</p>
  
  <pre><code>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, () =&gt; {
    console.log(`server started, listening on port ${port}`)
  })
  </code></pre>
  
  <p>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 (<code>export FUNDME_DEV=1</code>) says it compiled successfully.</p>
  
  <p>However, when I try to access my app, I'm getting "Cannot GET /", the middleware serves nothing :(</p>
  
  <p>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.</p>
  
  <p>what am I suppose to do?</p>