View Local Websites on Your iPhone or iPad

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.

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?!

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.

@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.

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?!

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

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.

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.

@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

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.

Worked! Thanks for the help!

Seems like u are using my favourite texteditor Textmate ;)

Thanks for this Blog, very useful.

Cheers
Hotte

Hello,

I have been looking everywhere to find a solution to host files directly on my iPad.

I would like to run a HTTPD server inside my iPad, so I can use it even if I don’t have Internet with me…

would be usefull during presentations…

Thanks to anyone helpong me out with that.

i am new with ipad enviroment, i have a php site that i want to run in the ipad, in mac i use mamp as pageserver, how can i install this server in the ipad to make my site work localy on the ipad?

to run Apache + PHP on iPhone you need jailbreak it. Static Pages (HTML5 + CSS + JavaScript) you can copy to your iPhone / iPod / iPad and run localy without network connection. I have used FileApp to copy files from MAC or PC to iOS device.

Thanks for your article. I can access my Mamp folder at 10.0.1.5/ - its has the default Mamp Pro index file. I use Mamp Pro so I access a site with “mywebsite” and it links to wherever the site is on my computer.

How would I account for this setup? Your help would be appreciated.

@David I’m sorry to say I haven’t run into this issue and don’t know the best way to resolve it.

David, if you are in control of what url ‘mywebsite’ is, you might have luck with a dynamic dns service such as dyndns.com. On your mac, you’d set the site up as mywebsite.dynalias.com or similar, and set the updater to use the ‘default interface’ (your 10.0.1.5 IP instead of your external one). Once that’s done, you should be able to access your site from your device while connected to your network.

The only way to access ‘mywebsite’ directly would be to edit your hosts file, which you can’t do on an iOS device afaik.

Hey guys. This is my solution for iPad testing. Join the Apple Developer network, and download their toolkit. In this is XCode. You can simply open this and start a new project. You then Build and Run a project and a device will popup for you to test in. You can browse to any of your local dev sites even if you are using Mamp Pro. Then when your project is complete and you have uploaded your site to a staging server you can then do a final test in a real iPad. I hope these thoughts may be of use.

@DAVID - you can achieve that with a combination of:
1) Editing your hosts file to point mywebsite to your loopback ip (127.0.0.1)
2) Creating a virtualhosts in your apache configuration that uses mywebsite as ServerName

You can find more about it on the default documentation of either MAMP or Apache itself.

Hey Paulo, curious how you’re editing your hosts file on an iPad or iPhone? I’d love to be able to do that :)

The exact info I was looking for - cheers

@Dan Drinkard its very simple just jail break it then use your favorit txt edutor to edit /etc/hosts file.

@Rui magro ... nice1! thx alot

This works only on MAC? i am using WINDOWS 7…....then how can i test my local website on iphone simulator?

Can any one suggest?

Hi, I use MAMP and Virtual Host X to manage multiple web projects easily on my mac. Virtual Host X http://clickontyler.com/virtualhostx/ allows you to broadcast dev sites on your local network so I can access dev sites in for instance IE on a PC. I just bought an ipod touch for testing today and downloaded HelloNet http://www.bluetooventures.com/products/hellonet which is a free app which discovers bonjour websites - just a few taps to browse and view all the sites on my mac from my ipod! Seems to work great so just thought I’d share.

That’s great. Thanks!

Did not expect It would be that simple.

You may note, that links on the webpage mustn’t be 127.0.0.1. Otherwise the testing devices will look for the resources on themselves.

I had this with base-href tag at a TYPO3 installation (primarily for speaking paths). I had to change this to the real IP address within the network and everything works fine from now.

Thanks! This was the first result I clicked on, and it was exactly what I was looking for :)

my iphone keeps saying safari could not open the page because the server stopped responding. i have followed the steps shown here. my iphone & mac r on the same network too.
the html in my sites folder shows on my mac & i get the “it works” text when i load just my ip address on my mac
Pls help.
thanks

Getting the same problem as Z. Could this be a Lion issue?

Ze & Buzz, a couple of things to check:

IP address: should be your network address (probably 192.168.1.* or 10.0.1.*), not your WAN address (ie., not what you’d see at whatismyip.com), nor 127.0.0.1, ‘my-computer.local’, ‘localhost.’

Port: if you’re serving on something other than 80, make sure you are requesting the right one

Firewall (sys prefs / security): if you have it on, be sure the right port is open

Server: some dev servers (like django) bind only to your local ip by default. If this is not just static HTML, be sure you’re listening on 0.0.0.0. Also, pow for rack/rails might hijack port 80 and lead to 404s

Hope that helps!

Thanks of the response Dan. I managed to get it working on my laptop which is Snow Leopard. On my Mac Pro I have Lion and it doesn’t use an FTP as it’s been removed by apple by default. So I connect via SFTP and “Remote Login” checked in my system prefs. I follow the exact same steps (but change my IP address for the Mac Pro) but it just won’t work. Weirdly the iPhone removes the “:8888” whenever I try and load it and pops up the “can’t load the server” message. If I change the addresses back in phpMyAdmin it loads the naked html again.

Not too much of an issue now as at least I have it working with my laptop’s MAMP. But would be nice to get it working with Lion too.

Thanks for the post, just what I needed! I am trying to test some responsive design on the iPad so this is perfect.

Was successfully able to change the Apache settings but when I reloaded the IP address on my phone it gave me a 403 Forbidden. I don’t have a firewall on…any ideas?