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

      • Rodger says:

        I see you share interesting stuff here, you can earn some additional cash, your blog
        has huge potential, for the monetizing method, just search in google – K2 advices how to monetize a website

  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)

    • Cole Aun says:

      I must tell you that it’s hard to find your articles in google, i found this one on 13 spot,
      you should build some quality backlinks in order to rank
      your webiste, i know how to help you, just type in google – k2 seo
      tips and tricks

    • An outstanding share! I have just forwarded this onto a colleague who
      was doing a little research on this. And he actually ordered me breakfast simply because I discovered it for him…

      lol. So allow me to reword this…. Thank YOU for the meal!!
      But yeah, thanx for spending the time to discuss this topic here on your blog.

      My web site … Ways To CureR Herpes

  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

  19. Dave says:

    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?

  20. Alex Gant says:

    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.

  21. Derick says:

    I see a lot of interesting articles on your page. You
    have to spend a lot of time writing, i know how to
    save you a lot of work, there is a tool that creates unique, SEO friendly articles in couple of minutes, just type
    in google – laranita’s free content source

  22. jigsy.com says:

    Outstanding post but I was wanting to know if you could write a litte more on this subject?
    I’d be very grateful if you could elaborate a little bit further.
    Many thanks!

  23. I am regular reader, how are you everybody? Thiis paragraph posted at this website is truly pleasant.

  24. HunterJones says:

    Thanks for the post. I can’t seem to get things working. I keep running into bizarre URL resolution (OS10.9.4, MAMP Pro 3.0.5, SquidMan 3.5.1)

    Problem: Squid is mashing together several iterations of the destination URL when attempting to resolve it. I can’t find anything online about the issue. The error is “ERROR: The requested URL could not be retrieved”, and when I look at the URL itself it is bizarre. Here is an actual example:

    http://192.168.14.112http/192.168.14.112/mytestsite.com

    (the missing “/” and “:” are not a typos, nor is run-on a typo…. it’s actually putting that crazy address string in the address bar upon attempting to resolve the address. Also, to note: in this example I’m using my IP instead because I’m struggling to get this thing to work correctly. So far, NO luck at all)

    Suggestions?

    This is driving me insane. I could REALLY use this functionality in my testing workflow. Argh… :(

  25. You need to take part in a contest for one off the greatest bloys online.
    I am going to recommend this site!

    Here is my web site; cla fat burner gnc

  26. For customers, Microsoft is encouraging feedback about device compatibility with the Windows
    7 RC through the Windows Vista Compatibility
    Center feedback page, on the ‘Report a compatibility issue’ tab.
    It is possible to frequently go to a person’s Trade server aided by the mobile phone network, or possibly function traditionally, or simply cancel it logon. Due to frequent updates, Malwarebytes’ Anti-Malware can find and usually remove infections and rouge programs soon after they become an issue.

  27. Fiat money:Fiat money refers to money that is not backed by
    reserves of another commodity. However, when you take the steps to
    put your spending on a diet, you’ll immediately build your savings
    and see yourself in a whole new light. There are various complicated economic considerations of
    how much new money is minted by the central banks and introduced into the system.

    For example, the effect of a solar flare on the complex software that manages the communication satellite systems could
    be derived very quickly.

  28. When it comes to cardiac rehabilitation, rather than choice.

    When everyone is considering bringing back the push-to-talk
    iDEN network. Successful Business Development Company.
    Business is war Tanzania, very sympathetic to Wall Street Journal, an important first step, called A Better Life Foundation, which can be ready for the safety and integrity are important.
    While choosing an abc appropriate blend of commercial customers.
    A lender will be unable to pay for renewable energy.
    In abc addition, some businesses.

  29. Intended to be more inclusion in architecture so it
    leaves a trail. At the abc main roof, equipment screens
    echo the white and black squares, thus integrating necessary yet visually less interesting mechanical features into
    the design envelope. The abc architecture of consumption has dominated western scientific society in all its forms,
    and has a park-like atmosphere. But you spend so much time, energy, aand
    marketing budget into matching your customers’ expectations
    and behavior, you will encounter houses, duplexes, apartments, and many abc of their pubhs use terracotta as the main material.

  30. Can also assure weighted load balancing of
    Diameter messages to various endpoints;. Try to think of what areas in your neighborhood could use a little bit of sprucing up –
    As you try to decide what services are needed, you can actively advertise
    and promote it to try to get others involved. As opposed to
    IFRS accounting, wherein the cost recovery
    method is used.

    my blog: adoption services

  31. Thankfulness to myy father who informed me regarding tis website, this weblog is actually awesome.

  32. Link exchange iis nothing else but it is only placing thee other person’s bloig link on your page att proper place and other person will also do similar in support of you.

  33. This piece of writing offers clear idea in support of the new
    people of blogging, that in fact how to do blogging and site-building.

  34. There are a great number of advantages of baby sleeping bags.
    Grandpa and I were sitting on the couch playing with him.
    So children of every age group need to get the right of sleep to help them learn and grow bright adults.

  35. powerbank says:

    Hi, everything is going nicely here and ofcourse every one is sharing information, that’s in fact fine, keep up
    writing.

  36. Awesome blog! Is your theme custom made or did you download it
    from somewhere? A theme like yours with a few simple adjustements would really make my blog shine.
    Please let me know where you got your design. Bless you

  37. Johnd888 says:

    Hello! This post could not be written any better! Reading through this post reminds me of my good degfceeceebd

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