Viewing a locally hosted website with your smartphone

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

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

July 22nd, 2011 / Tags: , , , , / Comments:

18 Responses to “Viewing a locally hosted website with your smartphone”

  1. Nigel says:

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

  2. dansearle says:

    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.

  3. Jal says:

    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?

  4. dansearle says:

    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 …

  5. Alexis says:

    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.

  6. Malik Zeshan says:

    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

  7. Dohmi says:

    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

  8. petrparkr says:

    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…

  9. Antonio says:

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

    Thanks and regards
    Antonio

  10. [...] most direct way to share your local site with your LAN is to simply work with IP Addresses. In many cases locally hosted sites have urls such as [...]

  11. Erin says:

    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.

  12. Daniel says:

    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

  13. Kike says:

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

    All the best!

  14. Junaid Ahmed says:

    wow ! worked for me (:

  15. Aljon Glenn says:

    I get an internal server error :(

  16. J.Irismar says:

    Perfect…Thanks

Leave a Reply

Current day month ye@r *