Using LocalHost for Mobile Development

This short tutorial is for Mac users

You may have known Chrome DevTools enables you to test the look and feel of your web application on differently-sized devices, but did you know that you can also use run localhost on any device that can connect to the internet? As you run localhost:3000 (or whichever port) on your local machine, your phone and tablets can run your program in real time for developing and testing on mobile.

Why is this important?

The Chrome DevTools Device Toolbar is a great tool that saves a lot of time, but it’s not perfect. After deploying my personal website for example, I was surprised to find that the version of my site I saw in my iPhone’s browser looked quite different from the local DevTools version I’d spent hours with, tweaking media query after media query. When I later pulled up my site on my monitor’s wide screen, I discovered that I’d never actually accounted for screens wider than the 13” laptop that I’d been programming on, either.

To avoid these types of glitches and UI/UX bugs before deploying for the whole world to see (ideal, right?), it’s essential to test your app on physical devices of different sizes. One cool thing about running localhost from your mobile device is that, just like with localhost on your computer, you can see realtime changes to your app as you code.

The How-To (for Mac users):

(1) Run your program on your Mac’s localhost
Make sure your program is running on localhost. When you go to the localhost port you’re running (ex. localhost:3000), the current version of your app in development should be visible.

Take note of the port you are using. Common port numbers are 3000, 3001, 8000, or 8080. You can find the port number in your URL bar after “localhost:” In this instance, my localhost port is port 3000.

(2) Find the IP address of your Mac
Here, we want to find the IP address of the Mac running localhost. To find the IP address, start by clicking the apple logo in the top left corner of your Mac to open the dropdown menu.

Choose System Preferences from the menu to open up your System Preferences.

Next, choose Network from the list of options in System Preferences. Your Network App should open up.

Your IP address will be in the middle box on the right, under Status. Underneath your network's status, find the sentence telling you the wi-fi network you're connected to and your IP address. In my case, the IP address is 123.45.6.08 . Take note of the IP address because we will need it for the final step.

(3) Connect your mobile device to the same wi-fi network as your Mac

If this isn’t already the case.

(4) Open localhost on your mobile device
In the URL bar in your phone, go to

http://{your-IP-address}:{your-port-number}

In my case, I’d put this into the URL bar:

http://123.45.6.08:3000

Now you should see your app locally on your mobile device. Now go build something great!

Connect with me on Twitter and on LinkedIn.