webpack-dev-middleware serving bundle on different port than app

Question

I've been working on a React boilerplate that harnesses Apollo-Client and GraphQL. My app is set up so that I have one node process running an Express server on port 3000 that actually renders the application, and another Express server on port 3001 that uses webpack-dev-middleware to package and serve my JavaScript bundle.

I was getting a 404 when trying to load my bundle using <script src="/static/js/bundle.js />, because it was trying to request the bundle at http://localhost:3000/static/js/bundle.js instead of http://localhost:3001/static/js/bundle.js, where it was actually being served by webpack-dev-middleware.

Is there a way to configure webpack-dev-middleware or my app server so that my app can access the JS bundle from /static/js/bundle.js without having to prepend the http://localhost:3001 in front of it?

One to perform server-side (pre)rendering and the other is simply for development purposes, and is not used in production. — Kamaros, Oct 04 '16 at 07:59
I use one Express server for both, myself (loading the Webpack middleware only when not in production). — robertklep, Oct 04 '16 at 08:07

score 0 · Answer 1 · answered Oct 04 '16 at 08:10

You need to proxy requests from :3000/static/js/bundle.js to :3001/static/js/bundle.js, which you could do with something like this:

const request = require('request');
...
app.get('/static/js/bundle.js', (req, res) => {
  req.pipe(request.get('http://localhost:3001/static/js/bundle.js')).pipe(res);
});

You have make sure that this route is only added during development.

webpack-dev-middleware serving bundle on different port than app

1 Answers1