Questions and discussions about using the Shopify CLI and Shopify-built libraries.
Greetings,
I've been developing a Subscription UI extension for my app. The development is mostly fine, with a few issues with backwards-compatibility requiring the dependencies in my package.json to be frequently updated, but keeping things up to date solves most issues during development.
There is one issue that is nagging me, however, and has been for the past few weeks; namely that the timeout for loading the subscription UI extension from the developer's machine (using ngrok or others, I personally use localtunnel with the --tunnel-url option) is too small. I'm often developing software outside of the house where I don't have access to 100mbit connections and can only rely on my phone's data, and as such loading 750kb of data over a public tunnelling service can take a few seconds. But shopify seems to be just giving up after 5 seconds, even though eventually the code reaches the Shopify admin (but is not rendered).
As a fix, I'd like to propose that if the development console is open, the timeout for loading should be bumped to a more sensible default for development, like 30 seconds.
As a reference, here is a video of what is happening, visually. After the "There's a problem loading this app" page shows, the code loads, too: the fact that the "Cancel" button shows at the bottom is proof of that (as it is set by my app).
Hey @kwisk. Thanks for letting us know. Unfortunately I know very little about this part of Shopify. I am going to move this to the general API channel as they are more likely to be able to help or take the feedback 🙂
To learn more visit the Shopify Help Center or the Community Blog.
For anyone who finds this on the internet and finds the same issue, I got a bit creative and there is a workaround you can use. Because for local development you are still the only computer accessing the script, you don't actually need to use a tunneling service like ngrok or localtunnel, but can instead set up a https reverse proxy to the port that the shopify cli is listening to.
For my set up, I used a combination of Caddy and mkcert to set up a local server with HTTPS, as follows:
shopify.localhost
reverse_proxy /* 127.0.0.1:8989
tls ./shopify.localhost.pem ./shopify.localhost-key.pem
The referenced files were generated with `mkcert shopify.localhost`. After starting caddy with `caddy run`, you can then start up the shopify cli in your app with the following command:
npm run dev -- --tunnel-url https://shopify.localhost:8989