Streamline Adding New Virtual Hosts to XAMPP With dnsmasq

I typically use MAMP Pro for local development, finding it to be a happy medium between the commitment and overhead of VVV and running my own LAMP stack.

However, a friend recently pointed me to the comparative leanness of XAMPP, and the ability to use a wild card Virtual Host to simplify adding new sites.

Compare these workflows:

MAMP Pro

1. Click + to add new site.
2. Type in whatever.dev.
3. Create corresponding directory: htpdocs_whatever.
4. Click ok.
5. Restart Apache.

XAMPP w/ wildcard Virtual Host

1. Open sites folder in Finder.
2. Create a folder called “whatever”.

Done.

Both give you a new localhost called http://whatever.dev, which is now ripe for local development magic.

So, how is this done?

The good news is, it’s pretty easy.

1) Install XAMPP

The first thing you need to do is install XAMPP.  If you have MAMP or the like installed, be sure to shut off services when you have XAMPP running lest you run into conflicts.

That shouldn’t take more than a few minutes.

Done? Great!

Now let’s configure XAMPP’s virtual hosts.

2) Configure XAMPP

First, open up /Applications/XAMPP/xamppfiles/etc/httpd.conf in your favorite text editor.  Locate this line:

Include etc/extra/httpd-vhosts.conf

And uncomment it by removing the # at the beginning of the line, if it exists.

Now, open up /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf

Add this bit of magic at the end of the file:

Note: You’ll need to make sure a sites folder exists in /Applications/XAMPP/xamppfiles/htdocs/.  It won’t by default.

Now you’re ready to setup dnsmasq.

3) Setup dnsmasq

dnsmasq is required because Mac OS X doesn’t allow wildcards in /etc/hosts.

This is lame, but it is what it is.

Because of this, we’ll need to setup a local DNS server to handle requests to *.dev.  Fortunately, someone has written an awesome, very easy to follow guide on setting dnsmasq up, using the exact configuration we need.  So at this point, pop open this guide and run with it:

Using Dnsmasq for local development on OS X

I recommend using the resolver technique of routing requests to *.dev.

Note: If you haven’t used homebrew before, you’ll need to install that first.  It’s also really easy to setup.  Go here for more information: http://brew.sh/

Summary

Once you’re done setting up XAMPP and dnsmasq, go ahead and create a new directory in your sites directory, add a file, and then restart XAMPP.

Then try to access that file by entering the following in your address bar:

http://<directory name>.dev/<filename>

It should work if you’ve followed all of the above instructions.

Enjoy the magic.