:::: MENU ::::

View MAMP Virtual Hosts On Your iPad and iPhone Over The Local Network

When developing sites for mobile devices, I have often wanted a way to view my MAMP virtual hosts on my iPad or iPhone without having to upload the site to a live domain. In the past, I have used CNAME redirects to point specific domain names to my local computer, to help with this issue, but DNS propagation usually takes 24 hours and I usually need to develop my sites sooner than I can wait.

I recently moved to a new location and my ISP prevents this from working for local devices, based on the router they provided for me, so I set out to find a new way to make this happen.

Enter: SquidMan.

From the website: SquidMan is a MacOS X graphical installer and manager for the Squid proxy cache. It is designed to operate as a “personal” proxy server.

When you run Squid on a MacOS X computer, it can:

  • cache downloaded content, reducing network traffic and improving browsing performance on slow links
  • act as a proxy server for other computers on your subnet
  • restore the operation of some MacOS X applications that normally fail through authenticated proxy servers

The part I was most interested in was the proxy server. I figured that if I could create the host redirect on my local machine, and then use my iPhone and iPad to connect to it directly, I would be able to view my virtual hosts on my development machine, since all traffic would be routed through that location. I was right. Here are the steps I took to accomplish this:

1. Install and Configure SquidMan.

Installation of SquidMan is very easy and does include the Squid proxy server, so you don’t need to download it separately. The first screen to appear was the preferences pane. The default port is 8080 and this is what I left it at. You can change this to suit your needs.

The only other tab you need to alter is the Clients tab. You want to restrict the use of this proxy to members of your local subnet to prevent outside access to your proxy server. Just click on the clients tab and set up the options based on the instructions next to it.  I set mine up to work for any computer connected to my local network.

Once you have finished that, save and then start your server.

2. Set up the Proxy on the iOS devices.

On my iPad and iPhone I then set up the new proxy server.  I went to the Wi-Fi tab and then selected my local network.  I then set the HTTP Proxy to “Manual”.  In the server field I used the IP address of my local machine, and then I added the port from the SquidMan settings.

From this point if you can browse the web, you have successfully connected your device to the proxy.  For my installation however, there was still one more step I needed to do to finish this setup.

3.  Add IP address to virtual host inside MAMP.

When trying to access my virtual hosts via the hostname set up inside MAMP, I would receive an access denied error message.

I found an easy fix to this by visiting my MAMP settings and adding the IP address of my localhost in the IP/Port settings of the virtual host.  For some reason, MAMP does not seem to like IP Addresses that have 0’s in them.  If your subnet range is like mine, you will see the red exclamation mark next to the IP address.  You will also not be able to type in the address directly, but will need to select it from the drop down list. You can then apply your settings and restart the SquidMan server for it to take effect.  NOTE: If you are unable to apply your settings, visit the MAMP preferences and select the option to allow apply when the IP of a host isn’t valid.

After saving and restarting both MAMP and SquidMan, I was able to view my virtual host on the iPad.

 


