Tools

Wordpress

Setting up development environment

When you want to develop a WordPress app, or you are joining an existing project, it is important to have local development ready. There are a number of solutions that can be used.

App based dev solutions

If you want to use simple solutions that only include the bare minimum (server config), you can use WAMP, MAMP, XAMPP, or Local by Flywheel.

Vagrant based dev environments

We do recommend more WordPress-friendly solutions. One such solution is Varying Vagrant Vagrants. It is a Vagrant configuration focused on WordPress development. The advantage of VVV over MAMP or XAMPP is that it comes bundled with a WordPress-ready server configuration and software packages, such as php-fpm, WP-CLI, Composer, NodeJs, and other useful packages.

The advantage of using Vagrant is that it is configured independently of your machine because it runs on a virtual machine. This way, everyone on your team will develop in the same environment.

Homestead is another such dev environment.

Docker based solutions

WP Docker is another development environment you can use.

The main difference is that Vagrant uses virtual machines to run environments independent of the host machine via VirtualBox or VMware. Each environment has its own virtual machine. Docker, on the other hand, uses 'containers' that include your application and all of its dependencies, but shares the operating system with other containers. They are isolated processes on the host operating system but are not tied to any specific infrastructure.

Vagrant is easier to set up and get up and running but can be resource-intensive (RAM and space on the disk). Docker is a bit harder to understand and set up, but it is much faster and uses less CPU and RAM than Vagrant.

Local environment on Unix based systems

You can also set your own dev server on Mac OS or any Unix based system. You'll need to set up your own PHP (FPM), database (MySQL), and a web server (Apache or Nginx). We usually use Nginx on client projects.

A web service stack based on Linux, Apache, MySQL, and PHP is known as a LAMP stack. The Nginx one is known as the LEMP stack.

If you want to use a local dev environment you can also check Laravel Valet, or Valet Plus.

Default local TLD

When setting up local projects it's important to avoid using the reserved .dev top-level domain (TLD). At NMC, we chose .test, as all our local TLD. VVV and Laravel Valet will set sites up with .test by default, in other solutions, you need to make sure to set this up yourself.

If the client project has a production URL

https://clientproject.com

your local environment should be

https://clientproject.test

In the following chapters, you'll learn how to set up various environments.

Vagrant setup

Installing VVV

Setting up VVV is easy. You can either follow the manual install instructions, as described in the official documentation, or you can use the brew package manager for quick and easy installation.

First, install VirtualBox. You can install it using Homebrew:

brew cask install virtualbox

After you install VirtualBox, install Vagrant.

brew cask install vagrant

Then you'll want to install a few Vagrant plugins.

vagrant plugin install vagrant-hostsupdater

We recommend that you reboot your computer to avoid any networking issues.

After you install the plugins, you'll want to install VVV in the local folder.

cd ~
git clone -b stable git://github.com/Varying-Vagrant-Vagrants/VVV.git ~/vagrant-local
cd vagrant-local

This will clone the official VVV repository to your vagrant-local folder in the home folder. If you want the latest updates and features, switch to the develop branch instead of the master branch.

Before starting VVV, go to Vagrantfile and uncomment the config.vm.network :public_network line. This will enable you to debug across devices later on.

You can set up your custom sites by creating a copy of the default-config.yml file and renaming it to custom.yml. Both are located in the config folder.

While in your vagrant-local folder, type

vagrant up

This will set VVV up for the first time. This may take some time (about 10 minutes on an average network). While VVV is setting up, you can read the rest of this handbook.

What Vagrant is actually doing is downloading a packaged box with the Ubuntu virtual machine and caching it for future use. After downloading, it will provision the running script that will download other packages necessary for local development.

Once it has installed everything, you'll be all set to work on your local WordPress. You can type

http://vvv.test

in your browser, which will open a screen with some interesting links you can explore.

When you want to close Vagrant and save your RAM, type

vagrant halt

The next time you start your Vagrant with vagrant up, the cached box will start and boot in a minute or so. Re-provisioning your Vagrant is necessary when adding new folders or changing your configuration.

Making your Vagrant public-friendly

Modern web development is mobile first oriented. With that in mind, it is natural that you want to be able to see what you are developing on your mobile phone.

To do that, you need to change your Vagrantfile located in the vagrant-local folder. Search for

config.vm.network :public_network

and uncomment it. You can also enable port forwarding while you're at it:

config.vm.network "forwarded_port", guest: 80, host: 8888

Now you need to re-provision your Vagrant.

vagrant reload --provision

When you do that, you'll be asked which network interface you use to connect to the Internet.

==> default: Clearing any previously set forwarded ports...
==> default: Clearing any previously set network interfaces...
==> default: Available bridged network interfaces:
1) en0: Wi-Fi (AirPort)
2) en1: Thunderbolt 1
3) en2: Thunderbolt 2
4) bridge0
5) p2p0
6) awdl0
==> default: When choosing an interface, it is usually the one that is
==> default: being used to connect to the internet.
    default: Which interface should the network bridge to?

In our case, we connect via Wi-Fi, so choose 1. If you're connecting via Ethernet, you'll need to select that as your network bridge.

Adding new sites

The official documentation on adding a new site can be found here. An easier way to provision a new site is by using site templates. A site template is a Git repo that contains scripts and files necessary to set up a new VVV site.

You can also create provision scripts. First, you need to add your site to the custom.yml file.

Let's say we want to create a wordpress-nmc site. After the

  wordpress-two:
    skip_provisioning: false
    description: "A standard WP install, useful for building plugins, testing things, etc"
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    custom:
      # locale: it_IT
      delete_default_plugins: true
      install_plugins:
        - query-monitor
    hosts:
      - two.wordpress.test

code in the file add

  wordpress-nmc:
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    vm_dir: /srv/www/nmc/wordpress-nmc
    local_dir: www/nmc/wordpress-nmc
    hosts:
      - wordpress-nmc.test

We've told Vagrant that there should be a site it can access inside www/nmc/wordpress-nmc. So we need to create it.

Every time we add a new site to custom.yml or the provisioner files, we need to reprovision VVV. To do this, you need to run

vagrant reload --provision

After that, either import the database via phpMyAdmin or WP-CLI or start from scratch.

You can modify the provision scripts if you need a special setup.

Laravel Homestead setup