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
- Getting Started: Software Requirements (you need to install Oracle VM VirtualBox and Vagrant from HashiCorp – both are free)
- Installation (use the
git
method — you can literally copy and paste the sample git command provided) - Basic Usage
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 entercd /srv/www
after you log into VVV with ssh to work directly with these files via SSH. - In the
/srv/www
directory, enterls
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
- Ubuntu 18.04 LTS (Bionic Beaver)
- WordPress Develop
- WordPress Stable
- WP-CLI (master branch)
- nginx (mainline version)
- MariaDB 10.1
- php-fpm 7.2.x
- memcached
- PHP memcache extension
- PHP xdebug extension
- PHP imagick extension
- PHPUnit
- ack-grep
- git
- subversion
- ngrep
- dos2unix
- Composer
- phpMemcachedAdmin
- phpMyAdmin (multi-language)
- Opcache Status
- Webgrind
- NodeJs
- grunt-cli
- 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/.