Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

How to configure local server using cloudflare or ngrok for local app development?

anon-react-dev
Shopify Partner
1 0 0

Hello,


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.

Reply 1 (1)

Liam
Shopify Staff
2677 288 736

It does sound like you're taking the right actions, but there's a couple things to check:

 

  • When you run `cloudflared tunnel --url http://localhost:8081`, it should provide you with a tunnel URL. Ensure that this URL is accessible from your browser and is correctly tunneling to your local server.
  • In your Shopify Partner Dashboard, make sure to update the App URL and Allowed redirection URL(s) to your tunnel URL (e.g., https://some-cloudflare-tunnel.trycloudflare.com).
  • Remember to include endpoints, like /auth/callback, in your Allowed redirection URL(s) for OAuth.
  • Ensure that the tunnel URL in the cloudflared tunnel command matches the URL from Cloudflare and is correctly configured in your Shopify app settings.

Try the above and let us know if you're still seeing issues,

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog