7

I'm using the webpack dev server, via the react scripts and I'd like to use the debugging functionality it offers via Visual Studio Code, however, I have a non-standard setup. We have service in front of the webpack dev server that proxies all requests, bundles requests with other services, handles security etc. So on local development, I open localhost:8080, which forwards all requests to localhost:8084 which is the webpack server. However, that service (on 8080) does not support websockets, and thus cannot forward them. I see webpack tries to fallback to an iFrame, which works for the reloading but not for debugging it seems.

Is there a way for me to explicitly tell webpack that it should connect to the webpack dev server on port 8084, instead of trying to do it via 8080? I already use I already use PORT=8084 cross-env REACT_APP_VERSION=$npm_package_version react-scripts start in package.json, which I think passes on the port. However, the problem is that the socket is always opened to the same host/port you are running on. So when my page is proxied to :8080, tries the socket on :8080 as well. What I want is to explicitly tell it not to use 8080, but 8084.

And secondary, it is correct that debugging doesn't work via the iFrame backup option?

Alex
  • 2,953
  • 1
  • 27
  • 37
  • What's exactly your problem for debugging? React-dev-tools not available on iframe mode? (In that case, check: https://github.com/facebook/react-devtools/issues/57) – Miguel Calderón Mar 21 '18 at 09:51
  • I think this [solution](https://stackoverflow.com/questions/33272967/how-to-make-the-webpack-dev-server-run-on-port-80-and-on-0-0-0-0-to-make-it-publ) will help you – manneta Mar 21 '18 at 09:51

1 Answers1

9

You can specify the port for webpack-dev-server on webpack.config.js or on the CLI.

devServer.port

number

Specify a port number to listen for requests on:

webpack.config.js

module.exports = {
  //...
  devServer: {
    port: 8080,
  },
};

Usage via the CLI

Webpack 4

webpack-dev-server --port 8080

Webpack 5

npx webpack serve --port 8080

Miguel Calderón
  • 3,001
  • 1
  • 16
  • 18