Using ngrok with npm run dev causes infinite reloads

[seenickcode]

Describe the bug

It seem that when using something like ngrok and loading a sveltekit app via npm run dev, the pages keep reloading in an infinite loop. Is this a vite issue?

Reproduction

ngrok config:

tunnels:
  localhost:
    proto: http
    hostname: foobar.ngrok.io
    addr: 127.0.0.1:3000

1. create a new svelte kit app
2. npm run dev
3. load foobar.ngrok.io in your browser

Logs

No response

System Info

npx: installed 1 in 0.868s

  System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
    Memory: 96.56 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.3/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
  Browsers:
    Brave Browser: 91.1.26.77
    Chrome: 91.0.4472.164
    Firefox: 90.0
    Safari: 14.1.1
  npmPackages:
    @sveltejs/adapter-netlify: ^1.0.0-next.22 => 1.0.0-next.23 
    @sveltejs/kit: next => 1.0.0-next.131 
    svelte: ^3.34.0 => 3.38.3

Severity

annoyance

Additional Information

No response

[Conduitry]

This is essentially a duplicate of #1134 in that it is caused by Vite reloading the page when it can't reach its own HMR websocket server.

[cgsmith]

What is the fix for this?

[cerebrl]

I was struggling with this very issue using Ngrok with SvelteKit v1.0.0-next.288. The problem is the default websocket port (3000) was not connecting because Ngrok doesn't accept requests on that port. You can see the failure in your Network panel. There's usually a pending request that never connects to wss://<your-subdomain>.ngrok.io:3000/.

The fix for this is to set the port for HMR to the default web traffic ports of 80 or 443 (HTTP or HTTPS, respectively), so the request for the websocket connection gets requested to the appropriate port on Ngrok. Ngrok then forwards that request to your aliased localhost port (3000, if using SvelteKit's default).

For me, I was running HTTPS on Ngrok, and default port (3000) for SvelteKit. So, I configured port 443 (default for HTTPS) for HMR so that the websocket request goes through Ngrok's port and forwarded to 3000 on my localhost. Here's my svelte.config.js:

const config = {
	build: {
		sourcemap: 'inline',
	},
	kit: {
		adapter: adapter(),
		vite: {
			server: {
				hmr: {
					port: 443 // <--- The appropriate Ngrok port
				}
			}
		}
	},
	preprocess: preprocess(),
};

To verify the fix, go back to your Network panel in your browser, and hopefully you'll see a successful connection to wss://<your-subdomain>.ngrok.io:. I hope that helps anyone that gets caught-up on this detail.