Connect to localhost on iPhone

In this tutorial I will show you how to live connect to your local site from an iphone with MAMP, WordPress and Jekyll.

Preparations

All three methods require a short preliminary setup on Mac’s local hostname. This will be used as an alias to localhost and will be typed as the web address on mobile. So let’s set up your local host:

1. Go to System Preferences > Sharing
2. Near the “Computers on your local network…” text, click the Edit button
3. Add your preferred name, like yourname.local
4. Use this name instead of localhost everywhere in your workflow

Using MAMP

1. Fire up MAMP and hit Start Servers
2. Connect your iphone to your Mac with an USB
3. Go to System Preferences > Sharing
4. From the left side menu, select Internet sharing
5. On the right side, check iPhone USB
6. Check the Internet sharing checkbox
7. If an insurance prompt window appears, go on with Start

Now grab your iphone and go to http://yourname.local in a web browser. You will see that the contents of your MAMP folder is shown, containing with your local sites.

Using WordPress

If you would like to use with local WordPress sites, just repeat the steps above, and change the WordPress Site URL and Page URL settings according to your Mac’s host name.

For example: let’s say that your local WordPress install is at http://localhost/mysite. We need to change this url, so go to Dashboard > Settings > General and change the Page and Site URL to http://yourname.local/mysite where name.local is your local Mac host name and mysite is the WordPress folder.

Now check your custom link on your iphone, and see that your WordPresss site appears.

Using Jekyll

Jekyll serve doesn’t expose the site on the local network (for security reasons), but you can open it with using the --host flag. Use 0.0.0.0 to bind the local IP address of the host:

bundle exec jekyll serve --host 0.0.0.0

If a prompt comes up with “do you accept incoming network connections”, just hit Allow

Type your local Mac host name in your iPhone’s web address bar in Safari, and add the Jekyll port after the url (it is :4000 by default). Now you can visit your site from any device on the local network, like http://yourname.local:4000

Troubleshooting

I ran into an issue when using this method with MAMP: everything was set up correctly, hostname.local/website showed the requested local content on a computer, but when I tried to access it from my iphone, it refused to load the page.

After a bit digging into this, I found out that the problem is the Mac firewall blocks the site from being rendered on mobile. To fix this, follow these steps:

1. Go to System Preferences > Security & Privacy
2. Select the Firewall tab and click on Firewall Options
3. You might need to click on the lock icon to unlock modifications
4. With the + button, add MAMP as an exception
5. Make sure that MAMP is “Allowing incoming connections”

Source: Connecting to localhost from an iPhone

Tags