How to test your React app running on localhost directly on mobile?

• Method 1: Changing host
• How To Find IP?
  • For Windows
  • For Mac
  • For Linux
• Method 2: ADB Reverse
• Method 3: Remote Tunneling

Anyone that has worked with frontend application development would realize that you need to test some specific feature that is only available on a native mobile platform, like Camera for example.

Since you were only building the app running on localhost on a desktop, you will need to find a solution to use the camera from the mobile device while the application is still running on localhost.

To test any React app running on localhost directly on your phone, I’d like to teach you three techniques today.

These techniques apply to all types of development, not just React.

Assume that port 3000 is where our React application is running. Start with the first approach.

Method 1: Changing host

Android/iOS

The majority of developers are unaware that you can switch hosts while the React app is running. All front-end tools by default run the app on localhost on a specific port, such as Create React App, Vite, etc. By adding the “–host value” attribute to the server start command, you can specify the host. The IP address of your connection must be the host’s value.

npm start --host 192.168.1.111

Any device with the same IP address can access this port after you’ve done this and started the server. So, for instance, if my IP address is “192.168.1.111,” I can directly test the React app on my phone by going to “http://192.168.1.111:3000.”

How To Find IP?

How do we find out the IP address of the connection, then? You can find the IP address of your wireless network for Linux and Mac by visiting the properties page for the wifi to which you are currently connected.

For Windows

1. Select Start > Settings > Network & internet > Wi-Fi, and then the Wi-Fi network to which you are connected.
2. Under Properties, look for your IP address listed next to your IPv4 address.

For Mac

1. System Preferences can be accessed by opening the Apple menu.
2. Select Network from the View menu by opening it, or click Network in the System Preferences window.
3. On the left menu, select your network connection.
4. The local IP address for an Ethernet or USB connection will be displayed.
5. In the connection status section for a Wi-Fi connection, your IP address will be displayed.

For Linux

Using the ifconfig Command

The ifconfig command is the best way to discover your IP address. Enter the following in the command line:

ifconfig

All network connections—connected, disconnected, and virtual—will be shown by the system. To find your IP address, look for the one that says UP, BROADCAST, RUNNING, MULTICAST. Both IPv4 and IPv6 addresses are listed here.

Method 2: ADB Reverse

Android

The drawback of method 1 is that it cannot be used without a wi-fi connection. We can use method 2 to get around that, but regrettably, it only works on Android. Use a USB cable to connect your Android phone to the device running the React app to use this method.

First, make sure ADB is installed. This portable package is simple to install on Linux, Mac, and Windows. Any port that is open on your desktop or laptop can be forwarded to the connected Android device using the ADB command.

adb reverse tcp:300 tcp:3000

The aforementioned command will open port 3000 to Android. Any Android browser that accesses “localhost:3000” will launch the React app as if it were a desktop or laptop application.

Method 3: Remote Tunneling

Android/i0S

Both of the aforementioned approaches have the drawback that you must be close to the location where your localhost is running. What if you want to show a coworker who is in another country the app that is currently running on localhost? Yes, you read that correctly.

We can do something called remote tunnelling to achieve this. Some of you might have heard ngrok which does this. But ngrok is extremely slow and has a connection limit. Ditch ngrok and use this open-source approach instead. Install an npm package called ‘local-tunnel’ globally.

npm install -g local-tunnel

You will be given a special, publicly accessible URL that Localtunnel will use to proxy all requests to your locally installed web server.

Tunnelling your localhost port to a remote URL is the next step. Simply typing “It–{port_number)” will give you a remote URL that is accessible from any location in the world.

$ lt -port 3000
your url is: https://tender- ducks -mix- 110-44-125-8.loca.lt

Now the remote URL returned by the local-tunnel will be available to use and test your React app unless you have stopped the tunnelling server

If you like this post please share🚀 it with your friends