When WordPress Meets Vagrant: VVV

Aleksander Koko
Tweet

Vagrant has changed the way I work. In this article I discuss how Vagrant, a tool for creating and managing virtual environments, helps me work more efficiently. I will then introduce Varying Vagrant Vagrants (VVV), an evolving Vagrant configuration purpose-built for WordPress developers.

Are You Still Using WAMP/MAMP?

If you’re reading this, there is a high chance that you have used local development in the past. We all have gone through this. WAMP/WampServer, LAMP or MAMP, we’ve all had nightmares developing with them. Most of the time I was developing using WAMP (Windows), then I changed my development environment to Linux. It was the best thing I have ever done.

If you’ve ever worked in a team, you have probably come across the scenario where someone says “It works on my machine”. Or perhaps you’ve lost time losing your development environment when you’ve switched computers or bought a new laptop.

Working on different projects, often requires different PHP versions, and different extensions. Sometimes there are conflicts with extensions. Things may break. Let’s not even talk about differences in the operating system, that’s another level of nightmare.

But what I hate the most, is messing with my primary system. I don’t want to my system to become dirty. I don’t want to install something and to forget that it is there. Projects finish but (usually) extensions and configurations stay there, and then you have to reconfigure everything.

But don’t worry, I think those days are over. I’ve been experimenting with Vagrant for a while and it has permanently changed the way I work.

Say Hello to Vagrant

So why use Vagrant? Vagrant is a tool that makes it easier to configure virtual systems. You can also use a single configuration when collaborating to make sure all of your team has the same development environment. This way you can spend more time building things, rather than fixing systems. After all we are developers, not System Administrators.

As we know, every project has it’s own libraries, dependencies and it’s own configurations. With Vagrant we can build a dedicated environment for every project, and share this configuration so we’re all on the same page when developing in a team.

Vagrant is mature. You are free to create a configuration from scratch or use one that’s predefined. There are lots of tools and scripts to help you create and manage your Vagrant configurations, one of which is PuPHPet. With PuPHPet, you can configure environments for a local system, Digital Ocean, AWS and Rackspace. I’m not a System Administrator, but I’ve been able to create configurations for these environments with great success.

PuPHPet

There are many configurations specifically for WordPress too. The most well known is Varying Vagrant Vagrants or (VVV) for short.

What Is VVV?

VVV is a Vagrant configuration for WordPress developers. The environment is flexible, easy to edit and focused on high traffic, production environments. By using VVV, you get production ready configurations to work with on your own systems, right away.

What Comes with VVV?

Here are all the goodies you get when you install VVV:

  • Ubuntu 14.04 LTS (Trusty Tahr)
  • WordPress Develop
  • WordPress Stable
  • WordPress Trunk
  • WP-CLI
  • nginx 1.6.x
  • mysql 5.5.x
  • php-fpm 5.5.x
  • memcached 1.4.13
  • PHP memcache extension 3.0.8
  • PHP xdebug extension 2.2.5
  • PHP imagick extension 3.1.2
  • PHPUnit 4.0.x
  • ack-grep 2.04
  • git 1.9.x
  • subversion 1.8.x
  • ngrep
  • dos2unix
  • Composer
  • phpMemcachedAdmin
  • phpMyAdmin 4.1.14 (multi-language)
  • Opcache Status
  • Webgrind
  • NodeJs Current Stable Version
  • grunt-cli Current Stable Version

You can use many different sites on one VVV configuration. It’s the perfect environment to develop themes and plugins on, but that’s not all, it makes contributing to WordPress core easier. It also has Composer and Grunt preinstalled to help you work faster and smarter.

VVV helps you develop for WordPress in the right way, using best practices.

Installing VVV

To install VVV you need to have VirtualBox and Vagrant installed on your machine:

After installing Vagrant, you can then use it from your terminal. I’m using Debian here, it should be the same on Windows and Mac.

You can now grab VVV from the GitHub repository:

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

Next, navigate to wordpress-vvv folder and execute vagrant up:

cd wordpress-vvv
vagrant up

This command will read the configuration and build the entire system for you. The first time it will download the “Ubuntu 14.04 Trusty 64 bit” image from vagrantcloud. Next time you execute vagrant up for another project that depends on this image, it will load it from the cache. You can check your cached images by executing:

