Constantly having to whitelist new ngrok URLs

[seandz]

I notice every time I restart ngrok I have a new forwarding url. This then requires updating the app url settings to this new URL.

Is this also how you guys are working with the app during development or is there a more efficient way to manage this? I am also open to alternatives.

[Adam_Hurlburt · Accepted solution]

I would suggest purchasing the cheapest ngrok plan, it's like $5 a month or something and will provide support for custom subdomains. This way you don't get a new ngrok url each time. I also found the performance better.

The paid plan enables you to set a custom subdomain on the ngrok website.

The command to launch then becomes:

ngrok http -subdomain=your_chosen_subdomain port

And your url remains static as:

https://your_chosen_subdomain.ngrok.io

I have no affiliation with ngrok but I found this to be the best solution for local development.

serveo.net allows this capability for free, however I found that several times during development serveo.net was unresponsive and I'd have to fallback to ngrok (and go through the process you refer to with changing the whitelisted urls). I also found serveo.net to be signficantly slower and to stall at times.

As a developer I think it's well worth the low cost of $5 / mnth to be more productive and highly recommend the ngrok paid plan.

PS: while doing local dev I also found it useful to develop outside of the shopify admin portal when possible, you can achieve this by setting

forceRedirect=false in your Provider config if you are building an embedded app. Note that some functions, like redirects, toasts, modals, won't work if you are not inside the admin portal but you can still use the url to navigate to a certain page you are working on and it will make active development on that page quicker.

[abhinavp00719]

I too had this problem. I solved this by deploying my app on Heroku. And whenever I change something; I push it to GitHub, which automatically reflects the changes on the Heroku deployment.

[gilg]

---

@abhinavp00719 wrote:

I too had this problem. I solved this by deploying my app on Heroku. And whenever I change something; I push it to GitHub, which automatically reflects the changes on the Heroku deployment.

---

How long does it take for your changes to reflect? This seems like an awfully slow method of development, no? I'd assume at least 60-120s?

[aner87]

@abhinavp00719  how did you solve the problem by doing so?
Did Heroku give you an immutable endpoint to use, similarly to what ngrok does in the payment plan?

Thank you 😊 

[abhinavp00719]

Hello!

I found something very very useful for tackling this problem.

Use shopify cli tool https://github.com/Shopify/shopify-app-cli

This will automatically update your app's link to the latest ngrok link without you changing with your hands. This will also provide you with a boilerplate. And deploying on heroku will be like breeze. And also make a free account on ngrok and use it's token in this app. Your limits won't be very less.