Notes from React Helsinki August 2018 meetup

React Helsinki August 2018 meetup was hosted by at their office in Postitalo next to the Central Railway Station. Here’s my short notes from the event. To follow the community, React Helsinki has also a Facebook group.

The meetup started with Splitting React codebases for increased development speed by Hugo Kiiski from He told how their Video Editor component is separated from main frontend. Code is in monorepo managed by Lerna. More tools going to be splitted. The recording of the presentation can be seen on Vimeo. (Twitter)

Splitting React codebases for increased development speed

Second topic was live coding and Making your own Ignite generator – for React Native by Toni Ristola from Gofore. It’s useful e.g. if you do many projects in a year. The recording of the presentation can be seen on Vimeo. (Twitter)

When to use generator
When to use generator

Why build your own
Why build your own

Use GraphQL! by Mikhail Novikov showed a quick intro to GraphQL, covered the current state of its adoption and described several ways of how to move to GraphQL. GraphQL “fills the gap between client and server developer needs and values. Matching server capabilities with client requirements.” GraphQL clients to use are i.a. Apollo and Relay. See the slides for more information. The recording of the presentation can be seen on Vimeo. (Twitter)

GraphQL parts
GraphQL parts

GraphQL adoption
GraphQL adoption

As I mentioned the event has hosted by and their office in Postitalo was cosy and had nice demo room for the meetup. Also the food and beverages were nice althought the hamburger patty was a bit too raw.

Some food & drinks
Some food & drinks entrance with swings entrance with swings

WordPress theme development with Vagrant on OS X

Developing WordPress themes requires you to have either remote machine with the needed software or installing e.g. PHP and MySQL to your local machine. Although setting up the development environment (LAMP stack) in OS X is quite easy there’s also better option, to separate it from your machine and make it more like it’s on some hosting provider. And for that it was time to get to know how Vagrant works and how to utilize it for WordPress theme development on OS X. Also this way you can make separate environments for different projects. Here’s short article to get you started.

In short: We setup Homebrew to install packages, Virtualbox will be used to run an Ubuntu Linux virtual machine and then we will use Vagrant to start, stop and build the virtual machine from Vagrantfile.

Setting up Vagrant for WordPress development

Step 0: Install Homebrew

We will use Homebrew to install the needed packages on OS X. Homebrew is the missing package manager for OS X.

$ ruby -e "$(curl -fsSL"

Step 1: Install VirtualBox

You can install Virtualbox manually or by using Homebrew.

$ brew cask install virtualbox

Step 2: Install Vagrant

Vagrant is software for creating and configuring lightweight, reproducible, and portable virtual development environments. It can be seen as a wrapper around virtualization software such as VirtualBox and around configuration management software such as Ansible, Chef, Salt or Puppet. Vagrant essentially builds virtual images from references (boxes) of a type of operating system with applications and dependent software.

You can install Vagrant from Vagrant site or by using Homebrew.

$ brew install Caskroom/cask/vagrant

Step 3: Vagrantfile for WordPress environment

To get started quickly we want to start with some premade Vagrantfiles and there are multiple choices for WordPress development.

One good choice could be WordPress Theme Review VVV which also installs Theme Unit test data and other plugins to test your theme. Other simple option is to use Vagrantpress which is a packaged development environment for developing WordPress themes and modules.

  • Clone the project, $ git clone
  • Run $ vagrant plugin install vagrant-hostsupdater from command line
  • Rename the vagrantpress to the name you want for your project.
  • Navigate to the directory you just renamed.
  • Run the command $ vagrant up from the directory. It will ask your password to setup the hostname.
  • Open your browser to

Working with the environment

To log in to the local WordPress installation: The username is admin, the password is vagrant.

Your WordPress installation files can be seen in the directory you created for the VagrantPress.

You can access phpMyAdmin: with username wordpress, password wordpress.

Using Vagrant

Using Vagrant is quite simple and there’s nice Getting started guide. In short there’s couple of commands you need. Also the virtual machine is located on your home directory under ~/.vagrant.d/boxes.

To start or resume working on any project, to install every dependency that project needs, and to set up any networking and synced folders, type this in your project directory.

$ vagrant up

See your Vagrant virtual machines’ status.

$ vagrant global-status

You can ssh to your project’s machine running in Vagrant.

$ vagrant ssh

You can also ssh to Vagrant’s Linux. The password is vagrant as also is the root password.

$ ssh vagrant@ -p2222

When you’re done working for the day to suspend your VM:

$ vagrant halt

When you’re done playing around, you can remove all traces of it. Note: it also removes all the changes you made to the virtual machine, like your WordPress settings and data.

$ vagrant destroy.

If you ever have any issues with the VM, you should try to provision it with puppet again.

$ vagrant reload --provision

As Vagrant is running the virtual machines with Virtualbox you can also manage and see their status by starting Virtualbox GUI. Or using following commands.

$ VBoxManage list runningvms
$ VBoxManage list vms
$ VBoxManage controlvm <uuid> poweroff
$ VBoxManage unregistervm <uuid>