In older versions of webpack-dev-server (i.e 3 and below), we can simply expose webpack and webpack-dev-server's websock using ngrok tunnels by setting the value of devServer.public, as shown below:
// WDS v3
devServer: {
public: 'react-tunnel.ngrok.io',
// other webpack devServer config
}
This is particularly useful in developing apps in frameworks like React, as we can create a secure tunnel from the local machine, to a public URL to allow the web application to be easily tested.
However, in the latest versions of webpack-dev-server (v4), the public property has been replaced in favour client.webSocketURL object (source). I am unable to find any resources to make this work with ngrok, as the websockets are not properly connected when I point the devServer.client.webSocketURL.hostname to my ngrok tunnel.
// WDS v4
devServer: {
client: {
webSocketURL: {
hostname: 'react-tunnel.ngrok.io',
},
},
}
The above implementation is only a partial solution, as the websocket was not properly set up, thus it does not hot-reload.
Does anyone know what is the solution to this, such that ngrok will once again work well with webpack-dev-server?
You also need to provide port and protocol to make it work. For example,
devServer: {
client: {
webSocketURL: {
hostname: 'react-tunnel.ngrok.io',
port: 0,
protocol: 'wss',
},
},
}
With above settings, your website may work in ngrok tunnel, but wont work in localhost.
To connect to the web socket regardless of url, you can set webSocketURL to auto://0.0.0.0:0/ws, which uses protocol, hostname, and port from browser. doc
This should fix hot-reloading problem as well.
devServer: {
client: {
webSocketURL: 'auto://0.0.0.0:0/ws'
},
}
I'm not sure if this is the complete solution, but this works for me. You can put the hostname as localhost and some port as your needs. After running the dev-server, you could expose the port using ngrok http {port}.
Example: ngrok http 3000.