How to View Localhost Web Apps on Mobile Browsers
We are always building a web application that needs to be responsive/optimized for mobile. Viewing the web app post-deployment on mobile is very frustrating.
Yes, of course, we can use chrome inspect tools for viewing our web apps on different mobile screens provided by chrome inspect tools.
But it’s not perfectly emulating an actual mobile browser, sometimes we need to get better clarity on how things are looking on a real device.
Here’s a method that I use to make testing on mobile devices extremely easy. These instructions are used for LINUX environment.
Start your application in your machine, go to any browser and enter your localhost URL. Once you have done that now, follow these steps:-
Step 1: Connect your devices to the same network
A little confusing but it is really easy.
IMP:- Make sure that your computer and your mobile device are connected to the same wifi network.
Step 2: Find your local IP address if your computer (IPV4)
There are different ways to find IP address on your machine, to find out the IP address of your desktop:
Type into the command line ipconfig for Windows or ifconfig for Linux.
On Linux, you can directly run this command: ifconfig | grep “inet “ | grep -v 127.0.0.1
For Windows, you can find the IP address by visiting Control Panel. In the search box, search for “adapter”. Click on View Network Connections. Select the active network connection and click View status of this connection. Click Details and the IP address should be found next to IPv4 Address.
For Mac, open the Network Utility. You can find this quickly with Spotlight by typing cmd + space and then start typing “Network”. With Network Utility open, your IP address can be found next to the label IP Address.
Step 3: Get the port number
On your dev machine, serve your application in whatever way you usually do that serves it over a localhost address.
Note down the port number, on which your web application is running.
Once you are able to view your app locally on your computer via localhost, you can move to the final step:-
Step 4: Open your mobile browser
Using your mobile browser, navigate to the IP address we found on our desktop and the port number where your application is running
http://<Local IP Address>:<port number>
For ex- If your application is running on localhost:8080 and your IP address is like 123.12.11.110, then on mobile, we navigate to 123.12.11.110:8080
And that’s it!
You should now be viewing your app on your mobile device. Set it up right next to your main monitor, because it will reload every time your localhost reloads, so it will be perfectly in sync with the locally served desktop web application.
You don’t get any front-end dev tools with this experience, but you do get an early warning if things look or behave differently on a native browser’s experience.
Please share your views in the comment section and yeah feedback is appreciated.
Hoping you would like and will share this for better reach
Checkout my other articles on — https://medium.com/@aayushtibra1997
Thanks for reading :)
Build Web Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
