DEV Community

Cover image for Share Your Localhost With Anyone Using Cloudflare Tunnel
Shaik Mohammad Shahbaaz Alam
Shaik Mohammad Shahbaaz Alam

Posted on

Share Your Localhost With Anyone Using Cloudflare Tunnel

Vibe-coding memes aside, it is genuinely a thing We all might have faced. You're building something locally, someone asks to see it or you want to access it in your other devices, and then you realize there's no quick way to show them other than being on the same network and enabling port portforwarding and stuff.

Deploying feels like overkill for a thing which may or may not be approved at all. So most end up saying "it works on my machine" but it doesn't exactly a sentence which drops confidence and image of yours in others perspective.

Well turns out, cloudflare solves this in one (maybe two) commands.

1. Here's the whole thing:

  • If your app is running on localhost:3000.
  • Run this: cloudflared tunnel --url http://localhost:3000

You get back a URL like "https://random-name.trycloudflare.com."
Send that to whoever needs to see your app. They open it on their laptop, their phone, from a coffee shop, it doesn't matter. It just works, No server setup. No deploy pipeline. No touching your router.

2. What's actually going on behind the scenes:

  • cloudflared opens an outbound connection from your machine to Cloudflare.
  • Cloudflare then proxies incoming requests on that public URL back to your local server.
 Your machine (localhost:3000)                                                                                                                     
        β†’ cloudflared (outbound connection)                                                                                                           
            β†’ Cloudflare (public URL)                                                                                                                 
                β†’ whoever has the link      
Enter fullscreen mode Exit fullscreen mode

The key detail here is nothing inbound is opened on your network. Your app stays on your machine, Cloudflare just brokers the connection.

3. If you are a bit lazy then just make it a script:

I got tired of looking up the command, so I threw this in package.json:

{                                                                                                                                                 
  "scripts": {                                                                                                                                    
    "gl": "cloudflared tunnel --url http://localhost:3000"                                                                                    
  }                                                                                                                                               
}                                                                                                                                                 
Enter fullscreen mode Exit fullscreen mode

Note: gl -> go live in short (you can name it whatever you want though).

4. When this is actually useful:

  • Showing a client something mid-sprint without deploying
  • Testing on your phone without dealing with local network IPs
  • Demoing a branch to your team
  • Testing webhooks that need a public URL (Stripe, GitHub, etc.)
  • Quick cross-browser/device testing. Basically any time the answer to "can I see it?" shouldn't require 20 minutes of DevOps.

5. The catch (Nothing is perfect isn't it?):

That URL is public. Anyone with it can hit your dev server. So don't tunnel something that has an exposed admin panel, debug endpoints, or talks to production databases. Use common sense.

  • Also, Quick Tunnels (the free, no-config ones) are meant for development.
  • They have a 200 concurrent request limit and don't support SSE.
  • If you are thinking of something permanent, set up a named tunnel with your own domain β€” Cloudflare has docs for that. (or maybe i will make a post on that too 🀷).

6. That's it. (Go now try it what are doing here still?):

Next time someone needs to see what you're working on:

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

Copy the URL. Send it. Done.

No deployment, no infrastructure, no drama.

Top comments (1)

Collapse
 
shahbaazx786 profile image
Shaik Shahbaaz Alam

Note:

  1. First run your app
  2. Then run this command.
  3. You will get the URL after you have run the second command.