The VVV WordPress development environment: set it up on your computer

The VVV WordPress development environment runs on your local development computer in a virtual machine (VM) so you don’t need to connect to a remote server to build your WordPress site.

Varying Vagrant Vagrants, or VVV, is an open source project that runs on all major operating systems, including Windows, Mac, and Linux computers.

Because VVV is a WordPress development environment that runs locally on a virtual machine (VM), there’s no network lag as you wait for your changes to be saved to the remote server … and then wait again to reload your pages to check your work. You don’t need a remote staging or production server to start creating your WordPress site.

It also means you can develop your WordPress site without a direct connection to the Internet — although you’ll want to set everything up first while you are still online.

VVV also works great with Git, to help manage you codebase and share your code with other team members.

How does the VVV development environment work?

VVV helps you configure new virtual WordPress servers quickly, so you can set up multiple WordPress VM local development environments on your computer easily.

VVV needs two other components to work:

  • Vagrant
  • A Virtual Machine (VM)

Vagrant is free, automated open source tool from HashiCorp for building and managing virtual machine (VM) environments. Since maintaining a virtual machine is at least as difficult as maintaining an actual computer, anything that you can do to simplify this process will make a huge difference in your productivity.

To use Vagrant, you’ll also need to use a virtual machine environment (VM). VVV recommends that you use Oracle’s free Open Source VM VirtualBox.

Get started with the VVV WordPress development environment

To use VVV effectively, you’ll need:

  • a computer with a decent amount of RAM (at least 8 GB, but 16 GB or more is ideal).
  • a modern CPU that supports virtualization.
  • an SSD drive is optional, but recommended.
  • depending on the size of the websites you’re developing, you’ll probably want copious storage space.

Install VVV

Use the menu on the right side of the VVV website to complete the steps under the headings

Once you’ve installed VVV, you’ll find a vagrant-local folder in your home (or user) folder. This folder contains all of the files the VVV web server uses to set up your development sites. You can access and edit these files any time, even if VVV isn’t running.

Set up HTTPS

This means you can connect to your local development site like this: https://example.com – especially handy when WordPress automatically generates links as you add menus, pages and posts.

To set up HTTPS on your VVV development machine, follow the instructions for Setting Up HTTPS on the VVV site.

TL;DR: add tls-ca to the core section of your vvv-custom.yml file and reprovision VVV with vagrant reload --provision

Version 3 of VVV already includes this tls-ca addition the core section of your default vvv-custom.yml file, so you can use the https: protocol right away.

Note that earlier versions of Firefox did not accept a self-generated certificate of the kind used by VVV.

Now, you can also use Firefox to test your site on VVV using https connections — as with Google Chrome and Safari, warnings appear, but you can choose to proceed.

Testing your new VVV local VM development environment

If everything is working, this page displays a list of the active websites on your VVV installation, plus some other handy links to the tools installed on VVV, like:

  • phpMyAdmin
  • phpMemcachedAdmin
  • Opcache Status
  • MailHog
  • Webgrind
  • PHP Info
  • PHP Status

Plus many more — see the VVV Software Packages section below for a complete list.

Set up VVV WordPress websites

This setup process essentially consists of adding a new site section to your vvv-custom.yml file, and then reprovisioning VVV with vagrant reload --provision

Other VM development considerations

  • Back up your databases while your VM is running! Your updated WordPress database only exists in the VM. Use the included phpMyAdmin or WP-CLI to back up your database(s).
  • Always remember to exit VVV with vagrant halt to free up the RAM your virtual server uses, and to restore your host file to its original state.
  • Back up your development files in your vagrant-local folder on your development computer. One great backup option: use Git to place your code under version control.

Working with SSH and WP-CLI in VVV

  • If you need WP CLI or PHP Codesniffer, or want to administer your virtual machine from the command line, run vagrant ssh (no password required). This drops you in the /home/vagrant user directory on the VM.
  • VVV maps the ~/vagrant-local/www folder on your development computer to /srv/www in the virtual machine. Simply enter cd /srv/www after you log into VVV with ssh to work directly with these files via SSH.
  • In the /srv/www directory, enter ls to see a list of all the sites that are set up in VVV.
  • Use the cd command to open a site directory. Once you’ve entered a site directory, you can use WP-CLI to administer that specific site.
  • When you’re done using SSH on your VVV machine, enter exit to log off of the VM and exit SSH.

More Info on VVV

Detailed information about VVV.

VVV Software Packages

  1. Ubuntu 18.04 LTS (Bionic Beaver)
  2. WordPress Develop
  3. WordPress Stable
  4. WP-CLI (master branch)
  5. nginx (mainline version)
  6. MariaDB 10.1
  7. php-fpm 7.2.x
  8. memcached
  9. PHP memcache extension
  10. PHP xdebug extension
  11. PHP imagick extension
  12. PHPUnit
  13. ack-grep
  14. git
  15. subversion
  16. ngrep
  17. dos2unix
  18. Composer
  19. phpMemcachedAdmin
  20. phpMyAdmin (multi-language)
  21. Opcache Status
  22. Webgrind
  23. NodeJs
  24. grunt-cli
  25. Mailcatcher

— from What is VVV? | Varying Vagrant Vagrants

Relative and Absolute Hyperlinks

The relative path replaces the protocol and domain with a single slash character (“/”). The absolute path to this article, for example, is https://cadent.com/use-vvv-as-a-wordpress-dev-environment/ and the relative path to this article is /use-vvv-as-a-wordpress-dev-environment/.

Scroll to Top