Setting Up VVV for WordPress Development

Setting Up VVV for WordPress Development

Go to source

We’ve been publishing more articles and tutorials about setting up local development environments lately, and rightly so. Using tools like MAMP or – my personal favorite – Vagrant, allows you to create a setup on your computer that is leagues above anything you could do online.

Varying Vagrant Vagrants – or VVV – is an open source Vagrant configuration centered around WordPress development. It has everything you need to create multiple WordPress sites and useful tools for debugging, plugin creation and more.

In this article, we’ll take a look at how you can get up and running and start using the advanced features.

Varying Vagrant Vagrants is an open source Vagrant configuration focused on WordPress development.
Varying Vagrant Vagrants is an open source Vagrant configuration focused on WordPress development.

Setting Up VVV

VVV uses the same mechanisms as any other Vagrant setup so if you’ve used Vagrant before it should all be familiar. If not, read on.

Step 1: The Basics

First, you’ll need to install VirtualBox and Vagrant itself. Each setup is completely automated and will take a minute or so.

Step 2: Optional Extras

The next part is optional and it provides some conveniences to decrease your workload when creating sites. The vagrant-hostupdater plugin and the vagrant-triggers plugin can be installed using the following two commands:

The host-updater can automatically update your host file. This is something you’ll need to do for each site you create. It’s not a huge chore but if you add and remove sites regularly it can make your life easier.

The vagrant-triggers plugin is another convenience that can run various scripts when commands such as vagrant halt or vagrant up are issued. If this script is installed a database backup will be created on halt, suspend and destroy commands but you can expand on this with your own scripts.

Step 3: Grab VV

Firstly, you’ll need to designate a directory for installing VVV. This is the directory where VVV will be run from and also within, which your public folder will reside, the one that contains all your websites created with VVV.

For this example I’ll be using the ~/websites/sites directory on my computer but feel free to substitute with your own.

I’ve not created the sites subdirectory yet but I’ll let Git do that for me – my preferred install method. If you have Git installed you can grab all the required files with the following command:

If you don’t have Git don’t worry, you can download a development zip file or a stable release and extract it.

At the end of the day, whichever method you choose, you should end up with a directory that contains VVV files. It looks something like this:

The files needed for VVV
The files needed for VVV

Step 4: Start Your Virtual Machine

Open up your terminal and navigate to the folder that contains your VVV files. Issues a simple vagrant up command and everything will be set up for you. This will take a long while, 20 minutes or so on the first go so grab some coconut juice while you wait – it’s awesome.

Near the end of the script you may need to enter your admin password so the vagrant-hostupdater plugin can update your hosts file. All done!

Step 5: Modifying the Hosts File

If you chose not to install the host updater plugin you’ll need to do it yourself. In Windows your hosts file is located at C:\Windows\System32\drivers\etc\hosts, on OSX it should be in /etc/hosts. Open this file and add the following line below anything else you may see in there:

First Steps With VVV

Since VVV already has a bunch of stuff set up, I recommend taking a look at these before we start creating sites. Your first point of entry should be http://vvv.dev. This is a simple HTML list of pages and tools VVV has to offer.

Let’s look at each one.

Home and Repository are pretty self explanatory, the later points to the VVV Github repository we installed VVV from.

phpMyAdmin allows you to view and manipulate databases. If you haven’t used it before I recommend getting some experience with it, debugging issues can sometimes be a lot easier with direct database access.

phpMemcachedAdmin is a graphical interface for memcached where you can see a bunch of stats and even issue commands related to memcached. Read more about this on the phpMemcachedAdmin website.

Opcache Status is another GUI that displays OpCache information like memory use, keys, hits and misses and so on.

OpCache User Interface
OpCache User Interface

MailCatcher is an application that shows you emails sent by the system. This is immensely useful. I’ve always used the WP SMTP Mail plugin to route emails through SMPT but MailCatcher is just so much simpler and lower level, making it a more dependable.

