0

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?

Tom Klino
  • 2,358
  • 5
  • 35
  • 60
  • webpack devMiddleware does not serve "BUILT" files, they build in memory and serve them from memory. Is that what you want to do? – PlayMa256 Aug 17 '18 at 13:28
  • yes. I'm not expecting it to serve static files, just the opposite. I want it to compile in memory so changes while I develop would be applied quickly – Tom Klino Aug 17 '18 at 13:33

1 Answers1

0
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}`)
})
PlayMa256
  • 6,603
  • 2
  • 34
  • 54
  • And what path should I put my webpack config? I'm not sure what role it plays if the intention is to serve the result from memory without writing to disk – Tom Klino Aug 17 '18 at 13:50
  • leave that as /. You webpack config goes on the compiler, then goes to middleware – PlayMa256 Aug 17 '18 at 14:04
  • with the public path set to '/' it does serve _something_, just not what i want. it serves a compiled js file, but no index.html. I'm still missing something – Tom Klino Aug 17 '18 at 14:42
  • I added `HtmlWebpackPlugin`, and now I get an html and I _sort of_ see my app. But it's displayed badly, like maybe some css is missing or vuetify (which I use) was not compiled/delivered correctly. Any tips? – Tom Klino Aug 17 '18 at 15:04
  • generate a build and see what is the path inserted to the link tag (css) on your html. It is a good start – PlayMa256 Aug 17 '18 at 16:30