{"id":155058,"date":"2016-05-06T14:00:52","date_gmt":"2016-05-06T14:00:52","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=155058"},"modified":"2022-03-15T22:27:23","modified_gmt":"2022-03-15T22:27:23","slug":"vvv-wordpress-development","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/vvv-wordpress-development\/","title":{"rendered":"Setting Up VVV for WordPress Development"},"content":{"rendered":"<p>We&#8217;ve been publishing more articles and tutorials about setting up local development environments lately, and rightly so. Using tools like <a href=\"https:\/\/wpmudev.com\/blog\/develop-wordpress-locally-mamp\/\" target=\"_blank\">MAMP<\/a> or \u2013 my personal favorite \u2013 <a href=\"https:\/\/wpmudev.com\/blog\/vagrant-wordpress-test-environment\/\" target=\"_blank\">Vagrant<\/a>, allows you to create a setup on your computer that is leagues above anything you could do online.<\/p>\n<p>Varying Vagrant Vagrants \u2013 or <a href=\"https:\/\/github.com\/Varying-Vagrant-Vagrants\/VVV\" target=\"_blank\">VVV<\/a> \u2013 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.<\/p>\n<p>In this article, we&#8217;ll take a look at how you can get up and running and start using the advanced features.<\/p>\n<p>We&#8217;ll cover:<\/p>\n<ul>\n<li><a href=\"#setup\">Setting Up VVV<\/a>\n<ul>\n<li><a href=\"#step-1\">Step 1: The Basics<\/a><\/li>\n<li><a href=\"#step-2\">Step 2: Optional Extras<\/a><\/li>\n<li><a href=\"#step-3\">Step 3: Grab VVV<\/a><\/li>\n<li><a href=\"#step-4\">Step 4: Start Your Virtual Machine<\/a><\/li>\n<li><a href=\"#step-5\">Step 5: Modifying the Hosts File<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#first\">First Steps with VVV<\/a><\/li>\n<li><a href=\"#credentials\">Credentials<\/a><\/li>\n<li><a href=\"#add\">Adding Sites<\/a><\/li>\n<li><a href=\"#automate\">Automatic Site Creation<\/a><\/li>\n<\/ul>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1364x1364 size-1364x1364\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/05\/vvv.png\" alt=\"Varying Vagrant Vagrants is an open source Vagrant configuration focused on WordPress development.\" width=\"1364\" height=\"500\" \/><figcaption class=\"wp-caption-text\">Varying Vagrant Vagrants is an open source Vagrant configuration focused on WordPress development.<\/figcaption><\/figure>\n<h2 id=\"setup\">Setting Up VVV<\/h2>\n<p>VVV uses the same mechanisms as any other Vagrant setup so if you&#8217;ve used Vagrant before it should all be familiar. If not, read on.<\/p>\n<h3 id=\"step-1\">Step 1: The Basics<\/h3>\n<p>First, you&#8217;ll need to install <a href=\"https:\/\/www.virtualbox.org\/wiki\/Downloads\" target=\"_blank\">VirtualBox<\/a> and <a href=\"https:\/\/www.vagrantup.com\/downloads.html\" target=\"_blank\">Vagrant<\/a> itself. Each setup is completely automated and will take a minute or so.<\/p>\n<h3 id=\"step-2\">Step 2: Optional Extras<\/h3>\n<p>The next part is optional and it provides some conveniences to decrease your workload when creating sites. The <a href=\"https:\/\/github.com\/cogitatio\/vagrant-hostsupdater\" target=\"_blank\">vagrant-hostupdater<\/a> plugin and the <a href=\"https:\/\/github.com\/emyl\/vagrant-triggers\" target=\"_blank\">vagrant-triggers<\/a> plugin can be installed using the following two commands:<\/p>\n<div class=\"gist\" data-gist=\"42262e5cdc3d98a122a37de357d406bf\" data-gist-file=\"adding-plugins.sh\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/42262e5cdc3d98a122a37de357d406bf.js?file=adding-plugins.sh\">Loading gist 42262e5cdc3d98a122a37de357d406bf<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>The host-updater can automatically update your host file. This is something you&#8217;ll need to do for each site you create. It&#8217;s not a huge chore but if you add and remove sites regularly it can make your life easier.<\/p>\n<p>The vagrant-triggers plugin is another convenience that can run various scripts when commands such as <code>vagrant halt<\/code> or <code>vagrant up<\/code> 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.<\/p>\n<h3 id=\"step-3\">Step 3: Grab VVV<\/h3>\n<p>Firstly, you&#8217;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.<\/p>\n<p>For this example I&#8217;ll be using the <em>~\/websites\/sites<\/em> directory on my computer but feel free to substitute with your own.<\/p>\n<p>I&#8217;ve not created the <em>sites<\/em> subdirectory yet but I&#8217;ll let <a href=\"https:\/\/git-scm.com\/\" target=\"_blank\">Git<\/a> do that for me \u2013 my preferred install method. If you have Git installed you can grab all the required files with the following command:<\/p>\n<div class=\"gist\" data-gist=\"c1f2db0948b87f0ff578f06b19f8c7f2\" data-gist-file=\"get-vvv.sh\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/c1f2db0948b87f0ff578f06b19f8c7f2.js?file=get-vvv.sh\">Loading gist c1f2db0948b87f0ff578f06b19f8c7f2<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>If you don&#8217;t have Git don&#8217;t worry, you can download a <a href=\"https:\/\/github.com\/varying-vagrant-vagrants\/vvv\/archive\/develop.zip\" target=\"_blank\">development zip file<\/a> or a <a href=\"https:\/\/github.com\/varying-vagrant-vagrants\/vvv\/releases\" target=\"_blank\">stable release<\/a> and extract it.<\/p>\n<p>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:<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/05\/vvv-files.png\" alt=\"The files needed for VVV\" width=\"735\" height=\"345\" \/><figcaption class=\"wp-caption-text\">The files needed for VVV<\/figcaption><\/figure>\n<h3 id=\"step-4\">Step 4: Start Your Virtual Machine<\/h3>\n<p>Open up your terminal and navigate to the folder that contains your VVV files. Issues a simple <code>vagrant up<\/code> 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 &#8211; it&#8217;s awesome.<\/p>\n<p>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!<\/p>\n<h3 id=\"step-5\">Step 5: Modifying the Hosts File<\/h3>\n<p>If you chose not to install the host updater plugin you&#8217;ll need to do it yourself. In Windows your hosts file is located at <em>C:\\Windows\\System32\\drivers\\etc\\hosts<\/em>, on OSX it should be in <em>\/etc\/hosts<\/em>. Open this file and add the following line below anything else you may see in there:<\/p>\n<div class=\"gist\" data-gist=\"2b5d32a96c331c92b0c38320ea250204\" data-gist-file=\"hosts\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/2b5d32a96c331c92b0c38320ea250204.js?file=hosts\">Loading gist 2b5d32a96c331c92b0c38320ea250204<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<h2 id=\"first\">First Steps With VVV<\/h2>\n<p>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 <code>http:\/\/vvv.test<\/code>. This is a simple HTML list of pages and tools VVV has to offer.<\/p>\n<p>Let&#8217;s look at each one.<\/p>\n<p><strong>Home<\/strong> and <strong>Repository<\/strong> are pretty self explanatory, the later points to the VVV Github repository we installed VVV from.<\/p>\n<p><strong>phpMyAdmin<\/strong> allows you to view and manipulate databases. If you haven&#8217;t used it before I recommend getting some experience with it, debugging issues can sometimes be a lot easier with direct database access.<\/p>\n<p><strong>phpMemcachedAdmin<\/strong> 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 <a href=\"https:\/\/code.google.com\/archive\/p\/phpmemcacheadmin\/\" target=\"_blank\">phpMemcachedAdmin<\/a> website.<\/p>\n<p><strong>Opcache Status<\/strong> is another GUI that displays OpCache information like memory use, keys, hits and misses and so on.<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/05\/opcache.jpg\" alt=\"OpCache User Interface\" width=\"735\" height=\"414\" \/><figcaption class=\"wp-caption-text\">OpCache User Interface<\/figcaption><\/figure>\n<p>MailCatcher is an application that shows you emails sent by the system. This is immensely useful. I&#8217;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.<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/05\/mailcatcher.png\" alt=\"Mailcatcher Interface\" width=\"735\" height=\"462\" \/><figcaption class=\"wp-caption-text\">Mailcatcher Interface<\/figcaption><\/figure>\n<p><strong>Webgrind<\/strong> 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 <a href=\"https:\/\/github.com\/Varying-Vagrant-Vagrants\/VVV\/wiki\/Code-Debugging\" target=\"_blank\">Code Debugging<\/a> section on VVV for more information.<\/p>\n<p><strong>PHP Info<\/strong> is a link to a simple page that shows the output of the <code>phpinfo()<\/code> function. You&#8217;ll see which ini files are running, what modules are set and bunch of other helpful data. <strong>PHP Status<\/strong> shows basic PHP statistics like active processes, accepted connections and a table of process IDs with their stats.<\/p>\n<p>Finally, <strong>four separate WordPress installations<\/strong> can be found: <code>http:\/\/local.wordpress.test\/<\/code> points to a site with the latest stable WordPress version; <code>http:\/\/local.wordpress-trunk.test\/<\/code> points to a site which is running the WordPress trunk; <code>http:\/\/src.wordpress-develop.test\/<\/code> is running trunk with development files; and <code>http:\/\/build.wordpress-develop.test\/<\/code> is running the same development files built with Grunt.<\/p>\n<p>These installations are mainly for WordPress code development, feel free to forget about them if you don&#8217;t need them.<\/p>\n<h2 id=\"credentials\">Credentials<\/h2>\n<p>For all pre-installed sites the database username and password is always <code>wp<\/code> and <code>wp<\/code>, all admin usernames and passwords are <code>admin<\/code> and <code>password<\/code>. You can find this information along with some paths and database names in the <a href=\"https:\/\/github.com\/Varying-Vagrant-Vagrants\/VVV#credentials\" target=\"_blank\">Credentials<\/a> section for VVV.<\/p>\n<h2 id=\"add\">Adding Sites<\/h2>\n<p>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&#8217;ll go through it manually and then point you to <a href=\"https:\/\/github.com\/bradp\/vv\" target=\"_blank\">Variable VVV<\/a>, which automates it.<\/p>\n<p>All your sites can be found in the <code>www<\/code> directory. On your local file system this will be right within your VVV folder, for me this is <em>~\/websites\/sites\/www<\/em>. If you SSH into your machine you should find it under <em>\/vagrant\/www<\/em>.<\/p>\n<p>Start by creating a sub-directory within the <em>www<\/em> folder, let&#8217;s use <code>portfolio<\/code> as an example. Once created, create a file named <code>nginx.conf<\/code> within the folder with the following content:<\/p>\n<div class=\"gist\" data-gist=\"7f154b5811041ec5c4ec2f312c175c62\" data-gist-file=\"nginx.conf\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/7f154b5811041ec5c4ec2f312c175c62.js?file=nginx.conf\">Loading gist 7f154b5811041ec5c4ec2f312c175c62<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>The only thing you&#8217;ll need to change from site-to-site in a basic setup is the <code>server_name<\/code>. The root is set to be the <code>htdocs<\/code> folder within the site directory. The root folder for our portfolio would be <code>www\/portfolio\/htdocs<\/code>.<\/p>\n<p>For a commented version of this file take a look at the <a href=\"https:\/\/github.com\/varying-vagrant-vagrants\/vvv\/wiki\/Auto-site-Setup#nginx-config\" target=\"_blank\">Nginx config<\/a> section on the VVV website.<\/p>\n<p>Next, go back to the <em>www<\/em> folder and open the <em>vvv-hosts<\/em> file. Add your new site (use the same string you used in the nginx config for <code>server_name<\/code>) on a new line and save the file.<\/p>\n<p>Finally, use the <code>vagrant halt<\/code> command to stop your VM and then issues <code>vagrant up --provision<\/code>. This will set up your VM with the new site. Don&#8217;t forget to add your domains to your computer&#8217;s hosts file if you don&#8217;t have the vagrant-hostupdater plugin installed!<\/p>\n<h2 id=\"automate\">Automatic Site Creation<\/h2>\n<p>As I mentioned, you can automate this process with <a href=\"https:\/\/github.com\/bradp\/vv\" target=\"_blank\">Variable VVV<\/a>. Read together that would be Variable Varying Vagrant Vagrants &#8211; good, straightforward naming there.<\/p>\n<p>You can find <a href=\"https:\/\/github.com\/bradp\/vv#installation\" target=\"_blank\">Installation Instructions<\/a> on the website, I like to use the simple Linux installation. Use the following list of commands on your computer in any folder:<\/p>\n<div class=\"gist\" data-gist=\"7a5895aa72699567fcf5b49eb58cbb71\" data-gist-file=\"install-vv.sh\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/7a5895aa72699567fcf5b49eb58cbb71.js?file=install-vv.sh\">Loading gist 7a5895aa72699567fcf5b49eb58cbb71<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Windows users should follow the instructions in the link above, there are a few extra steps you&#8217;ll need to take.<\/p>\n<p>Once you have things set up you should be able to create sites as easily as <code>vv create<\/code>. 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&#8217;s the site I created for our portfolio automatically:<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1364x1364 size-1364x1364\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/05\/vv.png\" alt=\"Creating a site with vv\" width=\"1364\" height=\"820\" \/><figcaption class=\"wp-caption-text\">Creating a site with vv<\/figcaption><\/figure>\n<p>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 <em>portfolio<\/em> directory which you can reach via <em>portfolio.test<\/em>.<\/p>\n<p>Again, don&#8217;t forget to add the site name to your computer&#8217;s hosts file if you&#8217;re not using the vagrant-hostupdater plugin installed!<\/p>\n<h2>Enjoy Local Development Goodness<\/h2>\n<p>That&#8217;s all for today about VVV. I&#8217;ve found that it is the best environment for WordPress I&#8217;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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Varying Vagrant Vagrants \u2013 or VVV \u2013 is a free open source Vagrant configuration centered around WordPress development and has everything you need to create multiple WordPress sites, including  useful tools for debugging, plugin creation and more. Here&#8217;s how to create a setup on your computer that is leagues above anything you could do online.<\/p>\n","protected":false},"author":344049,"featured_media":172441,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[557],"tags":[10789],"tutorials_categories":[],"class_list":["post-155058","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-testing-environment"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/155058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344049"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=155058"}],"version-history":[{"count":24,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/155058\/revisions"}],"predecessor-version":[{"id":209699,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/155058\/revisions\/209699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/172441"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=155058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=155058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=155058"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=155058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}