This will be a quick tutorial on creating a tunnel service using Cloudflare’s Tunnel solution to start developing Shopify apps locally, quickly, and without the need for changing tunnel endpoints. Also, Ngrok is great, but free is better.
The first thing you will need is a Cloudflare account. That should be self explainatory, just go here: https://dash.cloudflare.com/sign-up and sign up.
Next, you should install the Cloudflare CLI, this will allow us to run our tunnel. I’m using MacOS Homebrew:
brew install cloudflare/cloudflare/cloudflaredNow we can authenticate the client to continue configuring our tunnel:
cloudflared tunnel loginThis will open your browser, it may ask for you to login, then it will list the domains you can add the tunnel to:
Click Authorize and you should see a confirmation.
This will create a certificate on your machine, which would be ~/.cloudflared/cert.pem by default, allowing you use cloudflared to communicate with Cloudflare.
Now let’s create the tunnel and give it a name, I’m going to name mine default:
cloudflared tunnel create defaultYou can use the following command to verify your tunnel and list all tunnels you might have created:
cloudflared tunnel listNow open your Zero Trust dashboard, go to Access dropdown, then click Tunnels. You will see the tunnel listed as Inactive and a little hint telling you the tunnel is locally managed.
These steps are optional, but make managing your tunnel much easier since you can do it through the Zero Trust UI rather than through the Cloudflared CLI.
Click on the tunnel name, then click configure in the popout that shows
At this point you will need to run the tunnel in order to start the migration. Run the following command to start it up:
cloudflared tunnel run default
This will enable the Start migration button. You can click it now.
Now just confirm all steps, no need to fill anything out, and confirm the migration:
You should now see it listed as Healthy!
Now we need to configure the public hostnames we want to use. Click on the title of the tunnel then Configure in the popout again. On the following page go to the Public Hostname tab, and let’s Add a public hostname
Fill out the info:
- Subdomain: the name of the subdomain you want
- Domain: the domain of the tunnel
- Path: I dont set this
- Type: HTTP
- URL: Where the tunnel points to locally. I use
localhost:8002where the port:8002is where I point all my app to run in development
To confirm: you can go to your domains DNS settings and you should see the listing for your tunnel:
Finally, go to your app settings in Shopify, and change your development apps App URL‘s to the newly created tunnel url:
You’re done! Now whenever you start development, just make sure to start up your tunnel service using the start command:
cloudflared tunnel run default
