Webpack DevServer HMR not working with ngrok->docker

Question

I´m trying to get Webpacks DevServer HMR feature to work on my setup. It look like this:

• QuasarJS CLI runs Webpack DevServer for MYAPP in local Docker container
• Docker container is accessed through ngrok tunnel

docker ports

0.0.0.0:8201->8201/tcp

ngrok config:

Forwarding   https://MYAPP.ngrok.io -> http://localhost:8201 

Webpack DevServer config (Webpack version: 5.59.1)

devServer: {
  port: 8201,

  headers: {
    "Access-Control-Allow-Origin": "*",
  },

  client: {
    webSocketURL: {
      hostname: "0.0.0.0",
      pathname: "/ws",
      port: 8201,
    },
  },
},

In Chrome browser dev tools I can see that MYAPP is trying to connect to the local DevServer but does not succeed:

WebSocket connection to 'wss://MYAPP.ngrok.io:8201/ws' failed:

WebSocketClient @   WebSocketClient.js?8f51:13
initSocket  @   socket.js?d11d:15
eval    @   socket.js?d11d:34

Any ideas anyone?

Answer 1

Found it in the documentation:

To get protocol/hostname/port from browser use webSocketURL: 'auto://0.0.0.0:0/ws'.

https://webpack.js.org/configuration/dev-server/#websocketurl

Now my Webpack DevServer config looks like this:

devServer: {
  port: 8201,

  headers: {
    "Access-Control-Allow-Origin": "*",
  },

  client: {
    webSocketURL: "auto://0.0.0.0:0/ws",
  },
},

Works!