Test View MAMP Virtual Hosts On Your iPad and iPhone Over The Local Network - BenjaminRojas.net

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.

 

Tagged with: , , , , , , , ,
Posted in iOS, iPad, iPhone, MAMP
26 comments on “View MAMP Virtual Hosts On Your iPad and iPhone Over The Local Network
  1. David says:

    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. =)

    • Benjamin Rojas says:

      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.

  2. gabyu says:

    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.

  3. Raphael Essoo-Snowdon says:

    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?

    • Benjamin Rojas says:

      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?

  4. Jeff says:

    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.

    • Benjamin Rojas says:

      Jeff,

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

    • Ignacio Morales says:

      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
      */

      :D Thanks to everyone. Great Post

      • Ignacio Morales says:

        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
        */

        • Ignacio Morales says:

          first post, sorry

          Listen *:port-used <– THIS

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

          /*

          */

    • Ignacio Morales says:

      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.

  5. adam says:

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

  6. Alan says:

    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 :)

  7. Ignacio Morales says:

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

  8. 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?

  9. cjoy says:

    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.

  10. Anh Nguyen says:

    My site is at pmh.dev
    I followed your instructions. But when I tried to access http://pmh.dev from my iphone, it redirected to http://pmh.dev/http/pmh.dev/
    Strange! Do you know what the problem is?

    • Anh Nguyen says:

      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

  11. Foguii says:

    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 :)

  12. Jonathan says:

    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.

  13. Verizon says:

    I like it when people get together and share views.
    Great website, stick with it!

    Here is my web page Verizon

  14. Thanks for sharing such a good thought, paragraph is fastidious, thats why i have
    read it entirely

    my webpage … Cool Scented Candles

  15. werner says:

    Thx… it work’s perfect!

  16. Thomas says:

    Hi there,

    Thanks a lot for this post.

    I also wanted to mention that you can do the same with Charles proxy

    which I personally prefer since it brings a lot of other useful tools

    this post about using Adobe Inspect details the process

    http://blogs.adobe.com/edgeinspect/2012/05/16/shadow-charles-proxy-virtual-hosts-workflow/

  17. Outstanding article. I had been verifying continuously this particular blog site for fascinated! Very helpful details specially the staying portion :) My spouse and i deal with these kinds of facts considerably. I had been in search of that certain facts to get a number of years. Many thanks plus enjoy.

  18. Please let me know if you’re looking for a article author for your weblog.

    You have some really good posts and I feel I would
    be a good asset. If you ever want to take some of the load off, I’d
    really like to write some material for your blog in exchange for a link back to mine.
    Please send me an email if interested. Kudos!

    chaussures homme christian louboutin

2 Pings/Trackbacks for "View MAMP Virtual Hosts On Your iPad and iPhone Over The Local Network"
  1. [...] Go to your wifi settings in your iPad and change the proxy settings, this is what it looks like. [...]

  2. […] order to do that, you can follow this great tutorial by Benjamin Rojas, that will explain very easily how to do […]

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Twitter Feed