How to View Localhost Web Apps on Your Phone

I’m always building web application products that need to be optimized for mobile. Viewing my project on a phone before deploying is a must.

I often use the mobile device emulator in Chrome Devtools for little style adjustments, but there’s nothing that will perfectly emulate an actual mobile browser better than the mobile device itself. This helps me catch mobile-specific bugs before they surface as a problem for users.

Here’s a method I use to make testing on mobile devices extremely easy. These instructions are for a Mac and Windows environment

Understanding the Basics

Before knowing the method how to access localhost on your phone, let’s clarify some fundamental concepts:

• Localhost: Refers to the computer you’re currently working on. It’s a way to access web applications running on your machine without needing an internet connection.  
• IP Address: A unique numerical identifier assigned to each device connected to a network. Your computer has a local IP address within your network.  
• Port: A communication endpoint used by applications to interact over a network. Web servers typically use port 80 or 443 for HTTP and HTTPS, respectively.  

Methods to Access Localhost on Your Phone

1. Same Wi-Fi Network

The easiest way is to connect both your computer and phone to the same Wi-Fi network. Once connected, follow these steps:

1. Find your computer’s local IP address:
   
   Windows: Open Command Prompt and type ipconfig. Look for the IPv4 address associated with your Wi-Fi adapter.

ifconfig | grep "inet" | grep -v 127.0.0.1

macOS: Open Terminal and type ifconfig. Find the inet address associated with your Wi-Fi interface

ifconfig | grep "inet" | grep -v 127.0.0.1

2. Start your web server: Ensure your web application is running on your computer’s localhost. Take note of the port number it’s using.
3. Access from your phone: Open a web browser on your phone and enter the following address in the address bar:

http://[your_computer_ip_address]:[port_number]. 

For example: http://192.168.1.100:3000.

ScreenShot For Mac Environment

2. Tools like ngrok

ngrok is a popular tool that creates secure tunnels to your localhost, making it accessible from anywhere. It’s particularly useful for sharing your local web apps with others or testing on devices outside your local network.  

1. Download and install ngrok: Visit the ngrok website and follow the instructions for your operating system.  
2. Start ngrok: Open your terminal or command prompt and run the command ngrok http [port_number]. Replace [port_number] with the port your web application is using.
3. Access from your phone: ngrok will provide you with a unique URL that you can use to access your localhost web app from your phone’s browser.

For Mac Environment

brew install ngrok
ngrok http 4000

This outputs, among some other information, a line like

Forwarding                    http://4cc5ac02.ngrok.io -> localhost:4000

Now, you can navigate to http://4cc5ac02.ngrok.io on any device that is connected to the Internet, and this URL redirects to localhost:4000 of your laptop.

Note that as long as the ngrok command is running (until you hit Ctrl-C), your project is publicly served. Everybody who has the URL can see it.

Thanks for reading! We hope you found this article helpful. If you have any questions, please feel free to ask in the comments below.