Accessing Localhost From any Device
When building a website on your computer, testing it on a different device such as a phone may save you time and energy. This is as long as the devices are connected to the same network.
Alternatively, you can use a USB cable to connect your PC to your device. Port forwarding on Chrome for Android makes it easy to test your development site on mobile. It works by creating a listening TCP port on your mobile device that maps to a particular TCP port on your development machine. Traffic between these ports travels through USB, so the connection doesn’t depend on your network configuration.
I have the XAMPP server already installed that allows setting up a local server. Other servers may include Apache etc.
Find IP Address
To begin, find the IP address of your computer by running the command ipconfig on the Windows terminal. This should display a list of all the networks you have connected to *e.g.* Wi-Fi, Ethernet and their respective IPv4 addresses.
Note that you can only be connected to either one of the above at a time. So if you are using ethernet, use the IPv4 address listed under the Ethernet adapter, or use LAN IPv4 address for LAN connections etc. This is the IP which you need to access your localhost on your Android phone over Wi-Fi. To test if it is working, type this IP address in your desktop browser where your localhost server is installed. The browser should display your localhost page successfully. This will assure that this local network IP is now successfully accessible on your Android phone.
Next, start your server on localhost.
In your phone’s browser, simply paste the iPv4 address along with the port where your localhost server is running, such as 192.168.8.165:3000.
Solving Issues With Windows Firewall
Windows Firewall may block your PC from sharing with other devices. To allow incoming connections on different ports, add a new rule for your port by opening the Windows Defender Security>Advanced Settings>Inbound Rules. Click on Action on the left-top panel and New Rule.
In the rule type, select Port and click Next. The port rule determines the connections that will be made for a TCP or UDP port. In Protocol and Ports, select Specific Local Ports and list the localhost ports that you wish to access on your mobile device.
Under Action, Allow the Connection and click on Next. In the Profile section, select where your rule applies depending on your connection type. Private and Public work in most cases. Click Next. Lastly, name your rule and give it an optional description then save it. This way, Windows Firewall allows your mobile device to access the specified port on local network IP.
Note that if you are using an Antivirus having a firewall, then the above steps will not work since the Antivirus would have disabled Windows firewall and instead runs its own firewall. In that case, depending on the Antivirus program, go to your Antivirus’s Firewall settings and open the port.
That’s it! You’re welcome!
