professional wordpress development with vagrant - andrea cardinali - wordcamp milano 2016

#wcmil @andreacardinali

THE END OF‘‘IT WORKS ON MY MACHINE’’

Professional WordPress Development con Vagrant

Andrea Cardinali

@andreacardinali


ANDREA CARDINALI

• DEVELOPER & SEO

• WORDPRESS LOVER SINCE v2.8

• I RUN MY OWN WEB AGENCY IN CATTOLICA (RN)

2


BE SOCIAL

#WCMIL

@andreacardinali

3


POLL TIME

4


TABLE OF CONTENTS

• WHAT IS VAGRANT & WHY USE IT

• VAGRANT & WORDPRESS

• QUESTION TIME

5


ONCE UPON A TIME…

6


WRITE SOME CODE THAT WORKS ON YOUR MACHINE

PUSH IT ON PRODUCTION

DEVELOPMENT WORKFLOW7


WHAT COULD POSSIBLYGO WRONG?

8


9



THIS SITUATION FEELS FAMILIAR. DOESN’T IT?

PROBLEMS START HERE


10



MURPHY’S LAW NEVER SLEEPS…

MURPHY’S LAW

PROBLEMS START HERE

SITUATION ISGETTING WORSE


IT WORKS?

11


• Different (minor) php version (5.2 vs 5.3 | 5.3 vs 5.4)

• Case sensitive file naming (Windows vs Linux)

• Short notation disabled in production <?

• Wrong permission on folders

• […]

MURPHY’S LAW AT WORK

12


IT WORKS?


DAMN

BUG HUNTING

MURPHY’S LAW


PROBLEMS START HERE

13


IT WORKS?


DAMN

…UNTIL YOU GET LUCKY

MURPHY’S LAW


YOU’RE TEMPORARY AWESOME

(‘TILL NEXT DEPLOY)

PROBLEMS START HERE

14


WHAT IS VAGRANT

15


IT WORKS?


DAMN

THIS IS NOT VAGRANT

MURPHY’S LAW


YOU’RE TEMPORARY AWESOME

(‘TILL NEXT DEPLOY)

PROBLEMS START HERE

16


WRITE SOME CODE


IT WORKS?

YOU’RE AWESOME

THIS IS VAGRANT

YOU KNOW IT WORKS!

17


VAGRANT

http://www.vagrantup.com/

18


WHAT IS VAGRANT

• Open source software written in Ruby created to build development environments

• Is actively mantained both from Hashicorpand the community

• It fully automates the creation and the provision of vms

• It’s a kinda of virtual machine manager with super powers

19


WHY SHOULD I USEVAGRANT?

20


PROMOTE TEAM COLLABORATION

21


PROMOTE TEAM COLLABORATION

• Everyone in your time works with the sameenvironment

• You work with your favourite OS,IDE, browser etc

• Your environment is inside a Vagrantfile(Infrastructure as Code)

• Your Vagrantfile is inside your project’srepository

22


BETTER DEVELOPMENT

23


BETTER DEVELOPMENT

• You don’t have to setup your machine everytime you start a new project. Just vagrant up

• You don’t have to be a ninja to run vagrant.Just vagrant up

• You can stay focused on code

24


DEVELOPMENT & PRODUCTION PARITY

25


DEVELOPMENT & PRODUCTION PARITY

• Your development virtual machine and your production are as similar as possible.

• This gives the confidence to know that if your WordPress site works in development, it will also work in production and you can deploy with confidence.

• The end of ‘it works on my machine’

26


VAGRANT OVERVIEW

27


VAGRANT REQUIREMENTS

• Compatible OS (~ all)

• Hardware that support virtualization

• Virtual Box 5.x

• Shell to run (few) commands*

*Windows Users can use command prompts, Git Bash or Putty

28


VAGRANT INSTALL INSTRUCTION

1. Make sure you enabled Virtualization in your BIOS

2. Download Oracle VirtualBox

3. Install VirtualBox

4. Download Vagrant

5. Install Vagrant

6. Reboot (Windows only)~ 40 minutes to download & install all the software needed

29


VAGRANT FUNDAMENTALS

• VAGRANT BOX

• .VAGRANTFILE

• VAGRANT COMMANDS

30


VAGRANT BOX

• A box is a (.box) file that contains an operating system plus the software installedin it.

• Plenty of boxes are already available

• You can create your own boxes

• You can have multiple boxes

• You can have different boxes for differentCMS (ie. Homestead for Laravel or Joomlatools for Joomla)

31


.VAGRANTFILE

• Text file that contains all the information needed to create the environment(hardware, networking, box and provisioningscript)

• It weights fews KB (no excuses to put in under version control)

• Multiple VMs can be defined in a single file

• You can adjust your VM performance by editing this file

32


PROVISIONING FILE

• Script used to do specific operations likesoftware install after initial provision

• It’s optional

