statianzo / webpack-livereload-plugin

LiveReload during webpack --watch
ISC License
204 stars 51 forks source link

Support reverse proxied URLs with "public_host" and "public_port" plugin configuration. #57

Closed laurencefass closed 4 years ago

laurencefass commented 4 years ago

I am running an express server and a separate webpack instance to watch for code changes. I am using a reverse proxy to route public-domain/path URL to host:port addresses for my server and my webpack (livereload) instance. I think the plugin doesn't support reverse proxied public URL's due to missing configuration but I'm very happy to be corrected if i'm not using the plugin correctly.

live server here: https://socket.syntapse.co.uk/chat3. Reload the page and check developer tools for the errors.

Preliminaries: I run "npm run start" and "npm run watch" on my server and the express app serves the page and loads livereload.js as expected.

Issue: Webpack is recompiling code but livereload.js throws an error and live reload fails:

error:

"WebSocket connection to 'ws://socket.syntapse.co.uk:35729/livereload' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED"

problem:

socket.syntapse.co.uk:35729 is not a valid address. my livereload server is running socket.syntapse.co.uk/chat3:80 but i have no way to configure the livereload plugin to know this.

probable causes:

  1. The websocket address format in livereload.js does not support proxy configurations.
  2. The options.port is incorrect and doesn't match my plugin configuration. It looks like the default value is being used.

possible fix

I think 'socket.syntapse.co.uk:35729/livereload' should become 'socket.syntapse.co.uk/chat3/livereload for correct reverse proxying. To support reverse proxy configurations add a public_host and public_port setting to the livereload plugin config. Use these values to construct the URL in the livereload.js file if they exist else resort to currently supported host and port values. If the port is not included omit it entirely to support the domain.com/path to host:port configuration requirements of a reverse proxied server.

this same functionality exists in the webpack-dev-server to cover the same use case.

My configuration

app public URL:

https://socket.syntapse.co.uk/chat3

Githubissues.

  • Githubissues is a development platform for aggregating issues.