Cloudflare Tunnel + React + Webpack WebSocket Hot code reload

Developers
#1

Hello,

I’m setting a dev environment for developing a React App hosted on a Cloudflare page, edited via a Cloudflare tunnel.

I’m trying to enable remote live code editing (hot code reload) but can’t figure how to configure React or Cloudflare tunnel to enable connection to the Webpack WebSocket Dev server from a remote page. When loading the page, the WebSocket connection keeps hanging on “pending” state whereas other HTTP connections are handled correctly.

I’d like to re-route wss://the.host:3000/ws to ws://localhost:3000/ws.

So far, looking around configuration samples, I’ve tested with this .cloudflared/config.yml:

ingress:
  - hostname: the.host
    path: /ws
    service: ws://localhost:3000
  - hostname: the.host
    service: http://localhost:3000
  - service: http_status:404

But it doesn’t work.

That’d be nice to have that part of configuration explained in Cloudflare howtos pages, as CRA React dev is so common.

Cheers.

#2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.