How to Test Web Apps and Sites on Mobile Without Deploying (Access Localhost)

It doesn’t always make sense to deploy our web apps and sites to test them on our mobile devices. Luckily, we can access our computers’ IP addresses by following some simple steps.

Photo by Dan Nelson on Unsplash We don’t need VPN, but this picture is freee!

The Problems

I’m creating a static website and I want to test it on my mobile devices without deploying it anywhere (for some random reason, I don’t want to use GitHub Pages to test 🤷‍♀). Or I want to test my React app on my phone, or I’m testing a native app that depends on communicating with a back end that’s stored on my computer…and I don’t want to deploy it yet. Maybe my Internet connection is too slow or I don’t ever plan on deploying what I’m working on, so I don’t want to go through the hassle. Who knows? I’ve got reasons!

The Solution

Luckily, the solution is really simple. Other than a working computer and mobile device, you’ll need:

• To connect your devices to the same WiFi
• A command line server, like httpserver, if serving a static site

First, you’ll need to serve up your app. If you’re serving a static website (HTML, CSS, JS), you’ll need to serve it up using a command line server. If you’re serving up a web app, like a React or Rails app, just start it. And now, for the glorious steps (which I can confirm do work on macOS):

1. In the command line run ifconfig on a Mac or ipconfig on Windows.
2. On a Mac, locate an entry that has a status of active. Next to “inet”, you’ll see an address that looks something like this: 192.168.x.xx. You can test that this address works by navigating to it in a browser along with the port your app is running on, e.g. 192.168.1.11:3000. If it’s incorrect, try another address. For Windows, try the IPv4 address.
3. In some cases, you might need to change the configuration of your app in order to access it this way. In Rails, for example, we need to bind the host and port when starting the server (rails s -b 192.168.1.11 -p 3000) or set environment variables.
4. Once you find the working address, you can update any apps you wish to test on your devices. For example, if you’re running a front end that relies on a locally-hosted back end, you could set an environment variable to point to the local IP address when the app is being run in the development environment.

And that’s it!