How to easy access localhost on your mobile device

As developers, we spend the majority of our time working on localhost, which is the local server environment for our applications. Localhost is where we test and debug our applications before deploying them to production. However, there are times when we want to access our localhost application on our mobile devices, and that's what we'll be discussing in this post.

There are many reasons why a developer might want to run a localhost application on their mobile device. For example, you might want to test how your application looks and behaves on different screen sizes or operating systems. Additionally, you might want to demo your application to stakeholders.

Whatever the reason may be, we'll guide you through the steps on how to open your localhost application on your mobile device. Although, there are many ways out there to do this but I will be sharing the most easiest ones ways below. By the end of this post, you'll be able to access your localhost application on your mobile device, and you'll be one step closer to creating a seamless development and testing experience. So, let's get started!

Method 1 -

The most intuitive and developer friendly way which I personally use is through localview. Localview is a no BS solution to run any application on your mobile devices with just single line of command without any need for you to search for your IP details. It simply returns a URL/QR code which you can easily share with others.

Simply run the npx localview --port xxxx on your terminal where xxxx is the port where your application is ruuning and that's it.

If you already have localview installed it will show you the QR code and the URL using which you can access the application. If not, it will simply prompt you to install one which you can do by typing "Y" as shown below

Note - A port is like a door that allows communication between different programs on a computer or over a network. When you run a web application on your computer, it uses a specific port to communicate with the web browser. By default, most web servers use port number 80 or 8080. To find out which port your application is using, you can look for it in the code or configuration files of your application or even in your browsers address bar. For instance, for a URL as below

the port is 3000. The port is generally the number that you see after :
Alternatively, you can check the documentation or guides of your application to find out which port it uses by default.

Method 2 -

If you face any issue in the above approach or you do not want to install a dependency for such a minor task. You can follow the steps below

1. Find your IP address (IPv4) There are a number of ways to do this.
2. Run ipconfig command on terminal
3. On windows, go to "Network & internet" -> click on "Advanced network settings" -> Expand the "Wi-fi" option -> click on "View additional properties" Once, you have the IPv4 proceed to the next step.
4. On your mobile device, open the following URL in any browser: IP(x.x.x.x):PORT(xxxx) (example: 192.168.1.37:3000) where 192.168.1.37 is the IP obtained from step1 above and 3000 is the application port number.

Please note that both the laptop and the mobile device must be on the same network to be able to use any of the above approach.