Getting Started with Vagrant for WordPress Development

February 18, 2013

Getting started with Vagrant for WordPress Development

In the dark days of the past, we used a few different solutions for hosting our development environments. Ron preferred MAMP, while I used Parallels virtual machines. It made writing build scripts and standardizing our workflows a nightmare. Then, a few projects ago, I discovered the magic that is Vagrant.

Vagrant is a wrapper around VirtualBox that allows developers to create and share virtual machines with each other. Why is this a good thing? We can create a standard development environment with all the tools and resources we need, and it’s completely self contained. We can then share that standard environment with each other so that everybody’s on the same page.

Ron and I have been using Vagrant for the last several projects we’ve built, and we love it! Here’s how we got started:

Creating a Base Box

First, we read the excellent Getting Started guide. It covers installation and initial setup. Next we created a simple virtual machine and started installing the software we needed to run a WordPress site (in our case that’s MySQL, PHP-FPM, and Nginx). Because we use Thor, Compass, and CoffeeScript, we also needed to install Node.js and RVM with Ruby 1.9.3 on the VM. Note that this step required some basic command line jujitsu.

One quick gotcha with Nginx is that we had to disable Sendfile support because it’s not compatible with Vagrant’s shared folder system.

Setting Up WordPress

Next, we had to figure out how to automate the installation of WordPress itself onto the VM. Luckily, Vagrant has built-in support for Puppet. Puppet is a configuration management tool that lets you specify the state you want your system to be in and the steps required to get there. Here’s the manifest I wrote to install WordPress and some other necessary software, as well as setup a MySQL database for WP to use. Once you’ve got a manifest created, all you need to do is uncomment the Puppet lines in your project’s Vagrantfile and run vagrant up or vagrant reload.

After we got the VM set up the way we wanted it, we needed to share our WP theme folder to the correct path on the virtual machine. Again, Vagrant makes this dead simple with its VirtualBox shared folders support. We added the following line to our project’s Vagrantfile:

config.vm.share_folder 'v-theme', '/home/vagrant/www/wp-content/themes/theme-name', './theme'

Replication

Once you create a base box, you can reuse it for all your projects really easily. After setting everything up, I ran vagrant package to create a reusable VM template that Vagrant calls a “box”.

I uploaded it to Dropbox, got the public link, and put it in the Vagrantfile so that Vagrant will automatically download the box if it doesn’t exist on the user’s system:

config.vm.box_url = "https://dl.dropbox.com/s/m22yeq59v2cn4h7/Squeeze64_PHP_RVM_Node.box?token_hash=AAHk1P67Cty2bCBCVrvTA9eyrtF7CtJ4LCxMqOL-B1Ka4Q&dl=1"

Fork Us

If you want to get started with Vagrant, we’ve released our boilerplate project code on GitHub. You can check it out at https://github.com/fifthroom/vagrant-wp-theme. Instructions are in the README.

Mike is the Senior Web Developer (AKA Code Ninja) at Fifth Room Creative. He's been known to blog about web development related topics as well as general nerdery things here on the Fifth Room blog. You can follow him on twitter at http://twitter.com/mikedamage if you like what he has to say.

My Topics: CSS3, JavaScript, RWD, Development, PHP, Pods, WordPress, Linux, Vagrant, Geek