Need a static url (ngrok changes urls). Cloudflared Error

Retired Boards Appdev Tools
1

I learned that creating Script tags means that you need a static url, or update the new ngrok host url on all script tags every single render. The Shopify CLI does not support a custom domain for ngrok (as far as I know) and so I looked into a Cloudflared tunnel.

I got the Cloudflared tunnel setup and working with a domain I own and pointed it to Cloudflared. Now I have a Cloudflared tunnel setup and running with the command:

cloudflared tunnel run --url http://localhost:7000

In which I have already setup the tunnelID and configuration. I can run a test, cloudflared tunnel info , and it verifies my tunnel is running.

AnswerBook_2-1660105416049.png
AnswerBook_2-1660105416049.png1793×435 59.5 KB

I now go into my app to run the code specified in the readme that comes with the CLI when you create the app.

AnswerBook_0-1660105034711.png
AnswerBook_0-1660105034711.png1392×382 15.2 KB

And run/test the following codes:

npm run dev --tunnel-url http://localhost:7000

npm run dev --tunnel-url https://localhost:7000

npm run dev --tunnel-url http://www.myowneddomain.com:7000

npm run dev --tunnel-url http://www.myowneddomain.cloudflared.com:7000

All giving me the same error:

AnswerBook_1-1660105173494.png

I have also given it a try to put in different urls into the URL setup for my app in the partner Dashboard. I’m not sure if this has anything to do with the error but I figured it was worth a try.

This screenshot can be found by clicking on your app and tabbing down to “App Setup” on the left menu.

AnswerBook_3-1660105649781.png
AnswerBook_3-1660105649781.png1024×424 15.8 KB

Has anyone successfully setup Cloudflared? Has anyone successfully setup a static url for their app regardless? Should I just go ahead and get a Heroku account and run my app? I am struggling to run locally without the CLI because there are no react-scripts / npm functions to run the app without the CLI. Shopify has a configuration unknown to me where react-scripts points to the public folder when it needs to point to the pages folder. Has anyone had issues with these things? Please help! Thank you.

2

Use CloudFlare tunnel, it is relatively easy (yeah that is CloudFlared).

Open Zero Trust

Go to Access, then tunnels.

For the public hostname config, choose a subdomain and one of you CloudFlare (proxied) domains, then set the service to http, your localhost (or your docker IP) + port.

Save it all, run the docker container they provide you with.

That should work.

Another, maybe simpler way would be to just forward a port on your router and point a sub domain to your public IP address, though I’d go for the tunnel.

3

Sorry to bring this up again but what do we use for the --tunnel-url flag in Shopify CLI?
In ZeroTrust my tunnel is set up this way:

  1. Public hostname: subdomain.mydomain.com
  2. Service: https://localhost:8001

My shopify cli command is:

npm run dev – --reset --verbose --tunnel-url https://subdomain.mydomain.com

It says error: invalid tunnel-url

So I tried
npm run dev – --reset --verbose --tunnel-url https://subdomain.mydomain.com:8001

It completes without errors, but it still doesn’t work. I cant install the app on any store.

Unfortunately Shopify CLI 3.44.1 does not set up the app on any store, even though a store is chosen. It also doesn’t set up any tunnel, even ngrok, which is why I am messing with Cloudflared.