When developing locally, you’ll want access to your site(s) from multiple computers/devices connected to your network. It makes browser testing simple and convenient. Setting up WAMP for local area network access involves just a few configuration tweaks around IP Addresses and Apache. While tools like BrowserStack are great, nothing is better than testing on the real thing. So, let’s set it up.

While the instructions below are based on a WAMP Server, the steps generally apply to most Apache environments.

Configure Static IPs on LAN Computers

How you configure static IPs varies widely depending on your network setup. As a best practice, you’ll want to setup the static IP configuration on whatever device manages DHCP for the network — a router or server. Most routers allow you to bind static IP’s to MAC addresses. This is the approach I take. If you have a server managing DHCP, things can be more complicated.

Configuring static IPs for your network’s computers/devices at the DHCP management layer is best. However, you can configure them at the local level — provided you have proper access to each computer’s network configuration. Be aware that configuring static IPs on local machines make them prone to IP address conflicts in the future. Since the local machine is not the authority for allocating IPs on the network, its static IP address may be issued to another machine.

Regardless of the method used to setup static IPs, make sure to document each computer’s IP address. You will need them in a future step. Below are instructions for configuring a static IP on a Windows 7 machine.

  1. Right click the network icon in the system tray and choose Open Network and Sharing Center.
  2. Double click the network connection that you are using to connect to your local network.
  3. Click the Properties button on the popup.
  4. Select the TCP/IPv4 connection and click the Properties button.
  5. Open a new command prompt by clicking the start orb and typing cmd then hitting enter.
  6. In the new command prompt window type the command ipconfig and hit enter.
  7. Copy over the following values to the TCP/IPv4 configuration popup:
    • IPv4 Address
    • Subnet Mask
    • Default Gatway

    Assuming that you previously obtained an IP address automatically via DHCP, copying the values assigned to your machine is the best way to avoid problems initially. Essentially, you are telling your computer that whatever credentials your DCHP manager has assigned to your machine should remain.

    Regarding your Preferred and Alternate DNS server, I use the name servers provided by OpenDNS. You can use whatever valid name servers you want.

  8. Once you have supplied credentials to your network configuration, you can click the OK button and close all windows.

Configure Apache to Allow Connections

If you do not have virtual hosts setup, I recommend that you create a virtual host (vhost) in WAMP for each site you work on. Doing this allows you to easily configure access to sites on a vhost basis, as opposed to globally defining access for all sites. As you will see in the next step, virtual hosts also make the hosts file on remote machines cleaner, clearer and simpler.

  1. Open your Apache vhost configuration file located in C:\wamp\bin\Apache#.#.#\conf\extra\httpd-vhosts.conf, where #.#.# corresponds to the version of Apache that you are running in WAMP.
  2. Edit the Directory configuration of the vhost to allow access from the desired IP address(es).

    # johndugan.local
    <VirtualHost *:80>
        ServerAdmin john@johndugan.local
        DocumentRoot "c:/wamp/www/johndugan"
        ServerName johndugan.local
        ServerAlias www.johndugan.local
        ErrorLog "logs/johndugan.local-error.log"
        CustomLog "logs/johndugan.local-access.log" common
        <Directory "/">
            Deny from all
            Allow from 127.0.0.1
            Allow from 192.168.1.111 #iPhone
            Allow from 192.168.1.107 #iPad
            Allow from 192.168.1.110 #Apple TV
            # Allow Web Fonts to load over BrowserSync proxy
            <IfModule mod_headers.c>
               SetEnvIfNoCase Origin "https?://(www\.)?(johndugan\.local|192.168.1.102)(:\d+)?$" AccessControlAllowOrigin=$0
               Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
            </IfModule>
        </Directory>
    </VirtualHost>

    <Directory> and </Directory> are used to enclose a group of directives that will apply only to the named directory, sub-directories of that directory, and the files within the respective directories. Any directive that is allowed in a directory context may be used. More information

  3. Save the updated vhost configuration and restart Apache (restart WAMP).

Update The Hosts File on LAN Computers

The hosts file is the first reference in the DNS lookup process. Before your computer goes out the the Web to fetch DNS information, it will look at the hosts file. That is why you must add entries in the hosts file on each computer that you want to point to your local WAMP site(s).

To add entries to your hosts file follow the instructions below.

  1. Open the hosts configuration file located at C:\Windows\System32\drivers\etc\hosts in notepad.
  2. On a new line, add the IP address of the host machine (the machine running WAMP), followed by the ServerName for the vhost (ie: johndugan.local).
  3. Save and close the hosts file… and you’re all set!
Posted by: John Dugan

Comments