enhance your development environment with vvv and other cool tools

Brent van Rensburg | @twitabrent #wcctBrent van Rensburg | @twitabrent #wcct Brent van Rensburg | @twitabrent #wcct

Enhance your developmentenvironment with VVV

and other cool tools

By Brent van Rensburg

WordCamp Cape Town10 September, 2015

Brent van Rensburg | @twitabrent #wcctBrent van Rensburg | @twitabrent #wcct

Hello there!

•My name is Brent van Rensburg

•Web Engineer for 10up

•Been working with WordPress since 2010

•Passionate about WordPress, the open source community and software that comes with it


What I plan to cover


First off, you gonna need to type into a terminal


Terminal

• Get comfortable using the terminal

• Start by learning the basic commands

• Navigating folders

• Copying, moving and deleting files/folders

• Get into editing files with Vim or Nano


Why change local environment?

• My local environment sucked

• More complex setups

• System updates broke stuff

• Clients may have different server setups

• PHP and other version incompatibilities

• Inconsistencies across teams


VirtualBox


What is VirtualBox (VB)?

• Virtual Machine

• Open source cross platform virtualization application

• Any OS without a need for additional partitions

• Can have multiple instances of VB on your computer


How to install and setup?

• Download to: https://www.virtualbox.org/wiki/Downloads

• Ensure you find the version that matches your current operating system

• Installing is simple and available for all operating systems including Linux, OS X and Windows

https://www.virtualbox.org/wiki/Downloads


With a VirtualBox instance

Operating System agnostic and no system changes can impact your development environment but at this point you would still need install all the things!


Vagrant


What is Vagrant

• Wrapper for virtualisation tools such as VB

• Managed through command line

• Easy to create portable, reproducible development environments

• Uses provisioning tools to automate installation

• Works on one works on all


Your entire environment can be setup using 1 file



• Download to: http://www.vagrantup.com/downloads

• A Vagrant file defines your base box, IP Address, Shared Folder etc

• The more technically inclined can get more in depth here with chef and puppet scripts

• Everything is automated once configured

http://www.vagrantup.com/downloads


With Vagrant installed

• For most of us this to can seem overwhelming and a complete time killer!

• Who knows everything they need?

• This is where we need to find a pre-configured setup with all the things configured for us


Varying Vagrant Vagrants (VVV)

The primary goal of Varying Vagrant Vagrants (VVV) is to provide an approachable development environment that matches a typical

production environment.

The default server configuration provisioned by VVV matches a common configuration for working with high traffic WordPress sites.

The default WordPress configurations provided by VVV create an environment ideal for developing themes and plugins as well as for

contributing to WordPress core.


VVV (cont.)

• Started as a 10up project as an exploration of workflow, later becoming its own organization

• A configuration of Vagrant

• One of the best starting points for building WordPress sites, themes, and plugins, for local development and for teams.

• Great for WordPress core contributions


What does VVV come with...



• Select a folder on your machine where you want to manage your virtual box

• Go to: https://github.com/Varying-Vagrant-Vagrants/VVV

• If you are wanting an Apache web server version of VVV, go here: https://github.com/ericmann/vvv-apache

https://github.com/Varying-Vagrant-Vagrants/VVV

https://github.com/ericmann/vvv-apache


VVV - Additional Plugins

• Vagrant host updater

Keeps your local machine’s hosts file in sync with your virtual machine machine

• Vagrant Triggers

Allows scripts to fire when issuing commands starting up or shutting down your virtual machine.

$ vagrant plugin install vagrant-hostsupdater

$ vagrant plugin install vagrant-triggers


Getting Started

• Open the Terminal

• Navigate to your created Vagrant folder

• This will start the vagrant environment

$ vagrant up


Ready!


What you’ll have

• http://local.wordpress.dev/ for WordPress stable

• http://local.wordpress-trunk.dev/ for WordPress trunk

• http://src.wordpress-develop.dev/ for trunk WordPress development files

• http://build.wordpress-develop.dev/ for the version of those development files built with Grunt

• http://vvv.dev/ for a default dashboard containing several useful tools

http://local.wordpress.dev/

http://local.wordpress-trunk.dev/

http://src.wordpress-develop.dev/

http://build.wordpress-develop.dev/

http://vvv.dev/


Where do you edit / create projects?

• All the sites exists within a shared www folder.

• This folder exists in the root of your Vagrant folder

• This is where you’ll find all the pre-setup website’s source code and where you’ll be creating new projects


Other Vagrant Commands

• When you’re done for the day, shutdown your virtual machine

• If something ever gets out of sync or broken, you can re-provision

• If you want to remove your Vagrant instance all together

$ vagrant halt

$ vagrant up --provision

$ vagrant destroy


Logging into your VirtualBox

• SSH to the Virtual Machine

• Navigate to your project files

• Perform project specific tasks with Grunt, WP-CLI and loads more

$ cd /srv/www/

$ vagrant ssh


How to get started with a new or existing WordPress site?

Introducing Variable VVV


What is Variable VVV?

• Created by Brad Parbs

• Automates the many pains of setting a new site

• Executed via command line

• Asks a series of questions to determine your specific requirements


How to get setup?

• Go to: https://github.com/bradp/vv

• On OS X installation is simplest:

• Other OS’s clone or download the repo and add to your local system path

• Once installed you can execute the vv command from your VVV folder:

$ brew install bradp/vv/vv

