by Dave DeSandro
After getting frustrated that I couldn’t develop websites for the iPhone locally, smarty-pants Brandon Jones enlightened me with an easy fix. This tweak enables your iPhone or iPad to view local web pages on your Mac over Wifi. This allows me to hack away at an iPhone site on my local machine, and then reload Safari on my iPhone to see the changes, without ever transferring any files over FTP to a live public site. It’s the same method we employed in the demo for welovemariokart. These directions were developed running Mac OS X Snow Leopard.
First off, make sure that your iPhone and your Mac are using the same wireless access point, as they will need to be on the same local network.
If you’re already using MAMP to develop locally, you’re a step ahead of the game. If MAMP ain’t your thing, you can still make it happen, see the following section Running Apache.
Using MAMP
Retrieve your IP address from System Preferences > Network > AirPort.
Next, we’ll need the Apache Port from MAMP, in Preferences > Apache. By default, this is 8888.
These two components make up the URL you can use on your iPhone to see your MAMP development directory, i.e. 192.164.2.164:8888.
That’s it! Now you can get cracking developing locally with MAMP and viewing those pages right on your iPhone.
Running Apache
For the non-MAMPers out there, once you have Web Sharing enabled, you’ll get the IP address for your local machine. You can go ahead and type that IP address into Safari on your iPhone. You should get a simple page that confirms “It works!”
The other URL with your Mac’s username will pull up the ~/Sites directory. But chances are your local development sites are not located in ~/Sites. In order to change where this IP address directs to, you are going to need to change a couple default Apache settings. In Finder, hit Cmd + Shift + G and enter “/etc/apache2”.
In this folder you’ll find the config file httpd.conf. Crack it open with your favorite text editor. Here, we are changing the directory for the DocumentRoot. This directory is set on lines 167 and 194, the default is
“/Library/WebServer/Documents”
This is an absolute directory, so if your development sites live in ~/web-design/code you’ll need to change it to
“/Users/username/web-design/code”
Once you save the changes, you will be prompted to authorize it with your user credentials.
Finally, to apply the changes, you’ll need to restart Apache. In Terminal, enter in:
sudo /usr/sbin/apachectl restart
As this is a sudo command, it will require you authorize the command.
Back on your iPhone, reload the browser viewing the local IP address. You should now see the contents of your development directory. Now your iPhone, iPad, and friends close by can use this URL to view your local websites. Nice!
Of course, this tweak only scratches the surface of the modifications you can make here. If your heart so desires, you can go deeper down the rabbit hole and fully enable PHP. Have a better way to make this happen? We’d love to hear it in the comments.
