How can I access my localhost from my Android devi

Question

I'm able to access my laptop web server using the Android emulator, I'm using 10.0.2.2:portno works well.

But when I connect my real Android phone, the phone browser can't connect to the same web server on my laptop. The phone is connected to the laptop using a USB cable. If I run the adb devices command, I can see my phone.

What am I missing?

Answer 1

First of all connect your phone and computer to common wifi.

Then, open command prompt using run as administrator

Give ipconfig command

Which shows wireless lan ip

Use ip:port of your server to access in phone

Answer 2

ngrok lets you put your localhost onto a temporary server and is very simple to set up. I've provided some steps here that can be found in the link:

1. Download the ngrok zip from the link above
2. Open the zip
3. Run your server locally and take note of the port number
4. In the terminal, go to the folder where ngrok lives and type ngrok http [port number]

You'll see a little dashboard in your terminal with an address pointing to your localhost. Point your app to that address and build to your device.

Answer 3

EASIEST way (this worked flawlessly for me) is to locally host your site at 0.0.0.0:<port_no> and to access it using mobile devices, use <local_ipv4_address>:<port_no>/<path> in browser.

• To know your local ipv4 address, just type ipconfig in cmd
• ANY device connected to the SAME network can access this url.

Answer 4

mac osx users

i had success by enabling remote management:

1. ensure your phone and laptop are connected to the same wifi network
2. on mac, go to system preferences/sharing
3. enable remote management

You will see a message similar to this

Other users can manage your computer using the address some.url.com

On your android device you should now be able to hit some.url.com, which delegates to localhost on your mac. You can also use ifconfig to get the ip of your macbook

---

portable solution with ngrok (any OS with node or npm)

If you don't mind exposing your project with a temporary domain you can use ngrok. Lets say I have an app that runs on localhost:9460

npm install ngrok -g
ngrok http 9460

This will give me:

Session Status                online
Update                        update available (version 2.2.8, Ctrl-U to update)
Version                       2.2.3
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://f7c23d14.ngrok.io -> localhost:9460
Forwarding                    https://f7c23d14.ngrok.io -> localhost:9460

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

I can now reach https://f7c23d14.ngrok.io as a way to remotely view localhost. This is great to share design work or progress with clients

---

alternate solution with nginx proxy pass

If you are running something like this through nginx proxy_pass it will require a bit more tweaking - this is a hacky approach, but it works for me and i am open to suggestions on improving it:

• enable remote management (as mentioned above)
• temporarily set the server to listen on port 81 as opposed to 80
• sudo nginx -s reload
• visit http://youripaddress:81

```

server {
  listen 80;
  listen 81; # <-------- add this to expose the app on unique port
  server_name  ~^(local|local\.m).example.com$;
  ...
}

reload and visit http://youripaddress:81

Answer 5

"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."

More details here: https://developer.chrome.com/devtools/docs/remote-debugging#port-forwarding

Answer 6

This is what worked for me, I added another line after the 127.0.0.1 ip to specify the exact local network ip address (not the public ip address) of the device I wanted to use. In my case my Samsung Galaxy S3

As suggested by Bangptit edit the httpd.conf file (x being the version numbers): C:\wamp\bin\apache\Apache2.x.x\conf\httpd.conf

Search for the onlineoffline tag and add the ip of your phone (I found my phones ip address in my routers configuration pages):

onlineoffline tag - don't remove

 Order Deny,Allow
 Deny from all
 Allow from 127.0.0.1

my phones ip in the line below

 Allow from 192.168.1.65 
 Allow from ::1
 Allow from localhost

One could extend this to include an entire sub domain too for e.g. 192.168.1.0/24 etc