current theme: placeholder

The easiest way to test your local dev site on your phone

Published on

TL;DR: Want to see your Astro site on your phone before deploying? Use VS Code Ports for secure, private testing, or Astro Tunnel for instant, public sharing—no logins, no hassle.

Devtools are great, but testing your Astro site on a real phone is the only way to make sure it’s ready for prime time. Here are two super-fast ways to get your local dev server onto your phone.

1. VS Code Ports: Secure, Flexible, Built-In

VS Code’s Ports feature lets you share your local server with a public URL. Great for private testing or team reviews.

  1. Start your dev server:

    npm run dev

    This usually starts your site at http://localhost:4321.

  2. Open the Ports tab in VS Code (bottom panel or via Command Palette).

  3. Forward your port (usually 4321), sign in if prompted, and grab your public URL.

  4. Test on your phone: Open the link or scan the QR code in VS Code.

Pro tip: Tunnels are private by default. If you make your tunnel public for client review, anyone with the link can access it—no login required—but they’ll see a security warning page (from the tunnel provider) and must click through. Not the smoothest for non-technical users.

2. Astro Tunnel: Instant, Public, No Logins

Astro Tunnel uses Cloudflare to give you a public link in seconds. Perfect for client demos or quick mobile checks.

  1. Add Astro Tunnel:

    npx astro add astro-tunnel

  2. Run your dev server:

    npm run dev

  3. Click the Tunnel icon in the Astro Dev Toolbar to get your public URL.

  4. Open on your phone: Paste the link in your browser—done!

Verdict

  • VS Code Ports: Best for private, secure testing. QR codes make phone access easy.
  • Astro Tunnel: Fastest way to share with anyone, anywhere. Seamless Astro integration.

Personally, I like Astro Tunnel better. Cloudflare’s tunnel feels faster and it’s simpler to use. But the implementation can be buggy: sometimes the tunnel doesn’t start and I can’t figure out why. If you run into issues, check the astro-tunnel GitHub issues or try restarting your dev server.

I recommend trying both and seeing which fits your workflow best. Either way, you’ll be previewing your Astro site on your phone in minutes. 🚀

Reply by email