WordPress Development Up and Running with Vagrant

There are a ton of great posts about Vagrant, this is meant to be a very quick tutorial on how I get up and running with it for WordPress development. Written from the viewpoint of a Mac, currently running Yosemite.

Background

So, what is Vagrant?

In a nutshell, Vagrant is a self contained development environment that you can run on your local machine. It works in conjunction with a backend provider, commonly VirtualBox, which is what this will focus on.

One of the goals of using Vagrant is being able to duplicate your production environment, which is where it differs from something like MAMP. However, I am fairly new to using it and have not had to deal with any issues requiring super custom setup. I love Vagrant for the automatic WordPress setup, the fact that you can ssh into the VirtualBox and run commands using wp-cli. Locally, that is just rad, and super helpful for my favorite use case, which is duplicating a production site setup locally for testing and dev work.

You are going to need to install a few things to get started, I am going to assume you have not installed anything yet and walk through the way that I do it.

Note that in the code samples below, a $ represents your shell prompt, and an _ represents a space. You do not type those. ๐Ÿ™‚

Installation

Homebrew FTW. If you do not have it installed, you can run this in your terminal.

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Once Homebrew is rocking, we can install some casks. Cask installs are basically a super sweet way to install apps.

“To install, drag this iconโ€ฆ” no more!

First we will install it, then install our first cask, Vagrant.

$ brew install caskroom/cask/brew-cask
$ brew cask install vagrant

Next we install a helpful plugin for Vagrant that allows host files to be automatically updated during provisioning,

$ vagrant plugin install vagrant-hostsupdater

Next we get VirtualBox installed, currently Vagrant does not support the latest version so we will install the previous release, to do that we have to specify a version;

$ brew tap caskroom/versions
$ brew cask install virtualbox4330101610

This “taps” into the versions repository and specifies which one we want to install, instead of “latest” by default.

Boom, you now have Vagrant ready to, you know, do stuff. Let’s make it awesome for WordPress dev now. Varying Vagrant Vagrants is tool that is aimed at WP devs and gives you a ton of useful tools, including wp-cli, git, and several versions of WordPress to work with.

I usually create a directory in my user root for Vagrant stuff, so while still in terminal be sure you are at home.

$ cd ~
$ mkdir vagrant
$ cd vagrant

Now in there I setup my VVV stuff, so we clone the repo, notice the _. at the end, the space and then the period tell git to put the files in the directory and not make a new one.

$ git clone https://github.com/Varying-Vagrant-Vagrants/VVV.git .

The First Up

There is another bit of awesome we are going to install, but before I do that I like to make sure the Vagrant is good to go so far before adding more to the mix. So we are going to run the main command now, and be warned, you may want to step away for coffee or a beer, in can take several minutes…

$ vagrant up

After all that fun runs through your terminal, you will be able to visit vvv.dev and have a little dashboard of links to the various installs of WP. At this point you can feel free to hop into the standard installs and work on themes, plugins, whatever you wish. In my case, I like to duplicate the site I am working on locally, so the easiest way for me to do that is with a little tool called Variable VVV.

Variable VVV is a Vagrant creation wizard and it pretty much rocks. We are going to use our new friend Homebrew to install it,

$ brew install bradp/vv/vv

Nice. Now say we have a production site we want to duplicate locally, Variable VVV steps you through it, run;

$ vv create

You will get some prompts to answer, and magic will happen.

This step will take several minutes as well as Vagrant must be provisioned, meaning all the dependencies setup and WordPress installed. When ready, your new site will be available at the name you chose during setup, such as example.dev.

Mimicking Production

Great, now we have a new Vagrant with a matching name, but it looks nothing like our live site! Well, we need the content and infos from the production site. Meaning the wp-content directory and a database dump. For me the command line is the easiest way to get this. You may choose something like PHPMyAdmin and FTP, but I will show you through the terminal and using wp-cli.

We need to ssh into our production server and then grab a database dump,

$ ssh [email protected]

Navigate to the site directory and get the db, note the following command works only if you have wp-cli installed on the server. This command adds the drop-table allowing our local to get overridden, the _~/ means to put the file in my root, with the name database-name.sql.

$ wp db export --add-drop-table ~/database-name.sql

All done, back to your local machine we need to get that file into our Vagrant root so we can work with it.

$ scp [email protected]:database-name.sql ~/vagrant/www

Assuming you made and named a vagrant directory like I did, this will download the SQL file into where we need it.

Now navigate to there, and ssh into the VirtualBox. Neato.

$ cd ~/vagrant/www
$ vagrant ssh

What? You are now in the local server, sweet. Now you need to get to the install you just made with Variable VVV. So, assuming in vv create you named the install “example”,

$ cd /srv/www/example

Followed by:

$ wp db import /srv/www/database-name.sql

One last thing while we are here, updating the content URLs from the production to this new local,

$ wp search-replace example.com example.dev

That is all here. Feel free to logout and close the ssh tunnel.

Next we are going to get the assets from the live site; themes, plugins, etc. Again, you can get this however you wish, such as FTP, I am using rsync here because it is very fast. I have not figured out how to have it kindly replace the wp-content folder, so right now I just copy it down to my desktop and then move over the themes and plugins manually.

$ rsync -az [email protected]:sites/example.com/wp-content ~/Desktop

So move over the themes/plugins directory and then visit your site, example.dev, to admire your handiwork of duplicating your production site locally in Vagrant! Well done.

Vagrant Commands

You now have a compartmentalized server running locally, some commands of note for managing Vagrant are,

  • vagrant halt : This shuts down the machine, freeing up computer resources when you are not working on it.
  • vagrant destroy : This removes everything, use this if you are done with a project or no longer need that environment. It does what it says, so be careful ๐Ÿ˜‰

If you halt the machine, to get back up and going simply run vagrant up again, this time it will be much faster as all the resources are already there.

Tips

Ryan Oson

I am a front-end developer with a love for WordPress. I am a total coffee fiend and may be addicted to Destiny 2 on PS4.

Leave a Reply

Your email address will not be published. Required fields are marked *