Get localhosted `crypto.randomUUID()` / `getUserMedia()` working on your phone with Cloudflare Quick Tunnels

Issue

The recent projects that I am working on require using crypto.randomUUID() and getUserMedia(). The only problem was when I try to test it on my mobile with entering my local IP (192.168.x.x) to the browser, it just won't work. The reason behind that is because the above two browser APIs require secure contexts or localhost.

Fix

Using Chrome Remote Debugging might be one of the most straight forward solutions. But then I just found something interesting: Cloudflare Quick Tunnels. Some may think this is so complicated. But no, you don't even need an cloudflare account for that and you can have a generated random subdomain on trycloudflare.com for your web server running on localhost. The subdomain is SSL ready for testing or you can even let your friends and families preview before launching. Here is how I did it.

1. Install cloudflared

This is Cloudflare's tunnel client needed to expose your local server through Cloudflare's network. I use Ubuntu so here are the commands:

# Add cloudflare gpg key
sudo mkdir -p --mode=0755 /usr/share/keyrings
curl -fsSL https://pkg.cloudflare.com/cloudflare-main.gpg | sudo tee /usr/share/keyrings/cloudflare-main.gpg >/dev/null

# Add this repo to your apt repositories
echo 'deb [signed-by=/usr/share/keyrings/cloudflare-main.gpg] https://pkg.cloudflare.com/cloudflared any main' | sudo tee /etc/apt/sources.list.d/cloudflared.list

# install cloudflared
sudo apt-get update && sudo apt-get install cloudflared

2. Check your localhost web server port

Run your Vite development server locally as usual (e.g., npm run dev, which runs vite at http://localhost:5173 or another port).

npm run dev

3. Start tunnel and get your subdomain

Create a Cloudflare tunnel with trycloudflare by running a command like:

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

This exposes your local Vite server through a random trycloudflare.com subdomain generated by cloudflared. The terminal output will show the public URL which you can visit to access your local Vite app remotely. Copy the URL for the next step.

4. Update vite.config.js

At the moment, the traffic should be blocked by Vite. Edit the vite.config.js to allow the subdomain just generate to access your port.

export default defineConfig({
  server: {
    allowedHosts: ['.trycloudflare.com']
    // this will allow all subdomains of trycloudflare.com
  }
})

Remember the generated URL is temporary and dynamically assigned per session, so it changes every time your start a new tunnel session.

5. Access URL

Finally you can access the URL with your phone browser, or even send it to someone you love to share your project.

Summary

The tunnel URL looks like a random subdomain on trycloudflare.com and you just share that URL to allow others or yourself to access your local Vite project remotely.

This approach helps develop Vite apps locally while securely exposing your project to the internet without DNS or domain setup. It requires only the cloudflared client and Vite setup.