I am using my own ngrok for my custom app, but the app still generates its own random redirect urls

Solved

I am using my own ngrok for my custom app, but the app still generates its own random redirect urls

GrantNilsson
Shopify Partner
3 1 3

I have a public custom app (remix) and am wanting to use my own ngrok generated URL. 

I have changed the shopify.app.toml file to NOT "automatically_update_urls_on_dev", and set my ngrok URL 

GrantNilsson_0-1700425197733.png

But whenever I run the app it keeps generating the trycloudflare random url's for the redirect urls????   Why?

 

This is obviously causing a CORS issue when calling into my code running on localhost (redirected by ngrok)

 

I have even tried to set the App URL's via the partner dashboard for the App

GrantNilsson_1-1700425441740.png

 

How can i get the app to use my ngrok URL's and NOT regenerate the random internal cloudflare url's 

Accepted Solution (1)

GrantNilsson
Shopify Partner
3 1 3

This is an accepted solution.

Solution: I now have this working and think I have worked out why it is now working. Firstly you need to specify a Port for the app to run on (as if you don't it will use any random port). The defined port is used when we setup ngrok to create an on demand tunnel or a tunnel using private domain

The Port is added to the (I used 8002)

GrantNilsson_0-1706149235981.png

Then you just need to have another terminal window open with the ngrok tunnel running on it - you can do this using 

 

ngrok http --domain=lightly-included-lizard.ngrok-free.app 8002

 

and you can see it has my domain linked to port 8002

GrantNilsson_2-1706149440356.png

and then just fix up all the references in the shopify.app.toml file to use these as above in question

 

Oh and of course I now run using this command (to ensure it uses the configuration

npm run dev -- --tunnel-url="https://lightly-included-lizard.ngrok-free.app:8002"

 

View solution in original post

Replies 2 (2)

GrantNilsson
Shopify Partner
3 1 3

This is an accepted solution.

Solution: I now have this working and think I have worked out why it is now working. Firstly you need to specify a Port for the app to run on (as if you don't it will use any random port). The defined port is used when we setup ngrok to create an on demand tunnel or a tunnel using private domain

The Port is added to the (I used 8002)

GrantNilsson_0-1706149235981.png

Then you just need to have another terminal window open with the ngrok tunnel running on it - you can do this using 

 

ngrok http --domain=lightly-included-lizard.ngrok-free.app 8002

 

and you can see it has my domain linked to port 8002

GrantNilsson_2-1706149440356.png

and then just fix up all the references in the shopify.app.toml file to use these as above in question

 

Oh and of course I now run using this command (to ensure it uses the configuration

npm run dev -- --tunnel-url="https://lightly-included-lizard.ngrok-free.app:8002"

 

hmk-pmnt
Shopify Partner
15 0 0

How would this approach be used if starting the app using npm start?