Ngrok Tunneling

Share your local development sites with anyone, anywhere using ngrok - integrated directly into DAMP with a single-click tunnel setup.

Quick Setup

Get started in two simple steps:

Features

Global Configuration

Settings → Ngrok Tunneling

Configure default settings for all projects:

Authtoken        → Required - Get from ngrok dashboard
Custom Domain    → Optional - Use your own domain (paid plans)
Region          → Optional - Choose server region (us, eu, ap, etc.)
Compression     → Optional - Enable response compression

Per-Site Configuration

Each project can override global settings with site-specific configuration:

1. Open your project
2. Navigate to Tunnel tab
3. Click Configure to set custom options
4. Save and start tunnel!

Available Options

• Site Authtoken - Use a different ngrok account for this project
• Custom Domain - Specify a custom domain (requires paid plan)
• Region - Select optimal region for your audience
• Compression - Enable/disable compression per site

Using Tunnels

Starting a Tunnel

1. Ensure your project devcontainer is running (open in VS Code)
2. Navigate to the project in DAMP
3. Click the Tunnel tab
4. Click Start Tunnel
5. Copy the public URL and share!

Tunnel Status

Monitor your tunnel with real-time information:

Status          → Running / Stopped
Public URL      → https://abc123.ngrok.io
Connections     → Active connection count
HTTP Requests   → Total requests served

Use Cases

🤝 Client Demos

Share work-in-progress with clients without deploying:

You: "Check out the new feature at https://demo-abc123.ngrok.io"
Client: Views your local dev environment instantly!

🔔 Webhook Testing

Test third-party webhooks locally:

Stripe Webhook URL: https://pay-xyz789.ngrok.io/webhook
GitHub Webhook URL: https://dev-abc123.ngrok.io/github

📱 Mobile Testing

Test your site on real mobile devices:

Public URL: https://mobile-test.ngrok.io
Access from your phone, tablet, or any device!

👥 Team Collaboration

Share your local environment with remote team members:

"Hey team, check my branch at https://feature-xyz.ngrok.io"
No deployment, no waiting - instant collaboration!

Tunnel Architecture

┌──────────────────────────────────────┐
│   Internet (Public Access)           │
│   https://abc123.ngrok.io            │
└────────────────┬─────────────────────┘
                 │
                 │ Ngrok Cloud
                 ↓
┌──────────────────────────────────────┐
│   Ngrok Container (devnet)           │
│   Port: 4040 (local API)             │
└────────────────┬─────────────────────┘
                 │
                 │ Docker Network
                 ↓
┌──────────────────────────────────────┐
│   Your DevContainer                  │
│   myapp_devcontainer:8080            │
│   PHP Application Running            │
└──────────────────────────────────────┘

Advanced Features

Custom Regions

Optimize latency by selecting the closest region:

• us - United States (default)
• eu - Europe
• ap - Asia/Pacific
• au - Australia
• sa - South America
• jp - Japan
• in - India

Compression

Enable compression to reduce bandwidth:

{
  "compression": true
}

Automatically compresses HTTP responses using gzip.

Multiple Tunnels

Run tunnels for multiple projects simultaneously:

Project A: https://app-a.ngrok.io
Project B: https://app-b.ngrok.io
Project C: https://app-c.ngrok.io

Each project gets its own isolated tunnel.

Security Considerations

Best Practices

✅ Do:

• Use tunnels for temporary sharing
• Add authentication to sensitive endpoints
• Monitor tunnel traffic
• Stop tunnels when not in use

❌ Don't:

• Share tunnel URLs in public forums
• Use production credentials in dev
• Leave tunnels running indefinitely
• Expose admin panels without protection

Troubleshooting