Why does the application URL change every time I run npm run dev on Shopify?

[ebrown381]

I am having an issue where I try and run "npm run dev" and it tells me the callback urls need to be changed to the values presented, then run "npm run shopify app config push" which I do.

When I run the command, however, I get the error "Command no longer supported" and instead tells me to run "npm run shopify app deploy", which I do.

After running the deploy command, I try running "npm run dev" again, but when I do, it tells me the callback urls need to be changed again, and the loop keeps going.

Is there something I am doing wrong? Why does the application url change every time I run "npm run dev"?

I've also tried running dev, then in a separate cli tab, change the callback urls and run the deploy command. I have also changed the urls in the partners page while dev was still running, but none of that works. Every time I run dev and click on the 'Preview Url", the app page errors out saying it can't find the page.

[00Sarah00]

Hello

Just in case somebody is still looking for a solution for this.

Shopify creates its own tunnel to connect your local app to your development store. It will keep changing the URLs every time you run the command:

"npm run dev" (or "yarn dev")

Here is a my solution that will help keep the URL permanent during the app development.

1- create an account at ngrok.com

2- once you are inside your account at ngrok, click on "Domains" on the left menu

3- create a domain -- This will be your permanent domain to use for tunneling with shopify.

4- copy the domain

5- in your shopify.app.toml file paste this domain in: "application_url" and "redirect_urls" (needless to say that you need to keep the auth/callback, auth/shopify/callback, and api/auth/callback parts of the 3 redirect_urls intact)

6- in your terminal, run: "npm run deploy"

7- then run: "npm run dev" - keep watching for the url that will be shown in the terminal: it should look like this: http://localhost:PORT

where PORT is the port number that the shopify cli will give you.

8- in another terminal window run: ngrok http --domain=YOUR-NGROK-DOMAIN PORT

YOUR-NGROK-DOMAIN is the domain ngork gives you. You can find it as follows: in your ngork account hit 'Domains' in the left side menu, then at the very right there is a small square icon if you hover on it, it will say: "Start a tunnel", click on it and a side-panel will show the command I pasted above, which is: ngrok http --domain=YOUR-NGROK-DOMAIN PORT

Now, put the port number Shopify gave in step 7 in the command: "ngrok http --domain=YOUR-NGROK-DOMAIN PORT"

and hit enter..

Go back to the terminal where shopify is running and hit "p" and Voila..

Keep in mind the port will change every time your run: "npm run dev"

Just update your ngrok command with the new port number each time..

[00Sarah00]

Sorry I forgot to mention, before step 2, you need to install ngrok on your computer and run the command:

"ngrok config add-authtoken YOUR-AUTH-TOKEN"

This is found on the left side menu under: "Setup & Installation"

[Codesto1]

[build]
automatically_update_urls_on_dev = false