34 Comments

  • Reply David |

    Hi,

    Just wanted to say thanks for sharing this tutorial, worked like a charm!

    Initially I was trying to get MAMP working over the local network by using aliases under the ‘Hosts’ tab and the http://xip.io service. I basically added sitename.192.168.178.25.xip.io as an alias to the host I wanted to access which worked on the machine running MAMP but timed out on other devices on the network. Shame because getting it working that way would have removed the need for installing a separate application (SquidMan) and also having to setup proxy on each device.

    Have you tried this method? Seems that there’s no way to be notified of new comments on your blog but if you are able to get it working, I’d appreciate an email. =)

    • Reply Benjamin Rojas |

      David,

      I had tried multiple methods to get my virtual host to show up on other devices on my local network, but was unsuccessful until I found Squidman. I do see Squidman as somewhat of a hassle to set up and use, especially since I have to turn off the proxy every time I shut down Squidman. But that being said, it’s the only way I have gotten it to work up to this point.

  • Reply gabyu |

    Wow, I am finally finding the way out of my current problem thanks to your post. I have same subnet than yours. Thanks for your explanations.

  • Reply Raphael Essoo-Snowdon |

    Great post Benjamin! Although when I turn on the Proxy on the iPad, I’m unable to use the actual internet. Which means any live parts of my local code are broken.

    Know how to fix this?

    • Reply Benjamin Rojas |

      Raphael,

      I am not sure why you would not be able to access the internet when using the proxy. As long as Squidman is set up correctly, and your host computer is online, you should be able to access the internet correctly. Is your host computer online?

  • Reply Jeff |

    Excellent tip. However, is there a way to eliminate the “access denied” error message if you aren’t using MAMP Pro? I create my virtual hosts by editing my host file and httpd.conf file instead of running MAMP Pro. MAMP doesn’t have anywhere to plug in the IP address that allows access to the local site.

    It’s probably worth the money to upgrade to MAMP Pro so that I can view my local sites on my iPad, but I would think there would be some other way to avoid this error. No?

    Any help would be appreciated.

    • Reply Benjamin Rojas |

      Jeff,

      I have not tried this method using MAMP directly. I have found that MAMP Pro is worth every penny.

    • Reply Ignacio Morales |

      I figured it out. Just go to your VHost conf and change this:

      Listen localhost:port-used <– THIS

      <VirtualHost *:port-used> <– AND ALSO THIS HERE
      /*
      CODE
      */

      to:

      Listen :

      <VirtualHost :> <–
      /*
      CODE
      */

      😀 Thanks to everyone. Great Post

      • Reply Ignacio Morales |

        I figured it out. Just go to your VHost conf and change this:

        Listen *:port-used <– THIS
        <– AND ALSO THIS HERE
        /*
        CODE
        */

        to:

        Listen local-computer-ip (your computer) :(port used)

        <–
        /*
        CODE
        */

        • Reply Ignacio Morales |

          first post, sorry

          Listen *:port-used <– THIS

          <– AND ALSO THIS HERE
          /*
          CODE
          */
          to:
          Listen local-computer-ip (your computer) port used)

          /*

          */

    • Reply Ignacio Morales |

      change in httpd-vhosts.conf the following:

      listen *:used port -> listen [your pc ip address] : [port]

      virtual-host * : port -> virtual host [your pc ip address] : [port].

      that does it.

  • Reply adam |

    Thanks – this was very helpful! Keep up the great work. (crap – now this sounds like a spam post – seriously – isn’t)

  • Reply Alan |

    Thanks /very/ much for sharing this fix to get MAMP to ‘publish’ it’s DNS to SquidMan, I was stuck with that error for an hour or more and your tip on setting the ‘IP / Port’ in MAMP Pro solved it! Cheers :)

  • Reply Ignacio Morales |

    Hello Guys! Any idea on how to get it running in Bitnami MAMPstack? Cheers!

  • Reply Sarah | @MadysonDesigns |

    So this is an awesome solution- works like a charm for me (even though I’m using std apache vhosts and not mamp).

    The one trouble I’m having is that the iphone isn’t respecting viewport sizes- I’m not getting the proper breakpoints to test some responsive CSS. Any ideas?

  • Reply cjoy |

    for mamp (not pro) users:
    you should not have to mess with your vhosts or apache port config.
    instead, if you run squid on the same machine as mamp, make sure to allow squid to access the local apache:

    Go to “SquidMan -> Preferences -> Template” and find this config:

    # protect web apps running on the proxy host from external users
    http_access deny to_localhost

    then comment out the second line and save.

    • Reply Anh Nguyen |

      I found the source of the problem. I used port 80 for both MAMP’s apache and Squid. I don’t know why it makes the redirection; but using another port different from 80 for squid fixes the problem. Hope this helps someone else :)

      Thank you Benjamin for a very helpful post

  • Reply Foguii |

    Hi there,

    Thanks for this tutorial! I can’t get it to work with the proxy method though…

    However, I can directly access my local website on any device by typing the host machine’s IP + 8888.

    Say, any device on the local network can access the website by entering 192.168.x.xx:8888

    The weird thing is that the layout is completely messed up. Like it’s not pulling all the files through, with missing images and only selected CSS.

    Do you know what the cause may be?

    MAMP Pro permissions are set to www for both owner and group.
    I am not sure if I should change permissions on Finder or on my network properties. Apache server is on 8888.

    Any help to put me on the right track would be much appreciated :)

  • Reply Jonathan |

    If it makes you feel any better, using xip.io might not have been a better solution. xip.io fails when working with sites where absolute asset URLs are used instead of relative URLs, such as http://mysite.com/css/style.css.

    WordPress sites, for example.

    The iOS device can’t find the asset, since it can’t resolve mysite.com (which is the problem we’re trying to overcome in the first place). Squid doesn’t suffer from that problem.

  • Reply Dave |

    Any idea how to get this working with Squidman 3.51 and MAMP Pro 3.0.5?

    I just got Squidman to try this, and upgraded MAMP Pro (because the 2.x version I had didn’t have the IP/Port option), but either Squidman can’t start if MAMP is running, or Apache can’t start if Squidman is running.

    Any ideas?

  • Reply Alex Gant |

    Slightly off topic but still related. Could this not be achieved by adding the IP of the MAMP server to the client device’s list of DNS servers? Therefore essentially telling the client device to look up the requested domain name on the MAMP server which would have all virtual hosts setup within it’s own hosts file.
    FYI – I did try this briefly but to no avail. Could be on account of my netwrok settings though.

  • Reply Seth |

    Try clearing your cache and giving it a few minutes again, I’ve seen this problem while MAMP Pro is resolving addresses with a new host setup.

So, what do you think ?