Anybody Have a Cloudflare Tunnel Working with Rspack HMR? [SOLVED]

help
1

Does anybody have a Cloudflare Tunnel working with rspack HMR yet?

If so could you please post your Cloudflare config and the devServer part of your rspack config?
I’ve been hammering on this for days and haven’t gotten it working yet.

In case anybody can just see from looking what’s wrong with my config, here it is:

Cloudflare Config

ingress:
  # WebSocket routes (must come first due to path specificity)
  - hostname: www.myDevDomain.com
    path: /ws
    service: ws://localhost:8080
  - hostname: myDevDomain.com
    path: /ws
    service: ws://localhost:8080
  - hostname: wss.myDevDomain.com
    path: /ws
    service: ws://localhost:8080
  
    # HTTP routes
  - hostname: myDevDomain.com
    service: http://localhost:3000
  - hostname: www.myDevDomain.com
    service: http://localhost:3000
  
  # Catch-all
  - service: http_status:404

rspack Config

       devServer: {
            port: 8080,
            host: '0.0.0.0',
            allowedHosts: 'all',
            hot: true,

            client: {
                overlay: true,
                reconnect: 3,
                webSocketURL: {
                    protocol: 'ws',
                    hostname: 'localhost',
                    port: 8080,
                    pathname: '/ws',
                },
            },
        },
2

Update

Hmmm… Grok says :

YOU ARE 99% THERE — BUT YOU’RE RUNNING A DEV SERVER IN PRODUCTION

The Problem (in plain English)

You’re seeing:

text

GET https://www.myDevDomain.com/rspack/main.876de1f01b0e1953.hot-update.json 404 (Not Found)
[HMR] Cannot find update. Need to do a full reload!

This means:

Your frontend is trying to do “Hot Module Replacement” (HMR) over the internet — but the dev server files (*.hot-update.json) only exist on localhost

Why This Happens

Part What’s Happening
ws://localhost:8080/ws Your dev server (Vite, Webpack, Rspack)
wss://www.myDevDomain.com/ws Cloudflare tunnels to that dev server
https://www.myDevDomain.com/rspack/...hot-update.json Browser tries to fetch HMR assets from public domain
404 Those files don’t exist publicly — they’re only served on localhost

The Fix: STOP USING DEV SERVER IN PRODUCTION

You cannot use npm run dev behind Cloudflare Tunnel in production.

<<<<<<<<<

That seems to make sense.

2 Likes
3

Not sure if this is the same as what you were trying to do, but I finally got my Cloudflare dev tunnel working. After going in circles for an hour or so troubleshooting CSP and import errors, turned out to be an extremely simple change to fix.

Literally just had to add this to the dev Meteor settings file:

"public":{
  "packages": {
    "dynamic-import": {
      "useLocationOrigin": true
    }
  }
},

and voila, the tunnel works again on Meteor 3!

For additional reference, this app is on Meteor v3.3.2 with this config in package.json

"meteor": {
    "modern": {
      "transpiler": {
        "verbose": false
      },
      "minifier": true,
      "webArchOnly": true,
      "watcher": true
    }
  }
4

Thanks for posting this. If you change something in the code, does HMR work over the tunnel?

5

Yes, it does!

To get HMR to work, I had to change a few other things:

  1. Add a Cache Rule in Cloudflare to bypass the cache
Caching > Cache Rules > Create Rule
Custom filter expression = (http.request.full_uri contains "https://tunnel.mydomain.com")
Cache eligibility = "Bypass cache"
Browser TTL = "Bypass cache"
  1. Add this to my tunnel config.yaml
ingress:
  - hostname: tunnel.mydomain.com
    service: http://localhost:3000
    originRequest:
      noTLSVerify: true
      httpHostHeader: localhost:3000
  - service: http_status:404

That was enough for it to work on v3.3.2

For 3.4-rc.1 I also needed to

  1. Add this to my rspack.config.js
export default defineConfig((Meteor) => ({
  devServer: {
    client: {
      webSocketURL: {
        hostname: 'tunnel.mydomain.com',
        pathname: '/ws',
        port: 443,
        protocol: 'wss',
      },
    },
  },
}))
1 Like
6

That’s awesome. Thanks very much for posting this.