Skip to main content

Use Cases & Examples

Real-world scenarios and practical examples for using Cloudflare Tunnels effectively.

Development & Testing​

Use Case 1: Client Demos​

Scenario: Show work-in-progress to client

Without Tunnels:

1. Deploy to staging server (20 min)
2. Share staging URL
3. Make changes
4. Redeploy (20 min each time)
5. Client sees updates (slow)

With Tunnels:

1. Start tunnel (5 sec)
2. Share URL immediately
3. Make changes locally
4. Client refreshes browser
5. Sees updates instantly!

Setup:

Name: Client Demo - Homepage Redesign
Port: 3000 (React dev server)
Auto-start: No
Duration: 1-hour meeting

Share: https://demo-abc-123.trycloudflare.com

Use Case 2: Mobile Device Testing​

Scenario: Test responsive design on real devices

Problem:

Mobile device can't access localhost
Need to test on actual phone/tablet

Solution:

1. Run dev server: localhost:3000

2. Start tunnel:
   Name: Mobile Testing
   Port: 3000

3. Get URL:
   https://mobile-test-xyz.trycloudflare.com

4. Open on phone/tablet:
   - Scan QR code
   - Type URL
   - Bookmark for quick access

5. Test:
   - Touch interactions
   - Responsive breakpoints
   - Mobile browsers
   - Performance

Devices tested:

  • iPhone (Safari, Chrome)
  • Android (Chrome, Firefox)
  • iPad
  • Different screen sizes

Use Case 3: Team Collaboration​

Scenario: Designer needs to see developer's work

Workflow:

Developer:
1. Working on feature branch
2. Starts tunnel to port 3000
3. Shares URL in Slack:
   "Check out the new UI:
    https://feature-xyz-789.trycloudflare.com"

Designer:
1. Clicks link
2. Sees live implementation
3. Provides feedback immediately

Developer:
1. Makes changes
2. Designer refreshes
3. Sees updates instantly

No commits, no deploys, no delays!

Webhook Development​

Use Case 4: Stripe Payment Webhooks​

Scenario: Building Stripe payment integration

Traditional approach:

1. Deploy to public server
2. Configure webhook URL
3. Make changes
4. Redeploy
5. Test again

Result: Slow iteration

With Request Debugger:

1. Start Request Debugger:
   Name: Stripe Webhooks
   
2. Get URL:
   https://stripe-hook-123.trycloudflare.com

3. Configure in Stripe Dashboard:
   Webhook URL: [paste URL]
   Events: payment_intent.succeeded,
          payment_intent.failed

4. Trigger test event

5. View in Xermius:
   - Full webhook payload
   - Stripe-Signature header
   - Event data structure

6. Implement in local code:
   const stripe = require('stripe')(key);
   
   app.post('/webhook', async (req, res) => {
     const sig = req.headers['stripe-signature'];
     const event = stripe.webhooks.constructEvent(
       req.body, sig, webhookSecret
     );
     // Handle event...
   });

7. Test locally:
   Point tunnel to local server
   Receive real webhooks
   Debug in real-time

Result:

  • ✅ Fast iteration
  • ✅ Real webhook data
  • ✅ Local debugging
  • ✅ No deployment needed

Use Case 5: GitHub Webhooks​

Scenario: Building GitHub bot

Steps:

1. Create Request Debugger:
   Name: GitHub Bot Dev

2. Add webhook in GitHub:
   URL: https://github-bot-456.trycloudflare.com/webhook
   Events: Push, Pull request, Issues

3. Analyze webhook format:
   - See actual GitHub payload
   - Understand data structure
   - Check signature format

4. Implement locally:
   app.post('/webhook', (req, res) => {
     const event = req.headers['x-github-event'];
     
     switch(event) {
       case 'push':
         // Handle push
         break;
       case 'pull_request':
         // Handle PR
         break;
     }
   });

5. Point tunnel to local server:
   Change debugger to standard tunnel
   Port: 3000 (local server)

6. Test with real events:
   - Create PR
   - Push commits
   - See bot respond

API Development​

Use Case 6: Third-Party Integration​

Scenario: Partner will send data to your API

Problem:

Partner: "We'll send POST requests to your API"
You: "What format? What headers?"
Partner: "Just standard JSON"
You: "Can you be more specific?"

Result: Back-and-forth confusion

Solution with Request Debugger:

1. Start debugger:
   Name: Partner API Format

2. Give URL to partner:
   "Please send test requests to:
    https://api-test-789.trycloudflare.com/data"

3. Partner sends test data

4. You see EXACTLY:
   POST /data
   Content-Type: application/json
   Authorization: Bearer abc123xyz
   X-Partner-ID: 12345
   
   {
     "timestamp": "2024-01-17T10:30:00Z",
     "event_type": "user.created",
     "data": {
       "user_id": "usr_123",
       "email": "user@example.com"
     }
   }

5. Now you know:
   - Exact JSON structure
   - Required headers
   - Auth format
   - Field names

6. Build API accordingly:
   app.post('/data', authenticate, (req, res) => {
     const { event_type, data } = req.body;
     // Handle exactly as they send it
   });

Use Case 7: OAuth Development​

