After getting frustrated that I couldn't develop websites for the iPhone locally, smarty-pants Brandon 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.
Chris Wetterman
April 19th 2010
Testing locally like this is great. What I do in addition is to set up a virtual host so I can use a web address instead of IP. I name my sites with a ‘.dev’ domain so they’re not confused with and I can still reach out to live sites.
Local testing:
http://www.google.dev
Live Site:
http://www.google.com
Now this probably wouldn’t work from an iPhone or any other machine on the network unless it goes through a server first which would provide that redirect to the development machine.
Richard
July 18th 2010
Great article, many thanks!
I’m wondering if there’s a way to make this work with my local sites built in WordPress. I can’t seem to access the this way (I only get the HTML) and none of the PHP is parsed. Any thoughts?!
Chris Wetterman
July 18th 2010
Here’s another way to test on the iPhone and iPad (even if you don’t own one!). If you don’t already have a developer account, get one at http://developer.apple.com/iphone/. From there download the Xcode IDE. You can then launch iPhone Simulator, which includes Mobile Safari. Launch Mobile Safari and then from your desktop browser, drag/drop in the link (file:///) to the simulator and it’ll open your site. You can even test out a site on someone else’s machine by mounting the drive it’s located on.
That’s if you’re not using any type of backend processing. If you are you’ll need to go the MAMP route or similar as Dave/Brandon describe above. Also, with using the simulator you have access to the iPad, iPhone, and iPhone 4 and testing under multiple versions of the SDK to boot.
Dave DeSandro
July 19th 2010
@Richard If you’re already running MAMP then you should have access to databases and PHP just as you would while testing on your desktop.
@Chris Wetterman Using the iOS Simulators are great to view progress. I didn’t realize the drag-n-drop functionality extended to html files as well. Thanks for the cluing me in.
Richard
July 20th 2010
Hi @Dave - thanks for this, but whilst I can view my other sites (for example those built with Zend and those in Plain HTML) I can’t view my local WordPress by simply navigating to local host… I always get taken to a 404 which lacks any CSS or JavaScript included files.
I have given the site a hostname with MAMP pro and it obviously works fine on my local machine.
It may have something to do with how WordPress works.. When I click on an internal link it removes the IP address of the serving computer and I get taken to another site to or I get an error.
So, on my iPhone I can navigate to 10.blah.blah and there I can navigate my localhost - when I click on a folder which contains the site I get taken to 10.blah.blah/my-local-site.com/ - and when I click on a link on this site I get taken to my-local-site.com (404).
Any thoughts on what I could do to make this work?!
Richard
July 20th 2010
I should add that I get the same 404 if I navigate to the site on the serving computer via localhost - so localhost/my-local-site.com brings me the site, but I get 404
Chris Wetterman
July 20th 2010
Richard, it could be a couple things. If you gave the site a root URL during setup in WordPress and your CSS/JS are auto-prefixed with that URL then accessing from http://localhost/yoursite probably won’t render correct because they’re looking for http://www.yoursite.com. I haven’t used WordPress, but experience with other CMS’s tells me you had to give the site a root URL at some point.
You restarted Apache correct? I know Dave mentioned editing the etc/apache file but using the Hosts tab in MAMP is much easier provided the GUI frontend. Make sure you use both http://www.yoursite.com and yoursite.com when entering a hostname; the second will follow under the Aliases table.
Dave DeSandro
July 20th 2010
Richard - I’ve opened up a new issue regarding the Wordpress installation and Windex on GitHub. If I ever find a solution, you can track progress of it there.
Dan Drinkard
July 20th 2010
@richard: There are 2 settings in the Wordpress Database (options table) for site url that would need to be changed. I believe you can actually override these in the config file while developing locally. I’d set them to either your local IP or your computer’s shortname (mine would be http://10.0.1.4 or http://dans-laptop.local, for example). From there, all your links will be written correctly, and admin should work again.
More info here: http://codex.wordpress.org/Changing_The_Site_URL
Richard
July 20th 2010
Thanks to all for the help!
It works now - I changed the WordPress and site url to 10.0.1.2/my-local-site.com. Now I can peruse my sites on my wife’s iPad - and yes I am very jealous in case you’re wondering :-)
Will post to git hub shortly.