I've been doing a ton of web development lately and, since switching to Mac back in November 2009, it means all my local development is now done using the OS X implementation of Apache Webserver. Because there are a couple of different sites on the go right now I figured that simulating the production environment as much as possible would be a good idea. To me that means using actual hostnames e.g. http://digitalformula4.local/ rather than http://localhost/digitalformula4/ or, another alternative on OS X, http://localhost/~user/digitalformula4 (yuck).

The Process

Luckily, because OS X has access to pretty much all the Apache Webserver configuration options that are available on the full production install of Apache, setting this up is easy. For this example I’m going to assume you’ve got at least OS X 10.6 as that's what I'm using and I haven’t tried it on anything older. At a guess, though, I can’t see why this won’t work on some older versions of OS X. Here are the steps I followed.

  • Open System Preferences, go to Sharing and make sure Web Sharing is enabled. Without this option checked Apache won't work. If you want FTP access you can also enable that by clicking Options under 'File Sharing'. This isn't part of this article, though.
  • Navigate to /Library/WebServer/Documents/ and make a folder that means something. For now I'll stick to the example above – 'digitalformula4.local’'. You can either do this using Finder or by using the Terminal if you're comfortable doing it that way like me. The Terminal somehow makes you feel a bit more geeky, too. 😉
  • Edit /private//etc/apache2/extra/httpd-vhosts.conf. You'll need to do this as a user with appropriate permissions although using 'sudo' will also work. E.g. sudo nano /private/etc/apache2/extra/httpd-vhosts.conf from the Terminal should prompt you for your password and then allow you to edit the file. Here's a screenshot of what my digitalformul4.local section looks like in my httpd-vhosts.conf file. Don't forget to change the email address section to your email address!

    httpd-vhosts.conf

  • You then need to edit /private/etc/apache2/httpd.conf and uncomment (remove the leading #) from the line that reads Include /private/etc/apache2/extra/httpd-vhosts.conf. Why? If you don’t, the changes you just finished making to httpd-vhosts.conf won’t mean anything.
  • Once you've modified and saved those files you'll need to restart Apache. The command for this, also requiring relevant privileges, is sudo apachectl restart.
  • Edit /etc/hosts on the server and add the following line: 127.0.0.1 digitalformula4.local. Make sure you change digitalformula4.local to the name of YOUR host.
  • On the machines you'll be browsing FROM you'll need to tell them how to find the new server. In my case I'm using a static IP address scheme – my server is configured on 192.168.0.3. On OS X this means editing /etc/hosts and adding the following line: 192.168.0.3 digitalformula4.local.
  • On OS X you may need to clear your DNS cache before you can find the new hostname. Again from the Terminal, this command should work: sudo dscacheutil -flushcache.

Using those steps you should be able to then save files into /Library/WebServer/Documents/digitalformula4 (replaced with YOUR host name, of course) and have them show up in the browser. This is good for when you want to use 'real' paths e.g. /images/ instead of worrying about virtual paths when doing your development.

Hope that helps someone!