Cloudflare Quick Tunnels

Shopify CLI and Libraries
,
1

We are building an app using the default TypeScript Remix template. Recently, Cloudflare Quick Tunnels doesn’t seem to target our localhost correctly.

I’ve tested it on both my Mac and PC with the original app scaffolding, and the problem appears to be intermittent—sometimes it works, and sometimes it doesn’t.

The app works fine when accessed directly through localhost.

Here is a screenshot of the app’s initial page:

image
image2426×1550 274 KB

Has anyone else encountered the same problem or know how to fix it?

2

I’m experiencing the same and yet to find a solution.

Looks like something related to DNS for trycloudflare.com. When creating a tunnel using cloudflared, I get the same issue even though the tunnel is created.

Even Cloudflare’s DNS servers do not resolve trycloudflare.com:

nslookup trycloudflare.com 1.1.1.1
Server:		1.1.1.1
Address:	1.1.1.1#53

Non-authoritative answer:
*** Can't find trycloudflare.com: No answer
3

Ngrok is also free and I’ve found it to be more reliable.

You can simply add your ngrok URL to your Shopify TOML file. Just a suggestion if the Cloudflare tunnel continues to cause issues.

1 Like
4

It could work, but the /extensions/dev-console page isn’t loading when using ngrok, which prevents me from previewing the full-page customer account UI extension. Do you know how I can find the generated URL?

5

You need to run Shopify CLI with --tunnel-url flag, for example:

shopify app dev --tunnel-url=https://extensions-domain.ngrok.dev:3001

If you need ngrok for app as well, create ngrok.yml file in the root of the project and enter:

version: 2
authtoken: paste_ngrok_auth_key_here
tunnels:
  first:
    proto: http
    addr: 3000
    domain: app-domain.ngrok.dev
  second:
    proto: http
    addr: 3001
    domain: extensions-domain.ngrok.dev

And run it with

ngrok start --config ngrok.yml --all

This might be limited to paid Ngrok plan, although I highly recommend it as it never failed me over the years.

1 Like
6

It could work, but the /extensions/dev-console page isn’t loading when using ngrok, which prevents me from previewing the full-page customer account UI extension.

Do you see a specific error your web browser’s dev tools console?

In my own setup, I only see one small customization:


HOST=0.0.0.0 npx shopify app dev

In my case I’m running my environment on a remote host through Gitpod. So I had to open up the binding, but not sure of your case.