Apache Virtual Host for development on osX

Tired of using an IP address to reach your local Development Server?

Two Apache Indian teepees in a hilly landscape in Arizona
Library of Congress - Fred Harvey

Update

Since this is a rather old article I would recommend disable the pre-installed Apache on osX and use the httpds package from brew. I also would use brew to handle the PHP installation.

Edit: 07 February 2018

Firefox now also forces .DEV domains to HTTPS

Edit: 12 December 2017

Google Chrome is rolling out v.63 that now forces all .dev domains to use HTTPS.

https://ma.ttias.be/chrome-force-dev-domains-https-via-preloaded-hsts/

Intro

Info: A MacBookPro with osX 10.9 and the build-in Apache ver.2.2.29 Webserver was used for this guide.

To develop and test websites I run a local Apache Development Server. To reach the Webserver from any browser in the local network I always need to type in the IP address into browsers address field e.g. 192.168.0.74/~foo/bar/.
This guide should help to solve this Problem so that the Webserver can be reached with the TLD dev test e.g. like flyweb.dev flyweb.test.

Change Apache Webserver Configuration

Find the http.conf file on your system, the default location should be /private/etc/apache2/http.conf use the Finder (CMD + G) or the Terminal to browse to the file location. There is also a Terminal Command to reveal the location of the Apache Configuration file.

$ httpd -V

Activate mod_proxy Apache Modules

Open the http.conf file in a Text-Editor or with the Terminal.

$ sudo nano /private/etc/apache2/httpd.conf

Find the following lines and uncomment them.

# LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so
# LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so

Save and exit - hit CTRL + O to save the changes and exit the file with, CTRL + X.

Restart Apache Server

Type the restart command followed and your password if you get prompted.

$ sudo apachectl restart

Edit User Configuration File

Open your Apache User configuration file, if the file or folder doesn't exist - create it where USERNAME should be your osX Username.

$ sudo nano /private/etc/apache2/users/USERNAME.conf

I added the following lines to my USERNAME.conf file. The ServerAlias setting also removes the tilde-Username from the URL.

<VirtualHost *:80>

    DocumentRoot "/Users/USERNAME/Sites"
    ServerName SERVERNAME.test
    ServerAlias SERVERNAME.test/~USERNAME

    <Directory "/Users/USERNAME/Sites">
        Options All
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>

</VirtualHost>

DNS cache

To update osX with the new Network/Servername, the following Terminal command will clear the local DNS cache.

$ dscacheutil -flushcache

Prepare Clients with editing the hosts file

The next step is to edit the hosts file, so any connection to the development server is resolved with the new VirtualHost entry - flyweb.test.

For osX Systems

Open the hosts file with nano via Terminal or use a Text-Editor.

$ sudo nano /private/etc/hosts

Add the following code as the last line in the file:

127.0.0.1  SERVERNAME.test
// or
192.168.0.76  SERVERNAME.test

Update 3.Sept. 2020:
Instead of editing the hosts file install dnsmasq with brew and set the configuration to send all *.test lockups to the local IP.

$ sudo brew install dnsmasq

$ echo "address=/.test/127.0.0.1" \
    | sudo tee /usr/local/etc/dnsmasq.conf

$ sudo brew services restart dnsmasq

For Windows Systems

Go to the Task Menu and open Notepad.exe with "right-click" and choose "open as Administrator". Open the hosts file e.g. with Notepad and make the following changes.

C:\Windows\System32\drivers\etc\hosts

Add the following code as the last line in the file, where 192.168.X.XX should be the IP address of the Development Server.

192.168.X.XX  SERVERNAME.localhost

Prepare Clients without editing the hosts file

Some devices in the local network like an iPad would need to be jailbreaked, to make any changes to the hosts file. For this scenario a change in the settings from the local Router will help to resolve the Development Server IP address with the new VirtualHosts name.

Router Settings

This may work with any Router. I use a WRT54 with the DD-WRT Firmware. In the Control Panel, go to "Services" and edit the DNSMasq setting - Additional DNSMasq Options:

address=/SERVERNAME.localhost/192.168.X.XX

Be sure that DNSMasq and Local DNS is set to enabled.

Bonus Tips

Re-write Logs

The Apache USERNAME.conf file can also be used to activate the Apache re-write Logs. These are very helpful to debug any URL rewrites.

Add the following line to activate the logging. The path to the rewrite.log file can be anywhere on the system. The RewriteLogLevel determines how detailed the debug information will be.

RewriteLog "/Users/USERNAME/Sites/rewrite.log RewriteLogLevel 2

Helper Script: virtualhost.sh

A nice tool which helps to automatically setup a VirtualHost on osX by Patrick Gibson - https://github.com/virtualhost/virtualhost.sh.

References & Documentation