• It could be a bash script or a Puppet / Chef/ Ansible recipe

33


VAGRANT COMMANDS

• Vagrant upInitialize and boot the VM. 1st time it could take some time• Vagrant haltShutdown the VM. All the data are preserved• Vagrant destroy

destroy (clear) all the data inside the VM (exceptthe data inside the shared folders)

• Vagrant sshconnect throught ssh to the guest OS

• Vagrant pushto upload files on the production server

34


VAGRANT USAGE EXAMPLE

1. git clone <path/to/your/repo>

35




2. vagrant up

36




2. vagrant up

3. There is no #3

37


SOME USEFUL THINGS TO KNOW ABOUT VAGRANT

• It shares trasparently folders between guest OS

• It performs better on Vmware

• VM slows down on disk intensive tasks

• VM works better on SSD

• Optimal setup with half CPUs and a quarterof Ram

38


VAGRANT &

WORDPRESS

39


WORDPRESSVAGRANT PROJECTS• VVV (Varying Vagrant Vagrants)

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

• Trellis by roots.io

[https://github.com/roots/trellis]

• VCCW (Vagrant + Chef +CentOS + WordPress)

[https://github.com/vccw-team/vccw]

• Mercury Vagrant HGV (WP Engine)

[https://github.com/wpengine/hgv]

• VIP Quickstart (wordpress.com)

[https://github.com/Automattic/vip-quickstart]

40


WHICH ONESHOULD I USE?

41


IT DEPENDS…

42


CHOOSE THE ONE ITWORKS FOR YOU(AND YOUR TEAM)

43


WORDPRESS&

VVV

44


VARYINGVAGRANTVAGRANTS

45


VVV OVERVIEW

• LEMP stack (Ubuntu Nginx MySql 5.5 Php 7) + stuff

(phpMyAdmin, WP-CLI, Memcached, NodeJs, Grunt, Mailcatcher,

Git, Svn and a lot more)

• 3 WordPress Versions (stable,trunk, trunk + Grunt)

• Useful for contributing to WordPress Core

[https://make.wordpress.org/core/]

• It automatically backup databases on vagrant halt

• It automatically edit/restore hosts file

46


VVV – GETTING STARTED

• https://github.com/Varying-Vagrant-Vagrants/VVV#installation

• 1st time setup takes ~1 hour and half

47

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


VVV (DEFAULT) DASHBOARD

• Digit vvv.dev in your browser

48


VVV-DASHBOARD

https://github.com/topdown/VVV-Dashboard

49


VVV-DASHBOARD

50


VARIABLE VVV

51


VARIABLE VVV

• Command line tool

• VVV site creation wizard

• Create as many site as you want

• Choose site url, WP version, db prefix, preconfigured plugins …

https://github.com/bradp/vv

52


VARIABLE VVV - COMMANDS

• vv create

• vv list

• vv remove

53


54


VV LIST

55


VV CREATE - 1

56


VV CREATE - 2

57


VV BLUEPRINTS

58


VARYING VV - BLUEPRINTS

• A JSON file containing a setup for your WP installation

• Under the hood it’s used to pilot WP-CLI

• Plugins, themes, widgets, settings are installedautomatically

• Plugins,mu-plugins and themes can use:• Github username/repo• Full git url• Url to zip file• WordPress.org slug

• It works also for multisite and multi-network

59


VARYING VV – BLUEPRINTS EXAMPLE

{"sample": { "themes": [ { "location": "automattic/_s", "activate": true } ],"plugins": [ { "location": "https://github.com/clef/wordpress/archive/master.zip","version": null, "force": false, "activate": true, "activate_network": false },{

"location": "cmb2", "version": "2.0.5","force": false, "activate": true,"activate_network": false } ],"options": [ "current_theme::_s" ],"widgets": [ { "name": "meta", "location": "sidebar-1", "position": 1, "options": { "title": "Site login or logout" }

}, } ],

60


QUICK RECAP

• Don’t be afraid of Vagrant complexity, isreally simple to use.

• Choose a Vagrant project that fits your needs(or create a new one)

• Use Vagrant to definitely stop ‘it works on mymachine’ bugs and to become a betterdeveloper.

61


WORDPRESS MEETUP ROMAGNA

QUANDO:

ogni 1° giovedi del mese ( prossimo 3 Novembre)

DOVE:

Dinamo Coworking Space Cesena

PERCHÉ:

Per parlare di WordPress, conoscere bella gente e condividere le proprie esperienze

wpromagna.com@romagnawp

62


QUESTIONS?

63


THANKS!

• Twitter:@andreacardinali

• Slideshare: http://www.slideshare.net/andreacardinali

• Website: http://www.andreacardinali.it/

64

https://twitter.com/andreacardinali

http://www.slideshare.net/andreacardinali

http://www.andreacardinali.it/

professional wordpress development with vagrant - andrea cardinali - wordcamp milano 2016

Software