Creating a free tunnel service for developing Shopify apps

This will be a quick tutorial on creating a tunnel service using Cloudflare’s Tunnel solution. If you’re developing Shopify apps locally, you need a way to expose your localhost to the internet so Shopify can communicate with your app. While Ngrok is popular, it comes with limitations on the free tier. Cloudflare Tunnel offers a completely free alternative with better performance.

Why Use Cloudflare Tunnel?

• Completely free - No limitations on usage
• Better performance - Leverages Cloudflare’s global network
• More secure - Built-in DDoS protection
• Custom domains - Use your own domain names
• No session timeouts - Unlike Ngrok’s free tier

Prerequisites

Before we begin, you’ll need:

• A Cloudflare account (free)
• Homebrew installed (for macOS) or appropriate package manager
• A domain added to Cloudflare (optional, but recommended)

Step 1: Install Cloudflare Tunnel

On macOS:

brew install cloudflare/cloudflare/cloudflared

On Linux:

# Debian/Ubuntu
wget -q https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
sudo dpkg -i cloudflared-linux-amd64.deb

# Or using package manager
curl -L https://pkg.cloudflare.com/cloudflare-main.gpg | sudo tee /usr/share/keyrings/cloudflare-archive-keyring.gpg >/dev/null
echo "deb [signed-by=/usr/share/keyrings/cloudflare-archive-keyring.gpg] https://pkg.cloudflare.com/cloudflared $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/cloudflared.list
sudo apt-get update && sudo apt-get install cloudflared

On Windows:

Download the executable from Cloudflare’s releases page.

Step 2: Authenticate with Cloudflare

Run the authentication command:

cloudflared tunnel login

This will:

1. Open your browser
2. Prompt you to log into your Cloudflare account
3. Select the domain you want to use
4. Generate a certificate stored in ~/.cloudflared/

Step 3: Create Your Tunnel

Create a tunnel with a descriptive name:

cloudflared tunnel create shopify-dev

This creates a tunnel and generates credentials. You’ll see output like:

Tunnel credentials written to /Users/yourname/.cloudflared/[TUNNEL-ID].json
Created tunnel shopify-dev with id [TUNNEL-ID]

Step 4: Configure the Tunnel

Create a configuration file at ~/.cloudflared/config.yml:

tunnel: [YOUR-TUNNEL-ID]
credentials-file: /Users/yourname/.cloudflared/[TUNNEL-ID].json

ingress:
  - hostname: shopify-dev.yourdomain.com
    service: http://localhost:3000
  - service: http_status:404

Replace:

• [YOUR-TUNNEL-ID] with your actual tunnel ID
• shopify-dev.yourdomain.com with your desired subdomain
• localhost:3000 with your app’s local address

Step 5: Configure DNS in Cloudflare

Option 1: Via Dashboard

1. Log into Cloudflare Dashboard
2. Select your domain
3. Go to DNS settings
4. Add a CNAME record:
   • Name: shopify-dev
   • Target: [TUNNEL-ID].cfargotunnel.com
   • Proxy status: Proxied (orange cloud)

Option 2: Via CLI

cloudflared tunnel route dns shopify-dev shopify-dev.yourdomain.com

Step 6: Run the Tunnel

Start your tunnel:

cloudflared tunnel run shopify-dev

Your local development server is now accessible at https://shopify-dev.yourdomain.com!

Step 7: Configure Your Shopify App

Update your Shopify app configuration:

In your .env file:

SHOPIFY_APP_URL=https://shopify-dev.yourdomain.com
HOST=https://shopify-dev.yourdomain.com

In your app settings (Partners Dashboard):

1. App URL: https://shopify-dev.yourdomain.com
2. Allowed redirection URL(s):
   • https://shopify-dev.yourdomain.com/auth/callback
   • https://shopify-dev.yourdomain.com/api/auth/callback

Advanced Configuration

Multiple Services

You can expose multiple services through one tunnel:

tunnel: [YOUR-TUNNEL-ID]
credentials-file: /Users/yourname/.cloudflared/[TUNNEL-ID].json

ingress:
  # Main app
  - hostname: shopify-dev.yourdomain.com
    service: http://localhost:3000
  
  # Webpack dev server
  - hostname: shopify-dev-webpack.yourdomain.com
    service: http://localhost:8080
  
  # API service
  - hostname: shopify-dev-api.yourdomain.com
    service: http://localhost:4000
  
  - service: http_status:404

Auto-start on System Boot

On macOS:

sudo cloudflared service install

On Linux:

sudo cloudflared service install
sudo systemctl start cloudflared
sudo systemctl enable cloudflared

Using with Docker

Create a docker-compose.yml:

version: '3.8'

services:
  cloudflared:
    image: cloudflare/cloudflared:latest
    command: tunnel run
    environment:
      - TUNNEL_TOKEN=${TUNNEL_TOKEN}
    restart: unless-stopped
    network_mode: host

  shopify-app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - SHOPIFY_APP_URL=https://shopify-dev.yourdomain.com

Troubleshooting

Connection Refused

If you see “connection refused” errors:

1. Ensure your local server is running
2. Check the port number in your config
3. Verify localhost is accessible

DNS Not Resolving

1. Wait 1-2 minutes for DNS propagation
2. Check your CNAME record in Cloudflare
3. Ensure the proxy status is enabled (orange cloud)

Certificate Errors

# Re-authenticate
cloudflared tunnel login

# Recreate the tunnel
cloudflared tunnel delete shopify-dev
cloudflared tunnel create shopify-dev

Tips for Shopify Development

1. Webhook URLs

Configure your webhook URLs to use the tunnel:

const webhookUrl = `${process.env.SHOPIFY_APP_URL}/api/webhooks`;

2. OAuth Callbacks

Ensure your OAuth callback URLs match:

const redirectUri = `${process.env.SHOPIFY_APP_URL}/api/auth/callback`;

3. Multiple Environments

Create different tunnels for different environments:

cloudflared tunnel create shopify-dev
cloudflared tunnel create shopify-staging
cloudflared tunnel create shopify-preview

4. Team Development

Share tunnel access with your team:

# Generate a service token
cloudflared tunnel token shopify-dev

# Team members can connect using:
cloudflared tunnel run --token=[SERVICE_TOKEN]

Comparison with Ngrok

Feature	Cloudflare Tunnel	Ngrok Free
Custom domains	✅ Free	❌ Paid only
Concurrent tunnels	✅ Unlimited	❌ 1 tunnel
Request limits	✅ None	❌ 40 requests/minute
Session timeout	✅ None	❌ 2 hours
HTTPS	✅ Included	✅ Included
Team collaboration	✅ Free	❌ Paid only

Security Best Practices

1. Access Policies: Set up Zero Trust access policies in Cloudflare
2. IP Restrictions: Limit access to specific IP ranges
3. Authentication: Add Cloudflare Access for additional auth layer
4. Separate Tunnels: Use different tunnels for dev/staging/production

Conclusion

Cloudflare Tunnel provides a robust, free solution for Shopify app development that outperforms traditional tunneling services. With no usage limits, custom domains, and enterprise-grade security, it’s the perfect tool for both solo developers and teams.

The setup might seem complex initially, but once configured, you’ll have a reliable tunnel that just works—no more session timeouts or request limits interrupting your development flow.

Happy coding! 🚀