Viewing a locally hosted website with your smartphone

July 22nd, 2011

This is a new category on the LogicSpot blog: Web Development. In these posts we’ll talk about anything we’ve done or discovered that has – or could – help us build great sites.

We got this working a couple of weeks ago, and it just begged to be blogged. If you’re going to make a web interface to run on the iPhone, you really need to be able to view it, during development, on your phone. This post will tell you how to set up your WAMP installation so that you can do just that. I’m using an iPhone but this will work for any smartphone.

I have a number of websites in development set up on my Windows 7 PC, running in WAMP. To allow me to access them as if they were running in their own domains I’ve set up some rules in my hosts file, like this:

127.0.0.1 devsite1
127.0.0.1 devsite2

so I can go to http://devsite1/ or http://devsite2/ – this helps keep the dev environment as similar as possible to the live one.

But that doesn’t allow me to view them on my iPhone; it doesn’t know about that hosts file. What we need to do is to open up port 80 on the PC and configure Apache to handle the requests sent across the LAN from the phone. Each dev site will get its own IP address, allowing us to keep hosting multiple dev sites. These are the steps I took to set it up:

How to open up Port 80 on Windows 7

  • Go to Control Panel -> System and Security -> Windows Firewall
  • Open up Advanced Configuration and open Inbound Rules, create a New Rule.
  • Choose Port, click Next, choose TCP and enter 80 as the port, click Next.
  • Choose “Allow the connection” and click Next.
  • Check the Private box only, clear the Domain and Public ones. Click Next.
  • Give it a name and a description, here I added a note that I’d made this rule to help remind me what it was for in the future.
  • Ok all of that and exit the window.

What’s my LAN IP address?

Now you need to know what the IP is of your hosting computer, and it needs to be static. This depends on your router I understand, so check in your router admin if you need to.

To find out what your IP address is, open Command Line, type

ipconfig /all

scroll back up through the output and find the line showing Address IPv4 – this should state your LAN IP address, e.g. 192.168.2.100 – make a note of it, close the Command window.

Assign Multiple IP addresses to your host PC

You need to do this to be able to run more than one website from the root, each site will have its own IP address on the LAN.

Open Network and Sharing Centre, you’ll see a link to Local Area Connection next to your active network, click that link, and click on Properties in the popup.

Click the item “Internet Protocol Version 4 (TCP/IPv4)”, and then Properties.

Now choose the option “Use the following IP address:” and enter your IP, e.g. 192.168.2.100. Leave the default subnet mask, and then enter the IP of your router on the LAN, mine was 192.168.2.1. Also add that IP for the Preferred DNS Server in the table below.

Click on “Advanced…”. Now you enter your IP address again in this table, and also add the other IP addresses you want to use to host your sites. They must be vacant IPs on your LAN. I just needed one more IP, and there are only 2 PCs and one iPhone using my network so I just added 10 to the IP, 192.168.2.100 and 192.168.2.110. Make a note of the IPs you set up.

Click OK and save all the way out of those popups.

Configure Apache

Now Apache needs to know what to do with these IP addresses, so find the httpd.conf file first, mine was here:

C:\\wamp\\bin\\apache\\Apache2.2.11\\conf\\httpd.conf

Find the line:

Listen 80

and change it to add your IP addresses with the port:

Listen 192.168.2.100:80
Listen 192.168.2.110:80

Further down in this file you need to configure the access to the directories that host your sites, like this:

<Directory "c:/wamp/www/test_website_aaaaaa/">
  allow from all
</Directory>

<Directory "c:/wamp/www/test_website_bbbbbb/">
  allow from all
</Directory>

Save and close the file. Now find the httpd-vhosts.conf file, mine was here:

C:\\wamp\\bin\\apache\\Apache2.2.11\\conf\\extra\\httpd-vhosts.conf

Here you need to add VirtualHost directives to point the IP address at your folders, like this:

    <VirtualHost 192.168.2.110:80>
        DocumentRoot "C:/wamp/www/test_website_aaaaaa"
    </VirtualHost>

    <VirtualHost 192.168.2.110:80>
        DocumentRoot "C:/wamp/www/test_website_bbbbbb"
    </VirtualHost>

Save and close the file, and restart the Apache service.

Done!

You should now be able to access those sites on your iPhone via the IPs, e.g.

http://192.168.2.110
Dan

About

