How to use --tunnel-url to fix tunneling URL

Shopify CLI and Libraries
1 
# = shopify app dev
$ npm run dev

By default, shopify cli creates random tunneling url powered by cloudflare but some cases it might be useful to fix the tunneling url.

How do I setup cloudflare tunnel url manually ?

2

Requirements

  • create cloudflare account
  • register custom domain to your cloudflare account
  • install cloudflared command

Fix web app port

# add port config
$ vi shopify.web.toml

port = 9000

Preparing tunnel

$ cloudflared login
$ cloudflared tunnel create shopifyapp
# Take a note tunnel UUID and credential file path

$ vi ~/.cloudflared/config.yaml

url: http://localhost:9000
tunnel: <Tunnel-UUID>
credentials-file: /path/to/.cloudflared/<Tunnel-UUID>.json

Mapping the settings to CNAME.

$ cloudflared tunnel route dns shopifyapp shopifyapp.example.com

Exec tunnel and run App

# run following commands in different windows
$ cloudflared tunnel run
# NOTE: tunnel port is different from web port.
$ npm run dev npm run dev -- --tunnel-url https://shopifyapp.example.com:9001
3

Hi there!

You can do this with the following command

npm run dev -- --tunnel-url=your-tunnel-url

Here is the API doc: app dev

2 Likes
4

Thanks for your support and sorry for self solved :grinning:

5

Hi @Tomoyuki_Kashiro!

I wanted to add some extra details about your solution:

  • When running the dev command with --tunnel-url is important to use same port you have in your cloudflared config: in your example it’d be always port 9000 (not 9001)
  • You don’t need any port in shopify.web.toml, the CLI does this for you when using the tunnel-url flag. If you want a custom port for your web config, use a different one, never the same as the tunnel config (so 9001 would be fine here). If you use the same port, there’d be conflicting configurations and you’ll probably have issues with either extensions or your web app.

Hope this helps!

6

Thanks, Lsaac !
That works well.

so the correct way to use tunnel should be following steps.

Requirements

  • create cloudflare account
  • register custom domain to your cloudflare account
  • install cloudflared command

Preparing tunnel

$ cloudflared login
$ cloudflared tunnel create shopifyapp
# Take a note tunnel UUID and credential file path

$ vi ~/.cloudflared/config.yaml

url: http://localhost:9000
tunnel: <Tunnel-UUID>
credentials-file: /path/to/.cloudflared/<Tunnel-UUID>.json

Mapping the settings to CNAME.

$ cloudflared tunnel route dns shopifyapp shopifyapp.example.com

Exec tunnel and run App

# run following commands in different windows
$ cloudflared tunnel run
$ npm run dev -- --tunnel-url https://shopifyapp.example.com:9000
1 Like