'webpack-dev-server 4 with ngrok

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?

Solution 1:^[1]

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'
  },
}

Solution 2:^[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	jkpark
Solution 2	GmBodhi

'webpack-dev-server 4 with ngrok

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]