As web developers, we want to ensure our responsive website looks good and works well on phone displays. While Chrome’s built-in developer tool offers the ability to preview mobile displays, you should always test your site on real devices. I created 2 videos showing how to access locally hosted websites on your PC. This is assuming you’re on your home network, as this will not work if you’re inside your company’s domain network.
Watch the 1-minute version of the video:
Not working? Your Windows Firewall could be blocking. Watch how to troubleshoot your firewall:
Key Takeaways
Find the local IP address of your PC that is running the web server. It should be, but not always, in the form of something like 192.168.0.x. You’ll also need the port that your web server is running under i.e. 8080. On your phone, enter the IP address plus the port, for example, http://192.168.0.100:8080. Your phone should be able to access your locally hosted site. If it is not working, continue reading…
Troubleshooting – PC and Phone in same Subnet?
Make sure that your phone or mobile device is on the same wi-fi network as your PC. What is important is that the phone’s IP address must match the first three sets of numbers in the IP address of the PC, i.e. the “192.168.0” part. This ensures that the devices are in the same subnet and can see each other on your network. If they differ, then you’re going to have to go into your router’s setting and try to figure out what is going on. Once you’ve verify that all devices are in the same subnet, the next step is to check if Windows Firewall is blocking the connection…
Troubleshooting – Windows Firewall Blocking?
We’ll use a program called TCPView (published by Microsoft) to observe network activity. With TCPView open, set a filter for your web server’s port, 8080 in my example and select TCPv4 only. We can see in the screenshot below that Apache (httpd.exe) is listening on port 8080.
If the firewall is indeed blocking connections, then when you attempt to connect from your phone, there will be no activities showing in the Sent/Received Packets/Bytes columns. However, if the firewall is not blocking then you should be able to see activity. Try to make a connection from your phone to your PC and keep an eye on those columns. If you don’t see any activity, then the firewall is the problem. Let’s see how we can fix this.
Go into Windows Firewall Control Panel (click the Start menu, type “firewall”, select Windows Defender Firewall, click Advanced Settings, click Inbound Rules). Sort by the Name column and then scroll down to find, in my example, Apache (which has an executable name of httpd.exe).
There are 4 rules for Apache, 2 of them are for Private network and 2 of them are for Public network. Private applies when you’re connected to your home network and Public applies when you’re connected to a public wi-fi such as an airport or coffee shop. If you’re connected to a public wi-fi, the firewall is blocked so your phone will not be able to connect to your PC. If you are in your home network, make sure your wi-fi connection is set to the Private profile. To verify, open the properties of your wi-fi connection.
The Private network firewall rules are set to allow for both TCP and UDP protocols (you really only need TCP). Notice that in the Local Port column, it’s set to Any, this means that the firewall will not block you no matter which port you choose to run your web server. With these rules in place, your phone should be able to connect to your PC.
Usually, when you install your web server or when the web server tries to start for the first time, it will try to add those firewall rules. The alert looks something like below, which you should have “Private network…” selected, and clicked “Allow access”.
The alert does not explicitly tell you what happens if you click “Allow access”. If you had clicked “Cancel”, then those firewall rules were never added. If you can’t get this security alert to pop-up again, we can still add the necessary rule manually.
Back at the Windows Defender=>Inbound Rules, click on “New Rule” under the Actions side panel. Select “Program”, hit Next. Paste in or browse to your web server’s executable file (for example, the path to my Apache executable is “C:\Users\theavgdev\myprograms\laragon-portable\bin\apache\Apache24\bin\httpd.exe”), hit Next. Select Private and give the service a name, then finish. Note that the rule goes into effect immediately after creation. Notice that the Protocol is set to “Any”, go ahead and change that to TCP. Now, cross your fingers and hit Refresh on your phone’s browser. I hope this worked for you.