Why can't I enter the url on my phone's browser to view my live site?

Question

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.

Answer 1

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.

Answer 2

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.