How to connect to localhost from an iPhone

July 15, 2019

This tutorial will show you how to access a localhost server from an iPhone if you're using a Mac. I used this to access a Ruby on Rails app from my iPhone, but you could just as well be building with Node, Jekyll, Gatsby, or anything else. Just make sure you have an iPhone and a Mac. Let's get started.

Connecting iPhone to localhost

Connect your iPhone to your computer via USB.
Open System Preferences > Sharing.
Select Internet Sharing in the left tab. This should show your internet sharing controls on the right.
If the checkbox next to Internet Sharing is enabled, uncheck it.
On the right side of your Internet Sharing options, check iPhone USB.
Enable Internet Sharing by checking its checkbox. There may be a popup that asks you to confirm this action.
Find the message near the top that says, "Computers on your local network can access your computer at: xxxx.local. Make a note of what xxxx says – this is your computer's name. You'll be typing it into your address bar, so I recommend editing it into a short word.
Depending on your server settings, you might now be able to access your localhost server from xxxx.local:yyyy, where xxxx is your name from the previous step and yyyy is your server's port number. For instance, myname.local:3000. However, you might need to do one more thing before you can connect to your local server.
You might need to explicitly bind the IP when running your server command. For instance, with Rails, I had to add a binding flag: rails s -b 0.0.0.0. Then I could connect to myname.local:3000 to run my app. If you're running something else, you might want to review your framework's documentation to see how to bind the server to an IP.

Now you should be able to access your localhost server from your iPhone. You can also access additional debugging tools with Safari:

Using Safari's built-in debugging tools

Inside your iPhone's Settings app, go to Safari > Advanced and enable Web Inspector.
On your computer, open Safari > Preferences > Advanced and enable Show Develop menu in menu bar.
Still on your computer, make sure Safari is in focus, and open the Develop menu (found on the menu bar running along the top of your Mac's screen). Open this menu, select your phone's name, and choose Connect via network.
On your phone, open Safari and navigate to your localhost app.
On your computer, open Safari's Develop > PhoneName menu and select the correct tab to open a live debugger on your computer.

Congratulations! You can now access localhost via your iPhone, and you have some nice debugging tools as well.