vagrant box list

If the installation process gets a bit slow, don’t worry, give it time.

Installing VVV on Debian

As mentioned above, VVV installs a lot of components. git, composer, wp-cli, grunt-cli, nodeJs and a lot of other tools. But what caught my eye is that VVV included a lot of debugging and profiling tools. By default, it installs Webgrind, Opcache Status and xdebug. VVV also uses nginx by default.

After the successful installation, navigate to the default IP address 192.168.50.4 in your web browser. You’ll be greeted with a simple interface that gives us access to various tools and different WordPress installations.

VVV Dashboard

You can now go to any of the installations and experiment. You can find all of these files in the www directory. There are many folders within www, but just focus on wordpress-default and wordpress-develop. Usually, you’ll want to work with the wordpress-default folder. If you’re feeling a bit geeky or adventurous, you might be interested in trying out the latest development version, wordpress-trunk.

The wordpress-default installation is what you will use if you want to create a new theme or plugin. To log in to the Administration Dashboard, the default username is admin and the password is password. Head over to VVV docs for more information on default MySQL accounts and database names for each installation. Finally, the wordpress-develop installation is the folder that you will use if you want to contribute to the WordPress core.

Extra Plugins

There is a Vagrant plugin that I recommend installing to help make managing your hosts much easier. The plugin is called vagrant-hostsupdater and it updates your hosts file when you execute vagrant up, reload and resume.

This plugin reads the configuration for the IP address of the virtual machine and for the hostname and updates the host file accordingly. To install this plugin, execute:

vagrant plugin install vagrant-hostsupdater

Configuration

When Vagrant starts the installation, it firstly looks at the Vagrantfile. This file contains all of the configuration. I’m not going to cover every line, just a couple of values that I think are important.

The first value is the RAM of the VM. By default it’s 512 MB. If you want more, just change this value to a higher one:

v.customize ["modifyvm", :id, "--memory", 512]

The second value that I found important is the IP configuration. This is the IP address that the VM will use by default. If you experience any networking issues, here’s where you can change the default value of the IP address:

config.vm.network :private_network, ip: "192.168.50.4"

The last value is the config folder. This config maps 2 folders, the config folder is on host and /srv/config is on the VM:

config.vm.synced_folder "config/", "/srv/config"

In the config folder you’ll find the configuration of PHP, WordPress, MySQL, nginx and more. After updating the Vagrantfile, make sure to provision this with vagrant provision. This way all of the changes will be applied.

Further Reading

If you’re interested in learning more about Vagrant and VVV, here are few links for further reading:

Conclusion

As you can see, Varying Vagrant Vagrants is focused on providing the perfect development environment for theme and plugin developers, as well as WordPress core contributors. The tools that VVV offers are powerful and geared towards building high performance sites.

VVV might be a bit overwhelming for beginners, but the time it can save WordPress developers makes it well worth learning.

What do you think about VVV? Do you have experience using it? Do you recommend another Vagrant configuration? Let us know in the comments below.

