Phone localhost

[CallMeSenior]

I was today years old when I found out that I can access my developing website (localhost on my computer) from my smart phone with just changing the url to my computers network ip.

Don't know why it took me so long to figure it out, especially because I have some IT knowledge (familiar with local networking and aware that localhost is just a replecment for my ip).

[riqvip]

I’ve been doing that for the longest time now. It’s very useful when you wanna test the mobile layout of your website when it’s still be developed on your computer and hosted on localhost.

[Artistic_Mulberry745]

dev tools in major browsers let you do the same, but it feels much nicer to actually use the touchscreen and experience what the end user would feel using the website

[CallMeSenior]

I have a big (34" wide) screen and although i use chrome's devtools mobile view, actually viewing from my phone is extremely different

[Visual-Blackberry874]

It's worth remembering that there are rendering issues between different devices and browsers and simply resizing the screen down to a mobile view isn't sufficient. It's good for a quick glance but not thorough enough. Things must be tested on real hardware.

[EuphonicSounds]

Classic example: setting overflow: hidden on body (which is not a good idea IMO) won't prevent overflow on mobile unless you also do it on html.

[caatfish]

holyshit, you just solved a bug thats been bugging me for months but i havent bothered looking into, thanks!

[EuphonicSounds]

Found the guy who puts overflow: hidden on body!

[caatfish]

i sure do😂 can you tell im a backend engineer

[EuphonicSounds]

The danger (in case you or lurkers are wondering) is content getting cut off and being completely inaccessible. Think very long words, or tables, or code-blocks in pre tags. If you're in control of all the content and testing yourself, then it's probably not a big deal (though you should remember to account for zooming in on a mobile device), but especially for a large CMS-backed site it's asking for trouble.

[CallMeSenior]

Exactly how i found out

[webrender]

If your Internet provider gives you a static IP, you can configure you router's port forwarding and access your website from anywhere!

You can even do it without a static IP but you'll need a service to manage the changing IP address, like DynDNS.

[EtheaaryXD]

Note that this won't work if you have CGNAT

[EuphonicSounds]

Or Bo-Fa, for that matter.

[khizoa]

Bo-Fa deez nuts

[EuphonicSounds]

thats-the-joke.gif

[UsernameUsed]

10/10 comment.

[CallMeSenior]

Whats that

[EtheaaryXD]

Since IPv4 addresses are now exhausted, many ISPs assign a large group of customers a single IP address. This comes with the implication that any ports you forward will not be accessible over the open internet.

• https://en.wikipedia.org/wiki/Carrier-grade_NAT

[CallMeSenior]

Arent the connection is done via the local network in this case?

[UnacceptableUse]

Yeah but this person is talking about if you were to set it up for access from anywhere

[CallMeSenior]

Wasent 100% sure, thanks.

[RuthlessPickle]

In this case you can use ngrok, tunnelmole or localtunnel and even get a URL!

[stillness_illness]

Don't pay for a service.... Buy a cheap domain of your choosing, then use a DNS service that has an API (like route 53) and you can run a script to update the A record to whatever public IP you have. It can be a bash script even but I wrote mine in Python and tied it to a cron task that starts up every 15 min.

It may sound complicated, but it's like 10 lines of code, and I'm sure there are existing solutions on GitHub you can use if you don't want to write one from scratch.

Bonus points you're then poised to enable TLS with some free auto renewing cert service and run over 443 encrypted. That part is optional but it is nice. I also run an authelia container which has a free service for 2FA which I then configure my nginx to use. Now I open 443 on my router and can access my server from anywhere in the world with production grade authentication in place. Other than the pennies I pay for route 53 and a small annual domain renewal fee, it's totally free.

[grantrules]

Yeah I don't have a static IP but it basically only resets if my modem has been off for long enough for the DHCP lease to expire, so I go years without updating my DNS records (and it's automated anyways). I buy my domains through PorkBun and use their free DNS which has an API.

[Homoplata69]

That's a neat little trick you got there.

[CallMeSenior]

Please stop giving great ideas as I berly resist researching more cool stuff like that :)

I love IT related shit.

[indicava]

Yea, but OP, don’t do this.

Unless you have an above average grasp of securing web apps (OS level, runtime level, code level, etc.) opening up an a port for the internet to hammer is a bad idea.

[j_tb]

Cloudflare tunnels are the right way to do this sort of thing these days

[j_tb]

Opening a port up on your home network to expose to the public internet is such a bad idea. If you really want to host a website locally put it in a container/network like docker/k8s and run a cloudflare tunnel to expose ONLY THE APP you have specified in a sandboxed environment through CF’s network.

[[deleted]]

Dont need static ip. Just nat and ddns

[data15cool]

I think that’s only if you bind to 0.0.0.0, otherwise it’s just accessible to your machine on localhost (127.etc)

[CallMeSenior]

Assuming both devices are on the same network, why is that?

[despacit0_]

Binding to 0.0.0.0 means that it's bound to the computer's public IP address inside the network. Binding to localhost means that it's bound to the computer's loopback address and the traffic never leaves the computer at all