Scenario: Implementing OAuth login

OAuth callback flow:

1. Start tunnel:
   Name: OAuth Callback Test
   Port: 3000

2. Get URL:
   https://oauth-test-abc.trycloudflare.com

3. Configure OAuth provider:
   Redirect URI: 
   https://oauth-test-abc.trycloudflare.com/auth/callback

4. Initiate OAuth flow:
   User clicks "Login with Google"

5. OAuth callback to tunnel:
   GET /auth/callback?
     code=4/0AY0...
     &scope=email%20profile
     &authuser=0
     &prompt=consent

6. Exchange code for token:
   const { code } = req.query;
   const token = await exchangeCodeForToken(code);

7. Test locally:
   Full OAuth flow on localhost
   Real provider
   Real tokens

External Service Testing​

Use Case 8: IoT Device Development​

Scenario: IoT device sends data to cloud

Setup:

IoT Device: Temperature sensor
Sends: POST requests every 5 minutes

1. Start Request Debugger:
   Name: IoT Data Collection

2. Get URL:
   https://iot-data-xyz.trycloudflare.com/telemetry

3. Configure in device:
   Endpoint: [paste URL]

4. View incoming data:
   POST /telemetry
   {
     "device_id": "sensor_001",
     "temperature": 22.5,
     "humidity": 45.2,
     "timestamp": "2024-01-17T14:30:00Z"
   }

5. Analyze:
   - Data format
   - Frequency
   - Any issues
   - Battery level

6. Implement cloud API:
   Now you know exact format
   Build accordingly

Use Case 9: Payment Gateway Testing​

Scenario: Testing payment callbacks

Payment flow:

1. Start debugger:
   Name: Payment Gateway IPN

2. Configure in payment gateway:
   IPN URL: https://payment-ipn-123.trycloudflare.com/ipn

3. Make test payment

4. View IPN notification:
   POST /ipn
   {
     "transaction_id": "TXN123",
     "status": "completed",
     "amount": "29.99",
     "currency": "USD",
     "customer_email": "buyer@example.com"
   }

5. Understand format

6. Implement handler:
   app.post('/ipn', async (req, res) => {
     const { transaction_id, status } = req.body;
     
     if (status === 'completed') {
       // Update database
       // Send confirmation email
     }
     
     res.send('OK');
   });

Prototyping & Sharing​

Use Case 10: Quick Prototypes​

Scenario: Show prototype to stakeholders

Fast workflow:

Morning:
1. Create quick prototype
2. Start tunnel
3. Send link to team:
   "Quick prototype: https://proto-xyz.trycloudflare.com"

Team:
1. Reviews prototype
2. Provides feedback

Afternoon:
1. Make changes
2. Team refreshes
3. Sees updates

Result: Multiple iterations in one day

Use Case 11: Conference Demos​

Scenario: Presenting at conference

Problem:

Conference WiFi: Blocked ports
Firewall: Strict rules
Can't: Connect to localhost

Solution:

Before presentation:
1. Test demo on localhost
2. Start tunnel
3. Get URL: https://conf-demo-abc.trycloudflare.com

During presentation:
1. Use conference WiFi
2. Open tunnel URL
3. Demo works perfectly!

No network issues
Always accessible
Professional presentation

Use Case 12: Remote User Testing​

Scenario: User testing with remote participants

Setup:

1. Prepare test environment:
   localhost:3000

2. Start tunnel:
   Name: User Testing Session 1

3. Share with participants:
   "Please visit:
    https://usability-test-123.trycloudflare.com
    And complete the tasks"

4. Participants test from anywhere:
   - Different countries
   - Different networks
   - Different devices

5. Collect feedback

Development Workflows​

Use Case 13: Microservices Testing​

Scenario: Testing microservices locally

Setup:

Service 1 (Frontend): localhost:3000
Service 2 (API): localhost:8080
Service 3 (Auth): localhost:8081

Create tunnels:
1. Frontend: https://app-abc.trycloudflare.com
2. API: https://api-def.trycloudflare.com
3. Auth: https://auth-ghi.trycloudflare.com

Benefits:
- Test service communication
- Share specific services
- Debug integration issues
- Test from external services

Use Case 14: CI/CD Integration​

Scenario: Test deployment before pushing

Workflow:

1. Make changes locally
2. Start local build
3. Tunnel to build output
4. Run automated tests against tunnel
5. Manual QA via tunnel URL
6. If all pass → Commit and push
7. If fails → Fix and repeat

Pre-push testing!

Tips for Each Use Case​

For Demos​

✓ Test tunnel before meeting
✓ Bookmark URL for quick access
✓ Have backup plan (video recording)
✓ Close unnecessary browser tabs
✓ Check service is running

For Webhooks​

✓ Use Request Debugger first
✓ Analyze format before coding
✓ Export example requests
✓ Verify signature format
✓ Test error cases

For Team Sharing​

✓ Name tunnels clearly
✓ Add description of what's shown
✓ Inform team when URL changes
✓ Stop tunnel when done
✓ Clean up old tunnels

For Testing​

✓ One tunnel per service
✓ Use stable ports
✓ Document URLs
✓ Clear logs between tests
✓ Export important data

Next Steps​