Securely Share Your Local Development Environment with Cloudflare Tunnel

Often we want to share or test our local development environment with others, whether it's to test webhooks, integrate with third-party services, or collaborate with team members. However, sharing our local network with the internet can be a security risk. Exposing our local IP address and network resources to the public internet can leave us vulnerable to attacks and data breaches. In this article, we'll explore how Cloudflare Tunnel allows us to share our local network with others without compromising Security.

Ngrok and Expose

When developing application with Laravel Herd or Valet, you might have heard services like Ngrok and Expose. They are both great, but with their free versions of service, you don't get fixed URL. They changes very frequently, which could cause issues when testing you local environment with third-party webhooks.

Cloudflare Tunnel, on the other hand, offers a fixed URL in its free plan, which remains the same even after restarting the client or experiencing inactivity.

Keep in mind that these limitations and behaviors are subject to change, so it's always a good idea to check the documentation and pricing pages of each service for the most up-to-date information.

Prerequisites

Before you start, make sure you:

Authenticate cloudflared

cloudflared tunnel login

Create a tunnel

cloudflared tunnel create <NAME>

Routing traffic

We need to assign a CNAME record that will point traffic to the tunnel subdomain

cloudflared tunnel route dns <UUID or NAME of tunnel> <hostname>

hostname can be any public hostname that you already didn't use for the domain you will assign.

Tunnel a local port

cloudflared tunnel --url localhost:3000 run <NAME>

Tunnel a Laravel Herd/Valet

cloudflared tunnel --http-host-header <domain> --url localhost:80 run <NAME>

Replace domain with you Laravel herd domain.

By following these steps, you should be able to route traffic using Cloudflare DNS.