"Have Shopify automatically update your app's URL in order to create a preview experience?"

[JorensM]

Hello, I wanted to know what this message means when running 'npm run dev' - "Have Shopify automatically update your app's URL in order to create a preview experience?"

[Liam · Accepted solution]

Hi JorensM,

If you choose to have Shopify automatically update your app's URL, the Shopify CLI will update the APP_URL environment variable in your development environment to match the URL of the preview experience. This allows your app to make requests to the development store and interact with the preview experience.

Hope this helps!

[JorensM]

Thanks!

[arnav98]

Hi Liam,

But what if I select the option to not update the URL every time I do "npm run dev", what will happen?

Why does this option exist? For what reasons could be it feasible to update the URL every time in some case and not update it for others?

Thanks!

[Liam]

Hi Arnav98,

If you choose not to have Shopify update the app URL when running `npm run dev`, your app's URL in your Shopify Partner Dashboard will not be automatically updated to match the local development server URL.

This means that if you try to preview your app in a development store, it won't load your local development version. Instead, it'll try to load your app from the URL that's currently set in your Shopify Partner Dashboard, which could be a production URL or a different development URL. This could make it more difficult to test changes you're making in your local development environment.

Whether or not you want Shopify to update the URL might depend what you're currently doing, for example if there's multiple developers working on the same app at the same time, each with their own local development environment, you'd likely choose to not update the URL. Different developers constantly updating the app's URL could lead to confusion, as the URL in the Shopify Partner Dashboard would keep changing to different localhost URLs. 

Also, certain features of your app, such as webhooks or APIs, might require a publicly accessible URL, and won't work with a localhost URL. Again you might prefer to manually set the app's URL to a tunneling service like ngrok, and wouldn't want the URL to update automatically when running your development server. 

Hope this makes it a bit clearer 🙂 

[arnav98]

Hi Liam,

Thanks for your quick response and detailed explanation. I am facing an issue though, whenever I do not update the URL and run the application locally, it keeps the URLs in the partner account intact but then updates the cloudflare URL in VSCode terminal to a new URL, which again results into me not being able to view the app in the admin.

[arnav98]

Because I want to generate OAuth token on backend but I am not able to since the URL keeps on changing

[Liam]

Is running the CLI command causing the cloudflare URL to update?

[arnav98]

No, it was a misunderstanding on my part. Thanks!

[Liam]

No worries! Glad it's working now 🙂 

[colton007]

Hi, I have an embedded app and I want it to call my public api route to get some data about the store the app is running inside.

I need to know the application_url to send a request to my public API route.

But in dev this url changes on every deploy (run npm dev) and in prod it will be a different url.

How do I know what the application_url is from my embedded app's javascript (runs in the browser) or the related .liquid file so I can create the API request in the browser?

[Dan140]

@Liam is there a link to a suggested workflow for multiple developers to work on an app locally with a preview experience?

[anhdd-kuro-159]

Does this update to the app's URL affect the production ?

In other words, will all the stores that have the app installed now reference the new URL?

[arnav98]

It will update the URLs in whichever app the code is being pointed to while running the dev command. So if you are running "npm run dev" while pointing to your production app, it will update the URLs in that app.