[Bug]: yarn dev / checkout extensions / --tunnel-url

[awd]

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

What type of project are you working on?

extension

Expected behavior

Running yarn dev with a custom tunnel url should work, and the extension preview and dev-console should also work.

Run: yarn dev --tunnel-url=https://shopify-cli-bugs.ngrok.io

Visit: https://shopify-cli-bugs.ngrok.io/extensions/dev-console

The dev console should load.

Actual behavior

When accessing the defined tunnel url dev console, the browser shows an error like:

ERR_NGROK_3200
Tunnel shopify-cli-bugs.ngrok.io not found

Stack trace

No response

Reproduction steps

1. run: yarn dev --tunnel-url=https://shopify-cli-bugs.ngrok.io
2. visit: https://shopify-cli-bugs.ngrok.io/extensions/dev-console
3. error

You'll need to use a custom tunnel name through ngrok.

When yarn dev generates a random ngrok url - the dev console loads, as does the checkout ui extension preview.

Operating System

Mac OS Monterey

CLI version (run shopify version if you're not sure)

latest / 3.x

Shell

iTerm2

Ruby version (run ruby -v if you're not sure)

3.1.2

What language and version are you using in your application?

Ruby 3.1.2

[alvaro-shopify]

Hi @awd , thanks for opening up an issue!. I have tried to reproduce the problem and I have not been able to. These are the steps I have followed

1. Created ngrok tunnel to an available local port ngrok http local_port
2. Once created, write down ngrok forwarding url (ngrok_url) and local port used (local_port). Besides leave the terminal used to create the tunnel opened (you could even see look at the http requests received directly from it)
3. Executed yarn dev --tunnel-url=https://<ngrok_url>:<local_port>. It's important to use the same local port used when creating the tunnel
4. Accessed correctly to http://<ngrok_url>/extensions/dev-console. You should see traffic information in the terminal used to create the tunnel

Please, could you try again following these steps?. Let me know If the problem is not solved so we could take a closer look to it.

[awd]

Hey @alvaro-shopify 👋 Thx for the detailed response!

I've setup the tunnel as you have outlined here, all works as expected in this case.

However, when the repo contains both a checkout extension and a web (embedded app), the trouble begins. The checkout extension takes the priority when visiting dev-console the browser resolves and the UI appears.

When trying to visit the embedded app url (generated by yarn dev) you'll receive an error message in the browser:
{"message":"Route GET:/?shop=redacted.myshopify.com&host=redacted not found","error":"Not Found","statusCode":404}

If I were only working on the checkout extension, then we have no issues, but if I were working on the embedded app - this url is not resolvable, the app cannot be installed, shopify api webhooks would fail.

It's all new, so I am trying to help share a use-case and where I am bumping into unexpected results.

Happy to help out and try other ideas, just let me know :)

[gonzaloriestra]

@awd what Node version are you using? Could you try with Node 17 or 18? We have just found a potential issue related to this when using older versions (still investigating).

[awd]

Hi @gonzaloriestra - currently running with Node v18.3.0

[shauns]

Hi @awd -- struggling to reproduce this one I'm afraid, and this is a scenario that internally we test out a lot. So it would be good to get to the bottom of this -- Some suggestions:

• make sure there are no other ngrok processes (or other tunnels) running, besides the one you're intending. We've seen this case internally in the past
• be sure to upgrade to the latest version of the CLI, in case of bug-fixes: we do update quite frequently
• and as @alvaro-shopify mentioned, the format of --tunnel-url is https://your-tunnel-domain-name:port - with the port number

Let us know how you get on.