$ vv create$ vv list$ vv delete

https://github.com/bradp/vv


$ vv create

Name of new site directory:

Domain to use (leave blank for website.dev):

WordPress version to install (leave blank for latest version):

Install as multisite? (y/N):

Install as subdomain or subdirectory? :

Git repo to clone as wp-content (leave blank to skip):

Local SQL file to import for database (leave blank to skip): path to sql file

Remove default themes and plugins? (y/N):

Add sample content to site (y/N):

Enable WP_DEBUG and WP_DEBUG_LOG (y/N): Y


WP-Make

Theme, Plugin and Library project in seconds!


What is WP-Make?

• Created and used by 10up

• WP-Make is a Yeoman generator

• Asks a series of questions to determine your specific requirements for a theme, plugin or library


How to get setup?• Log into your vagrant machine

• Install yeoman through npm

• Install wp-make by entering the following commands:

• See more: https://github.com/10up/generator-wp-make

• Navigate to new empty plugin or theme folder

$ vagrant ssh

$ npm install -g yo

$ yo wp-make

$ git clone [email protected]:10up/generator-wp-make.git$ cd generator-wp-make$ npm link

https://github.com/10up/generator-wp-make


What it includes

• Composer to manage server-side dependencies

• Bower to manage front-end dependencies

• NPM to manage development dependencies (like Grunt)

• Grunt to streamline development

• phpunit, paratest, and WP_Mock for PHP unit testing

• Qunit for JS unit testing

• A fully-fleshed out, namespaced setup for WordPress plugin development


Grunt is a highly configurable, javascript-based task runner. It’s sole purpose for existing is to automate

web development chores. It’s open-source, extensible, cross platform, and widely used.

Find more info: http://gruntjs.com/

http://gruntjs.com/


Typical Grunt setup can include:

• Concatenating and minifying Javascript

• Running jshint on javascript to format and warn of possible errors or code style issues

• Process Sass and LESS styles into CSS

• Concatenating and Minifying CSS

• Watching files for changes and automatically running tasks

• Generate documentation from doc blocks

• Compress jpeg and png images

• Run automated unit tests


package.json

• Saved in your root of your theme or plugin directory

• WP-Make will have this file created automatically

• Use the following command to install and add the files

• When setup, you need to install the dependencies:

{“name”: “my-project-name”,“version”: “0.1.0”,“devDependencies”: {

“grunt”: “~0.4.5”,“grunt-contrib-jshint”: “~0.10.0”,“grunt-contrib-nodeunit”: “~0.4.1”,“grunt-contrib-uglify”: “~0.5.0”,

}}

$ grunt-init

$ npm install


Gruntfile.js

• Each module setup in the package.json has it’s own settings

• Basic JavaScript file saved in the theme or plugin root alongside the package.json

• Good place to start would be looking at a project setup with WP-Make

• Familiarise yourself with this file as you’ll need to edit it eventually


WP-CLI

Set of command-line tools for managing WordPress installations. You can update plugins, setup multisite

installs and much more, without using a web browser.

http://wp-cli.org/commands

http://wp-cli.org/commands


WP-CLI Commands

• Activate, Deactivate and Update plugins

• Import and Export sql database

• Search and Replace in your database

$ wp plugin activate --all$ wp plugin deactivate [plugin-name]$ wp plugin update --network

$ wp db export database.sql$ wp db import database.sql

$ wp search-replace old-url.com new-url.com --dry-run$ wp search-replace old-url.com new-url.com$ wp search-replace old-url.com new-url.com --network


WP-CLI Commands (cont.)

• Generate multiple posts passing along parameters

• Regenerate thumbnails

• Activate a theme

• Create user, edit user roles, manage user meta

$ wp media regenerate

$ wp theme install

$ wp user create brent [email protected] --role=administrator

wp post generate


Creating your own command

• Go to: https://github.com/wp-cli/wp-cli/wiki/Commands-Cookbook

• Excellent for migration or syncing databases

• Set multiple functions on a command

• Set multiple arguments for each function

https://github.com/wp-cli/wp-cli/wiki/Commands-Cookbook


<?php/** * Implements example command. */class Example_Command extends WP_CLI_Command { /** * Prints a greeting. * * ## OPTIONS * <name> * : The name of the person to greet. * ## EXAMPLES * * wp example hello Newman * * @synopsis <name> */ function hello( $args, $assoc_args ) { list( $name ) = $args;

// Print a success message WP_CLI::success( "Hello, $name!" ); }}WP_CLI::add_command( 'example', 'Example_Command' );

Creating your own command


Recap: VB, Vagrant and VVV

• Standardises the development environment for you and your team

• The entire development setup is automated

• WordPress specific tools and software available to you


Recap: Variable VVV and WP-Make

• Use a site wizard such as Variable VVV to speed up your new or existing website setup within VVV

• Use a scaffolding tool such as WP-Make to auto generate a standardised theme or plugin to ensure consistency across your team using best practices


Recap: Grunt and WP-CLI

• Take advantage of a task runner like Grunt to streamline your development by automating loads of repetitive tasks that will optimize your project

• Use WP-CLI to manage your WordPress installation whether it’s importing a database, adding test data or updating a user

• Create your own WP-CLI commands for project specific tasks or running scripts on a cron


@twitabrent

[email protected]

Questions?

mailto:[email protected]

enhance your development environment with vvv and other cool tools

Technology