(Suggestion) Vite HMR to localhost is brittle

[jfkirk]

https://github.com/Shopify/shopify-app-node/blob/288d02254e4d5e20b2adda808494575caa5cd23e/server/index.js#L121-L126

The default Vite HMR configuration, using ws://localhost:64999, is brittle in browsers that don't allow ws:// to localhost. Attempting these connections causes the app to get stuck in a refresh loop as the browser keeps trying to reconnect to HMR.

I was able to get the Vite HMR to work in my own setup by sending the socket through wss:// and ngrok, then having my own nginx forward the hmr path to the correct port. The snag there is that ngrok funnels all traffic (both ws and wss) to a single port so some process (like nginx) needs to map the ngrok port and hmr path to the correct port. Here's my setup:

vite config:

          hmr: {
            protocol: "wss",     // use a secure socket connection
            port: 64999,         // nginx forwards hmr requests to this port
            clientPort: 443,     // secure port on ngrok
            path: "hmr",         // nginx knows to forward this path to the shopify app container
          },

nginx:

    listen 8081;

...

    location /hmr {
        proxy_set_header X-Forwarded-Host $host;
	proxy_set_header X-Forwarded-Server $host;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://shopifyapp:64999/hmr;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

I'm not sure what the best solution is for the template app, but it might be worth it to figure something out to prevent users of the template getting caught in these refresh loops -- stumped me for a while.

Hope this helps!

[nikolan]

What is http://shopifyapp:64999/hmr in this case? Is this your ngrok URL?

[jfkirk]

@nikolan that is the local address of the Docker container running the shopify node app. Inside of that docker container, it is listening on :64999/hmr for hmr connections, so that line int he nginx config is saying "When ngrok/nginx gets a request for the /hmr path, forward it to the shopify node app at port 64999."

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. It will be closed if no further action occurs in 14 days.

[github-actions[bot]]

We are closing this issue because it has been inactive for a few months. This probably means that it is not reproducible or it has been fixed in a newer version. If it’s an enhancement and hasn’t been taken on since it was submitted, then it seems other issues have taken priority.

If you still encounter this issue with the latest stable version, please reopen using the issue template. You can also contribute directly by submitting a pull request– see the CONTRIBUTING.md file for guidelines

Thank you!