Mailcatcher Interface
Mailcatcher Interface

Webgrind is a great tool for debugging and optimization. It will show you what is loaded and how fast things are happening. Some additional setup is required. Take a look at the Code Debugging section on VVV for more information.

PHP Info is a link to a simple page that shows the output of the phpinfo() function. You’ll see which ini files are running, what modules are set and bunch of other helpful data. PHP Status shows basic PHP statistics like active processes, accepted connections and a table of process IDs with their stats.

Finally, four separate WordPress installations can be found: http://local.wordpress.dev/ points to a site with the latest stable WordPress version; http://local.wordpress-trunk.dev/ points to a site which is running the WordPress trunk; http://src.wordpress-develop.dev/ is running trunk with development files; and http://build.wordpress-develop.dev/ is running the same development files built with Grunt.

These installations are mainly for WordPress code development, feel free to forget about them if you don’t need them.

Credentials

For all pre-installed sites the database username and password is always wp and wp, all admin usernames and passwords are admin and password. You can find this information along with some paths and database names in the Credentials section for VVV.

Adding Sites

Creating new sites is a bit of a chore. The actual work needed is only a minute or so but you need to provision again which takes a while (a good time for coconut water again). I’ll go through it manually and then point you to Variable VVV, which automates it.

All your sites can be found in the www directory. On your local file system this will be right within your VVV folder, for me this is ~/websites/sites/www. If you SSH into your machine you should find it under /vagrant/www.

Start by creating a sub-directory within the www folder, let’s use portfolio as an example. Once created, create a file named nginx.conf within the folder with the following content:

The only thing you’ll need to change from site-to-site in a basic setup is the server_name. The root is set to be the htdocs folder within the site directory. The root folder for our portfolio would be www/portfolio/htdocs.

For a commented version of this file take a look at the Nginx config section on the VVV website.

Next, go back to the www folder and open the vvv-hosts file. Add your new site (use the same string you used in the nginx config for server_name) on a new line and save the file.

Finally, use the vagrant halt command to stop your VM and then issues vagrant up --provision. This will set up your VM with the new site. Don’t forget to add your domains to your computer’s hosts file if you don’t have the vagrant-hostupdater plugin installed!

Automatic Site Creation

As I mentioned, you can automate this process with Variable VVV. Read together that would be Variable Varying Vagrant Vagrants – good, straightforward naming there.

You can find Installation Instructions on the website, I like to use the simple Linux installation. Use the following list of commands on your computer in any folder:

Windows users should follow the instructions in the link above, there are a few extra steps you’ll need to take.

Once you have things set up you should be able to create sites as easily as vv create. I recommend running vv from a directory where you know VVV has been installed. On your first go it will ask to make sure VVV is installed, just press enter, all should be well. Here’s the site I created for our portfolio automatically:

Creating a site with vv
Creating a site with vv

Note that if you are OK with all the defaults all you need to do is enter your site directory name and keep pressing enter. This will set up a website in the portfolio directory which you can reach via portfolio.dev.

Again, don’t forget to add the site name to your computer’s hosts file if you’re not using the vagrant-hostupdater plugin installed!

Enjoy Local Development Goodness

That’s all for today about VVV. I’ve found that it is the best environment for WordPress I’ve seen so far. It runs PHP 7 out of the box, has the mailcatcher tool, advanced debugging options, plugins that automate everything, it has caches enabled and monitored by default, and oh-so-much more.

Do you have a favorite setup with VVV? Share your thoughts and experiences in the comments below.

Related posts:

  1. Using Gulp to Speed Up WordPress Development Build tools let developers focus on efficient development rather than…
  2. How to Create a WordPress Development Environment in Seconds with DesktopServer DesktopServer offers one of the quickest and easiest ways to…
  3. Using Vagrant to Set up a WordPress Test Environment Setting up a local environment for WordPress is a common…