DEV Community

loading...
Cover image for Browsing a localhost server from any device in your LAN

Browsing a localhost server from any device in your LAN

fdoxyz profile image Fernando ・2 min read

For most of us, a local development server proves to be good enough to get our day to day coding done. Even mobile device displays can be tested quite well on Chrome (or other browsers) using built-in developer tools. There are times though, where using a real device is better or even necessary.

This post shares an example on how to use any device on your LAN to access a local development server.

Using a Local IP Address

The first thing you need is your local IP address. Access to your local server should be transparent from any browser within your LAN by just using that IP address.

There are certain circumstances that make this somewhat trickier:

  • Third party integrations (i.e. Social logins)
  • Certain environments don't play nice with plain IP addresses and prefer domain names
    • I've found the iOS ecosystem to be one of these "tricky ones" sometimes

xip.io is a service that I continue to reach out for when I can't make plain Local IP addresses work. For example if your laptop has 192.168.0.100 for its Local IP Address, you should be able to reach it from any device in your LAN by browsing 192.168.0.100.xip.io.

An example using DEV

Assuming you've setup your local environment, the steps are pretty simple to start playing with it on your LAN or Wi-Fi network. Note that the same concepts apply for other frameworks/languages.

1) Add your URL as a valid callback on your OAuth integrations (i.e. Twitter sign-in)

dev.twitter.com app details

2) bin/startup is how we typically start working locally. OAuth integrations require callbacks to be made and your server needs to be aware of the domain to use.

On our example add the APP_DOMAIN ENV variable on startup:

APP_DOMAIN="192.168.0.100.xip.io:3000" bin/startup
Enter fullscreen mode Exit fullscreen mode

3) Browse for http://192.168.0.100.xip.io:3000 on a mobile device in your LAN and start testing your site 🤩

Troubleshooting

Is your server not responding to incoming requests? Is it "up and running" with local requests working as expected but requests from other devices on the network show a "This site can't be reached" or ERR_CONNECTION_FAILED?

Your server might be listening to the 127.0.0.1 interface, which is a common problem I've come across before. The solution here is to explicitly bind to the interface you need. Binding to 0.0.0.0 is an easy fix.

Conclusions

This has proven helpful for me when working with mobile apps that connect to a local server. It's also neat to know you can try out your experiments on real devices without having to host your project somewhere.

Networking isn't always straightforward. If you've used a different approach feel free to share them in the comments. Pura Vida!

Discussion (8)

pic
Editor guide
Collapse
v6 profile image
🦄N B🛡

// , And for the rest of us, there's ngrok.

Collapse
yokotobe profile image
yokotobe

How different from using port forward at home router.

Collapse
fdoxyz profile image
Fernando Author

That’s right! I didn’t mention ngrok which is very feature rich, a great tool to look into as well.

Collapse
fdoxyz profile image
Fernando Author • Edited

I really couldn't remember why I hadn't made the switch to ngrok given how thorough it is. Had to give it another spin out of curiosity: Blown away again by how good it is, but also instantly reminded my ISP/geographic location makes it painful to use 😆

Thread Thread
v6 profile image
🦄N B🛡

// , Also, in my experience, most of your typical InfoSec guys with their heads still stuck in "defend the network perimeter" mindset are going to look at ngrok tunnels like they're the unholy spawn of Coronavirus and AIDS.

Thread Thread
astonge profile image
sp4c3m0nk3y

It's like if you were traveling in a boat and punched a hole in the bottom because you wanted to go for a swim.

Collapse
andrewleontev profile image
Andrey Leontev

For lan you can set up nginx

Some comments have been hidden by the post's author - find out more