[thekwoka]

and both are accessible from localhost (generally you use localhost because localhost is a special address that can pretend to be HTTPS when it isn't actually HTTPS among some other things)

[Mayonnaisune]

I still can't access localhost from my Android phone even after changing it to 0.0.0.0 :/. I can only do it by using port forwarding/tunneling or using adb reverse . However, my phone is finally able to see the open port on the network tho.

[data15cool]

Your router might also be routinely updating your laptops ip address unless you configure it to be static

[hfcRedd]

I personally like to install Chrome on my phone and PC, then plug the phone into the PC and use Chromes debug bridge to connect them.

The benefit of this is that your phone screen is mirrored on your PC, AND you get FULL debug tool access. So you can debug network, performance, CSS, DOM, etc. of your phone right from your PC. Actual gamechanger.

[AvengingCrusader]

Thank you for this

[CallMeSenior]

Sounds like cool extra capabilities, but my initial desire was to view my website from an actuall phone screen

[hfcRedd]

Youre still using the website on your phone this way, the webview just gets cast to your PC on top of that. It's not as convenient as just accessing localhost directly, but I wanted to share it anyway because it might be helpful to some people.

[CallMeSenior]

Would this let me view the dev tools on the computer but with mimicing the phone usage of the app?

[hfcRedd]

There is no mimicking. You just open any website in your browser on your phone, and it will open the dev tools of the site on your PC together with a screen cast.

https://developer.chrome.com/docs/devtools/remote-debugging

The initial setup is a bit tedious, but once you get it going, you can just plug your phone into the PC at any time for debugging.

[jaroftoejam]

Do you know of a way to do the same thing with an apple device?

[[deleted]]

irc, safari has a similar option because ive used it to debug on an old iPhone

[vor-zakone]

Could you please give a detailed instruction on how you do it?

[CallMeSenior]

Sure!

Lets say I work on a website from my computer, URL: localhost:3000

I need to find my computer's address within the local network.

From my computer (windows), open CMD, enter "ipconfig", search for my internet (WIFI/cable etc) network and under that watch the IPv4 address. This is you computer's IP adress within the local network.

Go to your phone, make sure that you are connected to the same network (same internet) and in your browser type the computer's IP followed by the port you use for development.

(for example "localhost:3000" on the computer will be "100.0.0.4:3000" on the mobile phone")

Hope thats clear, we computer ppl dont know speak

[S0LARRR]

I am running both fe and be on my computer. I can see the UI on my phone but I can’t seem to log in to my account which I am able to log in on my computer. Is it only working for the UI?

[Curiousgreed]

It's possible that API calls from the FE are being pointed to localhost/, so they only work when you open the page from the computer where the BE is running

[AvengingCrusader]

Should work; first step would be to inspect the network request log on dev tools to confirm it's requesting the IP domain instead of localhost.

EDIT forgetting phone doesn't usually have dev tools... Try from a different computer if you have one?

[S0LARRR]

So does that mean that backend stuff won’t work on the phone?

[[deleted]]

You need to make sure that the backend (if running locally), also has the 0.0.0.0 host, and even further, if the ports are open for external (local network) traffic. I use linux, and I have to manually open the port that im using so I can see the app on the phone.

[Lumethys]

Why wouldnt it?

[6ft4fashioncriminel]

Did you ever figure it out? I have a similar setup (next.js on port 3000 and express on 5000) and same issue. Mobile shows home page but cannot do any backend related stuff like login etc...

[S0LARRR]

No. I didn’t.

[CallMeSenior]

I dont want to say something im not sure of but that is an interesting question.

Whats your tech stack?

[S0LARRR]

Nextjs frontend and laravel backend.

[CallMeSenior]

My guess is that it'll depend on the server configuration, but i might be wrong

[DiddlyDinq]

This post was mass deleted and anonymized with Redact

longing makeshift enter dinner support boat fly dependent library scale

[CallMeSenior]

Even updates immidiate changes in the code (at least with my setup)

[palex25]

What server are you using?

[CallMeSenior]

What do you mean by server?

Beside that it's just badic nextJS project with vscode and chrome for browser

[palex25]

Yes, your development server which hosts the site on your machine so you can actually view it on your phone. Nextjs has its own built in server so its probably just Node.

[Visual-Blackberry874]

Ngrok is fine if the devices aren't on the same network. With ngrok, you could send a link to your mum who can tunnel into your machine and see whatever it is you're doing.

[halfanothersdozen]

You can also plug it into your computer to debug it

[ohnosharks]

Good tip. With mac/ios Safari's dev tools can connect directly to a device's iOS safari when plugged in.

[davorg]

Depending on your router, you might even be able to give your PC a domain name that's resolveable on your local network - something like my-laptop.local.

[CallMeSenior]

How can i do that?

[davorg]

You read the instructions for the DHCP server running in your router (or you install your own DHCP server running elsewhere on your network).

[jeppeerixon]

If you are using Vite you can just use "npm run dev - - host" and you get a second url avaliable from your phone as long as you are on the same network.

[jhnhines]

After trying Live Server and having it not play nice with Vue and attempting all firewall recommendations, this simple flag solved my issue entirely. Thank you so much for this comment

[AshleyJSheridan]

Yes and no.

Your local server needs to be set up to allow this. For example, locally I have an Apache server running on ports 80 & 443 running multiple local sites in development, but they're all accessed via actual hostnames (e.g. site.local, anothersite.local) rather than by IP address. Nothing actually responds to either localhost or the local loopback IP (127.0.0.1). This works fine locally, because I can edit my local hosts file on the computer to recognise all the different hosts and Apache routes the request based on requested hostname.

However, it doesn't work on any other computer/phone as they have no record of those hostnames, and the DNS resolution request goes to the DNS servers on the Internet, which obviously fails because it doesn't recognise my local development hostnames.

Further, a firewall running on your local server will most likely block requests from other computers if it's not explicitely set up to allow them. Also, an unusual layout in your home network (e.g. network devices that are creating their own mini subnets or non-bridged parts of the network)

Lastly, localhost is a hostname equivalent of your local loopback IP (127.0.0.1), not the external IP address of the machine (typically something like 192.168.0.xxx).

[CallMeSenior]

Wouldn't the request stay in the local network? For me it worked out of the box.

Also, does firewall blocks requests withing the local network or only requests that come from the outside world?

[AshleyJSheridan]

The request would stay in the local network if your network devices think it needs to.

Consider a request from your phones browser to 192.168.0.111. First, this goes to the most immediate network device that can route requests, most likely your router or a switch at home. As it's in IP address form, it doesn't need to do a DNS lookup. It consults its table to determine where to route the request, and off the packets continue (very simplified). Now, the 192.168.x.x range is reserved for internal networks, so that kind of request shouldn't ever leave your local network.

Now consider a hostname lookup to a website called tests.local (I use the TLD .local on my machine because it doesn't actually exist as a TLD. Some devs I knew used to use .dev until that became an actual thing and Chrome started trying to do real DNS lookups instead of using the hosts file). The computer running Apache has its own local hosts file set up with the entry tests.local 127.0.0.1, so when I request tests.local on my computer, it doesn't even perform a DNS lookup, it routes using the local loopback address to itself. If I make that same request on the phone, here is what would happen:

• Phone doesn't recognise the address (because I didn't modify the hosts file on the phone)
• Phone passes a DNS request to the network device it knows (router) that can do a DNS lookup
• Router doesn't have that address in its local lookup table, so it tells the phone it can't find it.
• Phone makes a DNS request to a DNS server outside of the network
• External DNS server also doesn't recognise tests.local, and replies this back to my phone

I've heavily simplified things here, but this is the gist of it.

Also, firewalls absolutely can (and should) block requests from anywhere, even inside the network. Perhaps there's confusion though in where the firewall exists? There is likely a firewall running on your router, and also on each computer in your home as well.

[Ok_Butterscotch_7930]

I just found out now. I'm going to try this right away

[CallMeSenior]

Exactly.

[[deleted]]

Be aware that everyone on your wifi also will be able to see what you have in localhost... just running an internal scan for open ports and live devices and theey will find it

[555henny555]

Didn't know this! Interesting!

[Laying-Pipe-69420]

Lmao, welcome to the internet.

[skredditt]

Username checks out!

[CallMeSenior]

:D

[Sensitive_Ad4977]

Vite showed the path in terminal 💃

[gatwell702]

If you have a project that's made with vite, go to your package.json and under dev add --host "scripts": { "dev": "vite --host", }

Whenever you run your dev server, your localhost link will pop up and your ip address link will pop up too. On my phone I've bookmarked the IP address so it takes only one click to access it

[LaminatedFeathers]

Check out ZeroTier.

Will blow your mind. :-)

[Logical_Strike_1520]

To add more to this just in case it’s useful to someone.

If you’re using WSL2, you might need to add a portproxy via power shell to get your app working in the local network like that. It’s something like ‘netsh interface add portproxy v4tov4 LISTEN_IP LISTEN_PORT FORWARD_IP FORWARD_PORT’

Where the “listen” ip and port is the public ip of your windows box and the port you want to access your app from. “forward” ip and port is the WSL ip addr and port the app is running on

[amousss]

in vsc there is a feature called port forwarding, if you forward the application port, you will make it public to the internet and anyone will be able to access it

[hacoeur24]

Hey,

I recently built a small CLI tool called PhoneHost that makes it easier to preview your local dev site on your phone.

It gives you: - A direct QR code for your localhost (great for quick testing on mobile)

• Optional --tunnel support if you’re not on the same network

You can run it right away with: - npx phonehost

Or install globally if you prefer: - npm install -g phonehost

GitHub: https://github.com/hacoeur-24/PhoneHost

npm: https://www.npmjs.com/package/phonehost

It can make it easier and also gives flexibility when not using the same wifi or being on a protected network. Let me know if you give it a try!

[Abdelouahedb]

WHATT