Testing My Shopify App Locally Broke My Production App

Shopify CLI and Libraries
1

Hi everyone,

I wanted to share a serious issue I encountered while developing my Shopify app.

When I tried to test some changes locally using npm run dev, I discovered that Shopify CLI automatically updated my App URLs in the Partner Dashboard to point to the local development tunnel (a Cloudflare URL like sox-farmer-xml-prices.trycloudflare.com).

To my horror, this immediately affected all my live users! Everyone who was using my app suddenly got redirected to my temporary development server, effectively breaking my production app for all my customers.

What I Tried

At first, I didn’t understand what was happening. I thought I could simply:

  1. Run npm run dev to test locally

  2. When done, deploy my changes to my production URL

But every time I ran npm run dev, it changed my app’s URLs in the Partner Dashboard. I tried setting automatically_update_urls_on_dev = false in my shopify.app.toml file, which stopped the URL changes but then I couldn’t test my app locally at all.

I tried manually updating URLs back after testing, but this was tedious and risky - one mistake and my users would be affected again.

2

Hi! I’m sorry you had that issue with your production app.

The best way to handle that situation is using different app configurations, for example one for development and another for production. That way, you can safely turn on the automatic update for URLs on your dev environment, and keep it off for your production environment.

You can learn more about app environments here: Manage app config files

3

Yes, sorry this happened to you!

I’ll add that this would not have happened to your production app with the new app dev command, which is currently in early access as part of the new Dev Platform.

Even with the new app dev though, you will probably want a separate copy of your app for dev and production, as @gonzaloriestra describes.

4

Usually, development and production environments require two different environments. You can prepare different configuration files to distinguish the usage environment and avoid this situation from happening

5

Hey @shoppreuser ,

Additionally once you have multiple config files (.toml), it’s also helpful to setup your npm run dev and/or npm run deploy to always run npm run config:use first so that you can select which config you want to us. This has saved me many times from running or deploying the wrong config.