Local Development

Expose your localhost to the internet for testing and collaboration

Testing Webhooks

Test webhooks from services like Stripe, GitHub, Twilio, and more without deploying:

1. Start your local server:

npm run dev # or your framework's dev command

2. Create a tunnel:

ngsrv http 3000

3. Use the public URL in your webhook settings:

https://abc123.tnl.ngsrv.com/api/webhooks/stripe

💡 Pro Tip:

Use the local CLI dashboard at localhost:4040 to inspect incoming webhook payloads in real-time!

Team Collaboration

Share your work-in-progress with designers, clients, or team members:

  • •Design Review: Share your UI with designers before deploying
  • •Client Demos: Show features to clients without complex staging environments
  • •QA Testing: Let testers access your local build instantly

Example workflow:

ngsrv http 3000

Share the URL: https://abc123.tnl.ngsrv.com

Mobile Device Testing

Test your web app on real mobile devices without complex network configuration:

Traditional approach (painful):

  • • Find your local IP address
  • • Configure firewall rules
  • • Ensure devices are on same network
  • • Deal with HTTPS certificate issues

With NGSRV (simple):

  1. Run ngsrv http 3000
  2. Open the URL on any device, anywhere
  3. Test with real HTTPS

OAuth & Social Login Testing

Test OAuth flows (Google, GitHub, Facebook, etc.) without deploying:

Most OAuth providers require a public callback URL. NGSRV makes this easy:

1. Start tunnel:

ngsrv http 3000

2. Configure OAuth callback:

https://abc123.tnl.ngsrv.com/auth/callback

3. Test the flow locally

The OAuth provider will redirect back to your local app through the tunnel

Security During Development

Protect your development tunnels with security policies:

IP Whitelisting

Restrict tunnel access to your office network or home IP:

  1. Go to Security → IP Security
  2. Create a policy with "Whitelist" mode
  3. Add your office CIDR (e.g., 192.168.1.0/24) and home IP
  4. Apply it when creating tunnel: ngsrv http 3000 --policy ngsrv_ips_ABC123

Benefit: Prevents public access while testing sensitive features

Time-Based Access

Only allow access during business hours:

  1. Go to Security → Time-Based Access
  2. Create a policy with "Allow" mode
  3. Set days: Monday-Friday, times: 09:00-17:00
  4. Set your timezone (e.g., America/New_York)
  5. Apply to your tunnel

Benefit: Automatically blocks access outside work hours

Header Authentication

Require API keys or basic auth for API testing:

{ "auth_type": "basic", "username": "dev", "password": "secret123" }

Configure in Security → Header Authentication

Analytics & Debugging

Monitor and debug your tunnels with comprehensive analytics:

Local CLI Dashboard

When running a tunnel, visit:

http://localhost:4040

See real-time requests, headers, bodies, and timing information

Global Request Logs

View all requests across all tunnels:

Dashboard → Request Logs

Filter by tunnel, method, status, and time range

Per-Tunnel Analytics

Detailed metrics for each tunnel:

Dashboard → Analytics

Total requests, bandwidth, response times, minute-by-minute breakdown

Full Capture Mode

Paid feature: Log complete request/response bodies

Dashboard → Teams → Full Capture

Perfect for debugging webhook payloads and API responses

Debugging Webhook Payloads:

  1. Enable Full Capture in team settings (Pro or Pay-as-you-go plans)
  2. Create tunnel and configure webhook URL
  3. Trigger webhook from service (Stripe, GitHub, etc.)
  4. View complete payload in Request Logs by expanding the row
  5. Copy payload for local testing

Config Files for Projects

Create a ngsrv.yml file in your project root to avoid repeating flags:

Basic Configuration

# ngsrv.yml
port: 3000
domain: myapp
security_policies:
  - ngsrv_ips_ABC123  # Office IP whitelist
  - ngsrv_time_DEF456 # Business hours only

Now just run ngsrv http - no flags needed!

Framework-Specific Examples

Next.js (Port 3000)

port: 3000
domain: my-nextjs-app
security_policies:
  - ngsrv_ips_ABC123

Laravel (Port 8000)

port: 8000
domain: laravel-dev
security_policies:
  - ngsrv_ips_ABC123
  - ngsrv_geo_XYZ789  # Restrict to US only

React/Vite (Port 5173)

port: 5173
domain: react-app
security_policies:
  - ngsrv_time_DEF456  # Only during work hours

Benefits:

  • ✓ Consistent configuration across team
  • ✓ Version control your tunnel settings
  • ✓ No need to remember policy IDs
  • ✓ Same domain every time you start tunnel

Advanced Team Collaboration

Share domains, policies, and resources across your entire team:

Team-Wide Domains

All team members can use shared domains:

  1. Team owner creates domain: myapp.tnl.ngsrv.com
  2. Any team member can use it: ngsrv http 3000 --domain myapp
  3. Only one member can use it at a time (prevents conflicts)
  4. Check who's using what: ngsrv http --list

Shared Security Policies

Create policies once, use across team:

  • • Owner creates IP whitelist with office network
  • • All team members apply same policy to their tunnels
  • • Update policy once, affects all tunnels using it
  • • View usage in Dashboard → Security

Team Analytics

Monitor all team tunnels in one place:

  • • Global Analytics: All tunnels, all team members
  • • Filter by specific tunnel or time range
  • • View bandwidth usage for billing insights
  • • Track request logs across team

Team Workflow Example

Scenario: 3 developers working on same app

• Owner creates domains: myapp-dev1, myapp-dev2, myapp-dev3

• Owner creates IP whitelist policy (office network)

• Each dev uses their assigned domain + shared policy

• PM can access any dev's work via their domain

• Team lead monitors all usage in analytics dashboard

Best Practices

  • ✓
    Use custom domains for consistent URLs across sessions

    Configure a custom domain in Dashboard → Domains

  • ✓
    Monitor requests in real-time

    Check localhost:4040 for detailed request logs

  • ✓
    Use environment variables for different environments

    Set NGSRV_API_TOKEN in your shell profile