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

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

ebrown381
Shopify Partner
1 0 4

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.

Replies 5 (5)

00Sarah00
Shopify Partner
16 0 18

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
Shopify Partner
16 0 18

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
Shopify Partner
41 3 5

[build]
automatically_update_urls_on_dev = false

MEHTEC
Shopify Partner
2 0 1

Doesn't help. URLs keep changing on shopify app dev

MEHTEC
Shopify Partner
2 0 1

I found a solution that works for me
Same problem, after app dev the URLs change and accordingly webhooks are sent to the wrong addresses
To fix this you will need 2 opened terminals
1. configure in the toml file
[build]
automatically_update_urls_on_dev = true
2. in the first terminal execute shopify app dev
3. make sure that the urls in the toml file have automatically changed
4. in the second terminal execute the shopify app deploy
5. make sure that on the partner page has a new app version with correct urls
You need to do this every time