2

I use an extension called Live Server in Visual Studio Code. When I run live, the browser opens and the url is http://127.0.0.1:5500/index.html. Why can't I open this url on my phone's browser to see the live site on the phone. Is there a way to do this (Live reload on phone and browser)?

Note: I also develop using ionic and when I ionic serve I can see it on browser and when I open the ionic dev app (not ionic view!), I can see the live app on the phone. I can view it on multiple devices with the condition of all devices being in the same network which I am fine with.

Parth Agarwal
  • 137
  • 1
  • 1
  • 11

6 Answers6

24

127.0.0.1 is a special-purpose IPv4 address reserved for loopback purposes. That is, this IP refers to your computer itself.

By entering http://127.0.0.1:5500/index.html in your browser, you're requesting web page within your computer.

In normal case, your computer will be in a NAT network (under same wi-fi AP for instance), and you'll be assigned with a virtual IP. Normally it's 192.168.x.x.

You may enter the following command in your command prompt to see your IP address.

ipconfig

If you're using Mac or Linux, use this instead. 

ifconfig

As a result, under your network interface card, you'll get your IP Address.

If the IP address belongs to virtual IP, then you may access it with your phone using

http://< Your IP Address >:5500/index.html

If it's not virtual IP, it is Public IP. Then, you'll have to configure appropriate Firewall settings under this circumstance.

Hope this will help.

JohnsonYuan
  • 355
  • 2
  • 7
  • 2
    And make sure your computer/server is on private network and not public option. – TGO Jan 20 '21 at 14:02
8

You cannot open the same url on your phone, because that url host (127.0.0.1) refers to the localhost (the same machine).

If your phone and server are on the same network, you can replace the current host with the servers local IP.

So if your servers local IP is: 192.168.0.36 the URL you enter in your phone should be http://192.168.0.36:5500/index.html.

Daniel W. R. Hart
  • 77
  • 1
  • 10
MichaelK
  • 352
  • 4
  • 11
5

I had a same problem.

Solution: Control Panel -> Windows Defender Firewall -> Allow an app or feature through Windows Defender Firewall -> Allowed "code.exe" app.

Mark
  • 87
  • 2
  • 8
  • I had the same problem with McAfee Firewall: Open McAfee app --> My Home network --> Trust the network – Davide Nov 19 '22 at 12:54
3

Run ipconfig and find your private IP. Make sure your phone is on the same network. go to http://192.168.0.***:5500/

JosephWorks
  • 682
  • 4
  • 21
3

Open Live server's settings.json and add these two settings "liveServer.settings.useLocalIp": true and "liveServer.settings.host": "localhost". Then type your localhost ip in your mobile browser (in my case it was 192.168.0.110) with the rest of the Live server URL i.e. 192.168.0.110:5500/index.html. This worked for me.

Shashikant Sharma
  • 39
  • 2
0

Let me clear this out for you. we call localhost or 127.0.0.1 as loop backs. which will itself point to the same machine(means that particular service should also be hosted in the same machine). what Microsoft did with visual studio live share is that if have the live share extension it will create a reverse proxy between the host(where the server is hosted) and the target (In this case your browser) which means even though your host is in a different country the extension will tunnel the transparent proxy to your loop-back address. visual studio live share extension is what you phone doesn't have and Microsoft doesn't support yet. If you still want to access your local service what you can do is turn off the firewall(or pass through that particular port where ur service is hosted) and connect your phone to the same network as your machine with the service running and instead using http://127.0.0.1:5500/index.html use http:// UR SERVER IP :5500/index.html you can get UR SERVER IP by giving ipconfig in windows command prompt or ifconfig if ur server is on linux.

karthik
  • 1,100
  • 9
  • 21