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?
CodePudding user response:
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!