Tunnel doesn't register changes to React code

Helo! I’m developing a React app. I’ve noticed that the changes I do to the code do not get reflected on the hostname served by the tunnel but do get applied on the localhost that the tunnel is connected to.

Is it possible to view changes live on the tunnel?

Thanks

I’m experiencing the same issue. I have a react.js app running on a Docker container that’s using Nodemon to refresh the server when changes are made to the files. I’ve mapped the server files to a volume and any changes made display locally but don’t reflect over the tunnel. Not sure why this is happening because the tunnel points directly to the localhost port hosting the application. If changes made to the app display locally it should reflect through the tunnel, right? Have you found a solution to this? I’m thinking maybe the cloudflare tunnel server is caching the files? Not quite sure tho

I spent a day figuring this out:

  1. You can only connect to websocket tunnel on ports:
    • ws: 80, 8080
    • wss: 443, 8443

To configure your webpack dev server to connect to the right place you can use:

config.devServer = {
    //https://webpack.js.org/configuration/dev-server/#devserverhttps
    allowedHosts: "all",
    // Use the localhost port you are tunneling over http. I am tunneling http://localhost:3002 for example.
    port: 3002,
    // https://stackoverflow.com/questions/68950266/webpack-dev-server-4-with-ngrok
    // `auto` will pick the correct ws or wss protocol and also `:0` will pick the correct port for localhost or your tunneled https address
    client: {
        webSocketURL: 'auto://0.0.0.0:0/ws'
    },
}

Last of all I had an issue with an infinite page reload loop after the first hot-reload. This is caused by page caching issues on cloudflare’s side. Either use development mode to disable all caching, or create a page rule to bypass caching for your tunneled endpoint.