Menu
12/03 2012

Local Web sites on iPad & mobile

Dear Valued visitor,
Thank you so much for your support and interest in the articles on Webegg. Whilst a lot of content is totally free, some of the things I put a lot of work into are slightly restricted in terms of code and demo links. I've had to do this to keep my level of support to the high quality I want to.

Please click below to subscribe, get rid of this message and see this article in it's full glory;

This is a small one off payment of £5 to give you full access to all content on my site forever.

When I build sites I, like a fair few other Web Designers, use a local server setup. For me it's WAMP at the moment. In order to work on many peoples sites at once, not having to copy/paste or constantly rename things, I have to use a combination of the Windows hosts file, which is part of Windows and allows you to direct incoming traffic to various places. This is where I initially set up internal domain names like local.project.co.uk or local.clientproject.com and direct to 127.0.0.1, which is my local server that WAMP creates on install. Virtual Hosts is part of WAMP and takes the requests coming from the windows hosts file, giving them a tangible name and a place where the files for that site reside. Everything works beautifully so you can visit any of the domain names (local.project.co.uk, local.clientproject.com etc) you setup in your Windows hosts file in any browser just as if you are surfing the Web.

With the explosion of Mobile device popularity (including my beloved iPad), there is an ever growing need to open this flexible local development environment to these other devices on my local network. This subject has been one of my bugbears for years. It's a subject I have come back to & given up on time & time again. There are a raft of blog posts and forum discussions on this subject but no matter how much I tried, like most of these other people I couldn't get it to work. It seemed to be something to do with the iPad itself not being recognised by my local machine through the network.

Adobe in the Shadows

That company who, in recent years have not really 'got' the Web have also released Adobe Shadow which allows you to install an app on each device you want to test your site on and in essence follows along whatever you do in the browser on your main machine. This little app was what inspired me to look into this issue again as it is the first glimmer of hope that Adobe might be starting to make new useful software.

Recently I had a collaborative breakthrough with a colleague at work by tracking down an issue with virtual hosts. By editing my httpd-vhosts.conf file and taking out all the directory permissions for local sites (which wasn't really needed but not obvious it was the issue). Suddenly, I was able to view the first site in the list but only by entering the IP address of my local machine in safari on the iPad.

It suddenly dawned on me at this point that the iPad was actually being seen by my local machine on the network but was simply being ignored by my WAMP server setup for some reason. Further investigation followed!

Proxy, music to my ears

I'm not really an IT or programmery type by trade but I was recently reading about proxy servers, how they can direct traffic around, accept requests from other ip addresses, share connections and things like that. This got me thinking about this localhost situation. If I could use my local machine as an HTTP Proxy server, things might just work.

I looked around online for localhost Proxy Applications and soon stumbled over Charles and soon understood that it was possible to have a Reverse Proxy!

This software was made for my (and I'm guessing your) situation and simply worked without any configuration after I installed it. Just check the the default settings are the same as mine. Under Proxy -> Proxy Settings, you should see this in Windows:

The important thing here is the port number 8888, you need to enter this on your iPad as well as any other mobile devices you need to look at your local sites on. At his point you'll need your local machines IP address. Open up your command dialog by entering cmd under search in your start bar and enter ipconfig in the dialog, you should see something like this, the IP you need to note down is the one under 'Wireless LAN adapter Wireless Network Connection', I've blanked mine out as that might confuse you:

Next, go to your iPad (I'd guess the iPhone is very similar) and under settings, select your Wireless connection making sure it's the same as your local machine. Add the proxy settings as per below, including the ip address you just noted down as the server and 8888 under port number:

Once you have done this, go to safari on the iPad, or whatever other browser you use and try typing in a local address (yes, a local address!). As soon as you do this, your local machine should let out an almightly 'warning' alert like the one below. Guess what you need to do?!

Once you have accepted the connection, go back to your iPad and try one of your local sites.

No need to thank me (but it'd be nice if you did)!

14 Responses to Local Web sites on iPad & mobile

  1. […] domains for anyone else was to use a proxy server. Have a read of this post I wrote on it – http://webegg.co.uk/local-web-si…Comment downvoted • Just nowCannot add reply if you are logged out.UpvoteDownvote • Repost […]

  2. Mark says:

    Thank you thank you thank you!
    Much like you I have been trawling blogs and various other google search results trying to find a simple way to do this, and this literally took 5 minutes to set up and get working with no hassle. You sir, are a life saver.

    1. Webegg says:

      It’s something that has eluded me for literally years. Charles does cost a little bit but if you regularly develop responsive sites it’s well worth it.
      Glad to be of help!

  3. Chris says:

    Thank you!
    Been looking at a few places that suggested Charles as a solution to this exact problem – your’s was by far the most helpful and instructive.
    Nice one!

    1. Webegg says:

      Like I say, this had been bothering me for a year or so & seemed to be a common issue. I know if someone else had shared a solution it would have really unlocked a bottleneck during development. Glad to be of help.

  4. Errol says:

    THANK YOU!
    You’re a life saver.

    Perfect for testing responsive sites on multiple devices…

  5. ken says:

    It looks like you still need an active local connect though correct? I would like to do this self contained to the ipad without bouncing off another machine or am I understanding how this works incorrectly?

    1. Webegg says:

      Yes unfortunately you are understanding it slightly wrong. This is for local testing only. The site should be running on your local desktop or laptop development machine for this tutorial. Good luck with your mission.

  6. asinema.net says:

    This posting Local Web sites on iPad & mobile – Webegg,
    has really wonderful advice and I realized specifically what I was initially
    hoping for. I Appreciate it.

  7. Ken Collins says:

    Local Rails development and the good folks at 37signals has solved this problem in a way that anyone can use. The have a created a service called xip.io that sends back local network IP address for DNS resolution.

    http://xip.io

  8. meesteryan says:

    Hey there,
    I just tried this setup and found it worked straight off in my old iPad – thank you! – however the same setup on my iPad Mini (running iOS 6.1) results in a “Server stopped responding” message in Safari. Other sites load fine through the proxy but not my WAMP localhost sites.
    Anyone have any ideas?
    Thanks,
    ‘yan

  9. Kevin says:

    Like everyone else I have been searching for this for ages. However, I followed everything in the tutorial and it still won’t work for me.

    I have my site running on the pc through a wamp server and Charles installed and working. I can now type in my IP address on the ipad with safari and it lets me access my virgin super hub but not my local host. Anyone have any ideas?

    Thanks!

  10. Chris McGrath says:

    Thanks for this writeup. I love Charles Proxy but I hadn’t thought of using it this way. You just saved me a bunch of effort and time!

  11. Joseph Gabriel says:

    The same effect (haven’t done the tutorial on the website, just guessing) could be done with WampServ on local machine and using the local ip to acess the local files on the iPad or iPhone or anything in the same network that has a browser function, but the reverse proxy way seems cool to hide the ugly local IP (need to use like 192.168.1.9/FolderName to access), gonna try it later!

Leave a Reply

Your email address will not be published. Required fields are marked *

This article is in the Server category. Here are some other related articles also in this category.