Dan's been coding for the web since 2000, both front and backend, his favourite tools being PHP with CodeIgniter, jQuery and MySQL. There was a time when Flash and AS3 were in that list too, but...
  • Nigel

    Great guide, exactly what I needed. Although you’ve got the wrong slashes in some of the example file paths…

  • http://www.logicspot.com/ dansearle

    one thing I’ve learned about these config files is that you must only include IP addresses that actually work, otherwise you’ll find that Apache won’t start. This caught me when I took my laptop on a trip away from my home router and tried to run localhost as usual – the declarations for 192.168… threw out apache because they were only available with my home router.

    I’m away from home again now (Christmas time!) and am again faced with trying to work without a landline or router – but I’ve now successfully got my Win 7 laptop running using my iphone for an internet connection, and also using VirtualRouter so that I can also view locally hosted pages on the same iphone:
    http://virtualrouter.codeplex.com/
    It’s free too, but I’ll gladly make a little donation for something so useful.

  • Jal

    Thanks for the guide and I am hopeful that this guide will work for me. But I am having some trouble. I have followed all the steps mentioned here but when I access my PC (which is 10.0.0.2) from iPhone using Safari, I get a ‘403 forbidden’ error. On Opera Mini, it says, it is unavailable. What could be the problem?

  • http://www.logicspot.com/ dansearle

    Hi Jal, I think 10.0.0.2 is the IP of your router, not of your PC. Run ipconfig /all again and check for an IP starting 192.168 …

  • Alexis

    Hi, guys. Nice tutorial, but when I finish I have a HUGE problem. When I restart my WAMP Server it no come with the green light it have a Orange light, so.. My server no start the services.

    I hope that can stand me.

    • http://www.logicspot.com/about-us/team/dan/ Dan

      @Alexis I suggest you run “httpd -t” from the command line to check your config files and debug from there.

  • Malik Zeshan

    Great
    it did not do as end result written above but it may be happen by DHCP , BUT IT SOLVES MY ISSUE, I AM ABLE TO GET IDEA WAMP ON LAN
    THANKS DAN

    • http://www.logicspot.com/about-us/team/dan/ Dan

      @Malik Zeshan :thumbsoup:

  • Dohmi

    If people have problems getting this to work, it is probably because the # is still in the httpd file before the line: Include conf/extra/httpd-vhosts.conf. Remove the # so the httpd-vhosts.conf becomes active.

    For any other issues check:
    http://foundationphp.com/tutorials/apache22_vhosts.php

  • petrparkr

    How can I get my iPod touch to access websites on my localhost. I use a macbook and I have tried Xamppp, Mamp to no avail. Please help. Thanks in advance…

  • Antonio

    Hi
    Thanks for posting it.
    Will the same approach work for windows applications which database (mysql) resides on Wampp Server?

    Thanks and regards
    Antonio

  • Pingback: Different Ways To Share Your Wamp/Lamp/Xamp/Mamp WordPress Sites | Peter R Knight

  • Erin

    Thanks for this! I finally got it running smoothly. For anyone with that dreaded 403, changing “Require local” to “Require all granted” in httpd.conf.

    • http://www.logicspot.com/about-us/team/dan/ Dan

      Thanks for posting the tip!

  • Daniel

    Hey thanks for the tutorial. I’m wondering, is there a way you can turn that LAN address into a nice easy to use domain name/hostname to make it easier to connect to?

    Once again thanks for your feedback

    • http://www.logicspot.com/about-us/team/dan/ Dan

      You might be able to configure your router to do that, but I can’t help you there I’m afraid.

  • Kike

    Thanks for the article, it’s just what i was looking for!!

    All the best!

    • http://www.logicspot.com/about-us/team/dan/ Dan

      Very glad it was helpful!

  • http://www.displacednames.com/ Junaid Ahmed

    wow ! worked for me (:

  • Aljon Glenn

    I get an internal server error :(

    • http://www.logicspot.com/about-us/team/dan/ Dan

      This is usually down to a misconfigured apache. Try running httpd -t to test it.

  • J.Irismar

    Perfect…Thanks

  • Rajneesh

    Thanks for blogging ….
    I have just a question
    Can i access my site on mobile device though site name (abc.com) instead of ip (192.168.1.xxx)

    • http://www.logicspot.com/about-us/team/dan/ Dan

      You might be able to do that in your router settings, but I’m afraid I can’t help you with that.

  • Manish Gupta

    Hi Dan, is there anyway the same solution can be worked for IIS. I have a ASP.NET website “abc.mycompany.com” under localhost at port 80. It works perfectly on local PC but when I am trying to access the site using the Android Tablet, I am getting “Not Found”.

    Appreciate for your expertise.

  • yurij

    hey thanks for this tutorial…i do this to my wi-fi connection (my only active connection)…it works for local sites, but as a result i can’t access the external/public internet. should i be able to? is there a way to have both?

  • Joel

    I would try editing your hosts file on your phone itself, then all you should have to do is add a record like so: abc.com 192.168.1.xxx