Two ways to access localhost on your phone ✌️

If you're working on a project on your laptop, chances are you would want to open it on your phone as well. Most browser do have Device Emulation to test app's design and responsiveness on different screen sizes but it still does not give the full picture. For example, laptop and mobile have very different pixel density which can cause variations. And, more importantly, you cannot test for touch responses on laptop so well. So, here are two ways in which you can expose your localhost and access it on your phone.

Image credit: Photo by Christina Morillo

Method 1: No third-party app or library required

The simplest way to access your localhost from your phone is when both your laptop/desktop (where your app is running) and your mobile device are connected to the same Wi-Fi network. (It may not work on public networks). In this case, you can use need computer's local IP address and the port on which the app is running. You can then go to http://<ip-address>:<port> on your phone to see the app on your phone.

Steps:

1. Find your local IP address on your computer:

   • For Windows:
     • Open Command Prompt (press Win + R, type cmd, and press Enter).
     • Type ipconfig and press Enter.
     • Look for the IPv4 Address under your active network adapter.
   • For Mac/Linux:
     • Open a terminal.
     • Type ifconfig (or ip a on Linux) and press Enter.
     • Look for the inet address under the active network adapter (usually en0 for Mac or eth0 for Linux).

2. Note the port on which your app is running:

   • For example, if you're running a Node.js app or a web server, it might be running on localhost:3000 so the port number is 3000.

3. Access the app on your phone:

   • Open the browser on your mobile device.
   • In the address bar, type your computer's local IP address followed by the port number.
     • Example: http://192.168.1.2:3000
   • Your app should now be accessible from your mobile device!

---

Method 2: Using Cloudflared

What if your laptop and phone are on different networks (e.g., one is on Wi-Fi, and the other is on mobile data)? In this case, it's not as simple to use your local IP address. Instead, you can use Cloudflared to create a secure tunnel between your local environment and the internet, making your localhost accessible from anywhere.

What is Cloudflared?

Cloudflared is a command-line tool developed by Cloudflare that allows you to create a secure tunnel to your localhost, even if your devices are not on the same network. This tool is part of Cloudflare’s Zero Trust security model, which means it protects your data while ensuring secure and easy access to your local apps.

Steps:

1. Install Cloudflared

• For macOS:

brew install cloudflared

• For Windows:

winget install --id Cloudflare.cloudflared

• For Linux: You can download and install Cloudflared by downloading the latest release directly or via their repository.

2. Create a Tunnel to Your Localhost

• Once the package is installed, run the following command to create a tunnel:

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

• Replace 3000 with whatever port your app is running on.

• Cloudflared will generate a URL (e.g., https://your-tunnel-id.trycloudflare.com) that will tunnel traffic to your local server.

And voila 🎉, you can now open the generated url on your mobile browser to see your app on your phone. And, it even supports hot reload.

---

Pro tip : Instead of typing that long url on your phone, you can generate a QR code by running the following command:

npx qrcode "<generated-url-here>"