Creating a free tunnel service for developing Shopify apps

Photo by Dwayne Paisley-Marshall on Unsplash

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: 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/cloudflared

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

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:

Screenshot 2023 11 03 at 11.15.26 AM

Click Authorize and you should see a confirmation.

Screenshot 2023 11 03 at 11.17.01 AM
Screenshot 2023 11 03 at 11.17.15 AM

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 default

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

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.

Screenshot 2023 11 03 at 11.40.23 AM

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

Screenshot 2023 11 03 at 11.43.32 AM

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.

Screenshot 2023 11 03 at 11.45.41 AM

Now just confirm all steps, no need to fill anything out, and confirm the migration:

Screenshot 2023 11 03 at 11.47.58 AM 1

You should now see it listed as Healthy!

Screenshot 2023 11 03 at 11.50.30 AM

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

Screenshot 2023 11 03 at 11.52.25 AM

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
Screenshot 2023 11 03 at 11.55.09 AM

To confirm: you can go to your domains DNS settings and you should see the listing for your tunnel:

Screenshot 2023 11 03 at 12.01.50 PM

Finally, go to your app settings in Shopify, and change your development apps App URL‘s to the newly created tunnel url:

Screenshot 2023 11 03 at 12.03.32 PM

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