I am working on a shopify app using the node template in order to build a custom discount experience. I have setup my app locally and set up hosting using Fly.io. The problem I am having is that the configuration I have for running the app locally is not correct so I cannot see my local updates in real time - I have to deploy them first to fly. I have tried setting up a tunnel using both ngrok and cloudflare, I will provide my cloudflare example below.
Currently, after running "npm run dev" on my app, it provides me with what appears to be an install URL with this format:
Preview URL: https://my-store.myshopify.com/admin/oauth/redirect_from_cli?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxx
This occurs when I run npm run dev or any of these
npm run dev -- --tunnel=https://some-cloudflare-tunnel.trycloudflare.com:8081
npm run dev -- --tunnel=https://some-cloudflare-tunnel.trycloudflare.com:8081 --store=my-store.myshopify.com
The port matches the port that is exposed in my app, I ran this to create a cloudflared tunnel
cloudflared tunnel --url http://localhost:8081
When I run these dev commands, the app just shows a blank screen in the shopify admin. I know this is not correct because when I change the URL and redirect URL's to my Fly.io configuration, the front end has the forms I've been building. Can anyone please help me run this app locally so I don't have to keep deploying my changes to see my updates? Thanks.
It does sound like you're taking the right actions, but there's a couple things to check:
/auth/callback, in your Allowed redirection URL(s) for OAuth.
Try the above and let us know if you're still seeing issues,