Viewing a locally hosted website with your smartphone

By 22nd July 2011 January 28th, 2019 Development, Technology & Business Intelligence
Viewing website with your smartphone

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