Replacing ngrok with Cloudflare Tunnel's TryCloudflare

Recently, I’ve been trying Cloudflare Tunnel service, which is a free service that allows you to set up a tunnel between your local network and Cloudflare network, so that external networks can connect to your local service through Cloudflare’s Edge. However, Cloudflare Tunnel is a little bit tricky to set up, there are a lot of steps and you need to create a Cloudflare account beforehand. However, I found that Cloudflare also provides a TryCloudflare or Quick Tunnels service, which is also free, but you don’t even need to create a Cloudflare account to use this service, you just need to install the cloudflared utility and you can start using it directly. This is very convenient for testing a service from an external network, especially if you want to test a desktop site from your cell phone.

Using the TryCloudflare service has the following advantages:

• Completely free
• Easy to install
• Built-in SSL/TLS encrypted connection
• No registration account required, ready to use after installation.

Using the TryCloudflare service has the following drawbacks:

• Each connection creates a new URL, and re-establishing the tunnel creates a new URL.
• Connections can only last for a maximum of 24 hours, for longer periods of time use the full version of the Cloudflare Tunnel setup.

Install cloudflared

• Windows + Windows Package Manager (winget)

  winget install --id Cloudflare.cloudflared
  

• Windows + Chocolatey

  choco install cloudflared -y
  

• macOS + Homebrew

  brew install cloudflare/cloudflare/cloudflared
  

• Linux

  Please go to the Downloads page directly to download the Binary executable file.

• Docker

  Please go directly to cloudflare/cloudflared - Docker Image | Docker Hub for instructions.

  docker run cloudflare/cloudflared:latest tunnel --no-autoupdate --hello-world
  

Update cloudflared

You can quickly update to the latest version with the following command:

cloudflared update

Usage of cloudflared

This set of cloudflared tools actually covers the full functionality of Cloudflare Tunnel, with a lot of parameters and options, so if you’re interested in a more in-depth study, you can refer to the official website documentation or the many existing blog posts.

The following are some common examples:

1. Start a Cloudflare Tunnel and use the built-in hello-world service.

   Usually we want to create a tunnel because we have a local web service and we need to connect to it right away, but what if you don’t have a web service yet and you want to test the functionality of a Cloudflare Tunnel? Just start the built-in Hello World website!

   cloudflared tunnel --hello-world
   

   

   After setting up Quick Tunnel, you will see a URL in the Terminal window, through which you can quickly connect to your local Hello World website.

   

2. Connect to your local localhost:4200 site via Cloudflare Tunnel.

   Let’s take Angular Live Development Server as an example, and start the local server first:

   ng serve
   

   Then launch Cloudflare Tunnel:

   cloudflared tunnel --url http://localhost:4200
   

   After connecting to the webpage, you will immediately find that the webpage will display Invalid Host header, and the website cannot connect at all. This is because Angular Live Development Server only allows localhost as the hostname by default, but Cloudflare Tunnel will use a random hostname to connect, so the connection will be rejected.

   There are two solutions:

   • Adjust the startup parameter of ng serve by adding the --disable-host-check parameter.

     This parameter prevents Angular Live Development Server from checking the Host header required by HTTP, which would allow any Hostname to connect to the local site.

     ng serve --disable-host-check
     

   • Adjust the startup parameters of the cloudflared tunnel, in particular the --http-host-header="localhost" parameter.

     This parameter allows you to specify the Hostname to use when connecting to your local site from Cloudflare’s Edge, so that your local site can function properly.

     cloudflared tunnel --url "http://localhost:4200" --http-host-header="localhost"
     

3. Connect locally via Cloudflare Tunnel network and then jump to the external website.

   This is used as a way to create a fast VPN tunnel so that an external network can first connect to the local computer through the Cloudflare Tunnel, and then connect to the external site through the local network, using your current network to connect to the destination site. There are many websites that may be IP-locked, so if you want to access them on the fly, you can do it this way without having to dial in to a VPN.

   cloudflared tunnel --url "ifconfig.co" --http-host-header="ifconfig.co"
   

Quick Commands

ngrok is very handy when launching a website. Generally speaking, the commands for launching a website are as follows.

ngrok http 4200

I tried to write a C:\Windows\cok.cmd batch file with the following contents.

@ECHO OFF
cloudflared tunnel --url "%1://localhost:%2" --http-host-header="localhost"

From now on, you can quickly start Cloudflare Tunnel and test your local http://localhost:4200 site by executing the following command.

cok http 4200