Free JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja and receive updates on exclusive offers from SitePoint.

  • Sebastián Fuentes

    Those people shouldn’t code at all in first place.

    • Tim

      Of course, they should. Terminal is one of the worst things on a computer. This is 2014, not 1986. That’s like saying if you people who can’t write postscript code by hand shouldn’t be using Adobe Illustrator.

      • http://evanbyrne.com Evan Byrne

        Oh stop your fussing. Figuring out how to use a ‘nix terminal is incredibly easy. However, if you want to replace all of the functionality available through the terminal with a pretty interface, then be my guest. Might take a while though.

    • Le Pixel Solitaire

      Yeah and people who can’t use stick shouldn’t eat chinese food at all. What a good logic…

      • Sebastián Fuentes

        The focus of my comment wasn’t about “inability” was about “laziness”. Implement a project (in a good way tho) will involve the use of terminal, either for speed up the development or monitoring it … Avoid the terminal expecting a gui for everything is for lazy and unprofessional people …

  • Taher

    Is it possible to using one vagrant in different OS like Ubuntu, Win8?
    My mean is, is it possible to configure vagrant in one OS ( Ubuntu or Win8 ) and use that vagrant in another one without downloading vagrant dependencies in another OS, because downloading dependencies take more time and it’s depends on internet connection, so I want to download dependencies one time.

    Thanks.

    • Tatsh

      Download the Vagrant installation for each OS you use. Put them on media like a flash drive and share with your machines (or share over network, etc).

      As far as on Linux, you will likely not have a choice but to use the package manager on the OS because if you do not you risk mucking up your system with unmanaged files.

      • Taher

        Is it possible to sharing vagrant dependencies between OS? In other words instead of downloading dependencies in each OS, moving dependency folders from one OS to another?

        • Tatsh

          You can copy the ~/.vagrant.d directory and fix from there. That does not transfer VirtualBox settings, but the ~/vagrant.d/boxes/ directory has all the box images that get used with VMs.

  • Tim

    No, the further into the future we get the less people will need to use Terminal.

    • Tatsh

      GUIs are inherently and automatically limited compared to what a terminal can do. Does not even matter if it’s Bash, PowerShell or even Python as a shell. You can do *arbitrary* data manipulation in a terminal. You cannot do this in a GUI at the same scale or in a reasonable amount of time. I can quickly write up a loop I need *once* that does what would need multiple clicks in a GUI app (if not thousands). I can share data across all different apps (function composition or piping) and the apps only need to operate on bytes.

      I will not make predictions about the future of the terminal. But just because time has passed does not mean things have to change, when they work. By that logic we ought to just not have *anything* older than say 10 years? Just toss it out because it is old right?

    • Joe

      “its 2015. The wheel has been around forever. Time to ditch that antiquated tech”

      Just because its old doesn’t mean its not the best solution.

      • Tim

        Then we should switch back to using tables for page layout. They were more reliable and work in every browser.

        • Joe

          You have obviously made up your mind and no one is going to change it. My point was the newer thing is not always better. That does not automatically mean that everything older is better.

          You do not have to learn terminal and can stick with MAMP. After seeing how fast a more experienced dev was I chose to learn the command line and zshell. Her hands didn’t leave the keyboard. No fumbling around looking for buttons. My productivity has gone up significantly. The command line also opens up things like Rails, Vagrant, and Meteor to people who don’t need a GUI.

  • Le Pixel Solitaire

    Yeah, you can throw away your fridge and keep your food in a box filled with ice, that will always be there too…

    We’re in 2014 and the entire computing world is heading toward a «Minority Report» style of interacting with a machine so I don’t understand why all these efforts into the use of terminals. It’s not like if we didn’t have other choices or options…

    • Aleksander Koko

      I think @disqus_BC7BBXjMmb:disqus has right. I’m not a linux terminal pro but by the time I started to use terminal, many things has changed when developing. There are many things that are simpler with terminal.

      • Le Pixel Solitaire

        Funny, where you see the limitations of a technique I see a product with a badly conceived GUI.

        • Aleksander Koko

          Lets agree to disagree :)

  • http://robhammann.com Rob Hammann

    I think we have to be careful to define ‘many people’. Is that 50% of developers? 10%? Who knows? At some point we have to get comfortable with the command line. Using that as an excuse to not use a viable technology such as vagrant seems a bit extreme. Example: I can’t imagine why a person would want to up/navigate to a second app/gui to see the status of their version tracking software. I can easily integrate a terminal with my IDE and run a ‘git status’ command as opposed to alt+tabbing over to a second gui and clicking around to get that info. We have to not fear the terminal. Most developers only need to know a few commands to get their day to day work process. It seems like GUI’s simply become an unnecessary abstraction layer that keeps of from really being able to control our development in an efficient manner. Just my opinion.

    • Tim

      “I can easily integrate a terminal with my IDE and run a ‘git status’ command as opposed to alt+tabbing over to a second gui and clicking around to get that info”
      That’s because you know how. The standard web developer does not know how to do that. A web programmer, yes. There is a difference.

      • http://ChiefAlchemist.com/ Mark Simchock

        Again. Agreed.

        The point of a GUI is so humans can think less and do more. Having to memorize commands so you can type them in – more or less exactly the same – over and over and over? That’s someone’s idea of 2015 (almost)?

        This stuff was around when “You got mail” was all the rage, and it’s still here? And that’s a good thing? Really?

        Thanks again Tim.

  • http://ChiefAlchemist.com/ Mark Simchock

    fwiw, I agree. Sure it’s cool to know these things but why keep it harder than it has to be. Kudos to you for saying what needs to be said more often.

  • http://kutec.co.in/ Kushal Jayswal

    Link is wrongly mentioned for Vagrant.

  • Aleksander Koko

    It’s true. This is a bit heavy but there are other Vagrant configurations. It’s about using Vagrant than choosing. But I get your point.

  • Aleksander Koko

    Hi @nabeel_molham:disqus . I get this error when trying to access your link “This paste has been removed!” . Tell me more about your problem. What OS do you use?

  • Aleksander Koko

    Hi @nabeel_molham:disqus . I got that problem when I tryed chassis. I’m writing a new article on WordPress and Vagrant but with a new Vagrant Configuration. Chassis is simpler. I really got to much errors by VirtualBox and Vagrant. For this problem there is no try this and will work. A kind of annoying unfortunately. Try to make a new bugg issue on VVV.

    • http://chair9design.com/ Tim Brown

      Thought this timeout issue indicated something being blocked in the firewall.

  • http://alexbondarev.com/ Alex Bondarev

    So you have to create a separate Vagrant box to develop a site, is that correct? If I want to create say 5 different WordPress sites (themes) for instance with 5 different databases, will it be possible to have only one VM?

  • http://oompt.me matt jones

    It’s not insane, and here’s why:

    The benefit that you get far outpaces any detriment, which is just learning the basics of terminal. If you can build a website, you can learn what you need to use terminal to build that site way, way faster.

    • Tim

      What exactly is the benefit? I have to type in a bunch of cryptic codes and commands to get a computer to do what I want it to do. Computers should make people’s lives easier, not more complicated by making them have to learn new languages (that are not spoken languages, mind you) and arbitrary commands that you won’t need to use every day.
      The Terminal is a backend function that normal people should never need to use. Only computer (NOT WEB) programmers should ever need to touch the Terminal. Everything else should be able to be done in a front end interface.
      Imagine picking up your smart phone and having to type in text commands to open your email app and read email. Imagine having to open a simple text editor and type out postscript code to print a spreadsheet document to a laser printer. Sounds incredibly stupid, doesn’t it?

      • http://oompt.me matt jones

        I explained the benefit: working much faster. If you don’t care about speed then it’s a different story I guess. It’s not that anyone -needs- to touch the terminal. It’s that it’s just better.

        • Tim

          From what I’ve seen in having to use the Terminal for certain things, it doesn’t make anything faster. I would need examples from you to believe that statement, because none of the things listed in this article are any faster because of using the Terminal.
          Using MAMP, all I have to do is launch the app and I can get to work right away. Please enlighten me on how Terminal can make it easier than that.

          • http://oompt.me matt jones

            This is a post about vagrant, which is a cli tool. To my knowledge there is no gui version of vagrant. So I’m a little confused as to what your overarching point is. But to answer your question asking for examples: my example -is- vagrant.

          • Tim

            Therein lies the issue: Command Line Tool.

          • http://chair9design.com/ Tim Brown

            not much simpler than

            vagrant up

          • Joe

            Vagrant is better because you can match your server exactly. There will not be any glitches that worked in MAMP that do not work correctly on your server. Your entire team can be developing with the same vagrant configuration. You can match each projects server and configuration needs by having different vagrant boxes.

  • http://alexbondarev.com/ Alex Bondarev

    Thanks a lot, @dagobertrenouf:disqus, will try this out!

  • rtpHarry

    @nabeel_molham:disqus I know this was six months ago but for me this problem was solved by enabling VT-x in the BIOS. As you stated, running other (32bit) boxes worked but when I tried VVV or other WP orientated boxes that were 64bit it would have trouble booting it.

    On my motherboard it was listed under Intel Virtualisation and I just changed it to enabled and it all worked after that.

  • Guest

    when i am going to 192.168.50.4 , i am getting “this webpage is not available” . what mistake did i make?

  • cool19

    using chassis right now but can i use php projects in chassis?