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:

Bash

brew install cloudflare/cloudflare/cloudflared

Now we can authenticate the client to continue configuring our tunnel:

Bash

cloudflared tunnel login

This 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:

Bash

cloudflared tunnel create default

You can use the following command to verify your tunnel and list all tunnels you might have created:

Bash

cloudflared tunnel list

Now 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:

Bash

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:8002 where the port :8002 is where I point all my app to run in development