Case Study

Creating a Dashboard

Managing a bunch of client sites can quickly become overwhelming. Faced with a complex deployment methodology, it soon became necessary to establish a centralised hub to manage deployments and simplify the process.

  • Design
  • Development
  • React

The Setup

At Overture all client sites live in Git, with package management software such as Composer and Node pulling in dependencies. Capistrano handles deployment between the two primary servers — staging and production — with custom tasks to handle database and media syncing. Each server is associated to a branch — staging to develop and production to master. Instant deployment and environment parity.

illustration

The Problems

We found there were a couple of issues with this setup — for one, it still wasn’t clear which version of a site each server was running, and if the environment was up to date with its respective branch.

Secondly, we’d made the deployment process far more complex than before, with far more dependencies. If an emergency deployment was required then we’d created roadblocks.

This is where Dashboard comes in.

problems

The Groundwork

We needed a fast and modular system on which to build Dashboard. We settled on React, the current industry-favourite web-app framework.

The first step was adding a Capistrano task to create a (publicly accessible) text file with the git hash of the most recently deployed version. This way, by visiting a url you could quickly see which version of the site you were looking at. Then, using the Gitlab API, we pulled in a list of our projects and their latest commits. By comparing these we could quickly tell if an environment was up date. This gave us a list of all our sites, a list of their environments and a traffic light which indicated if they’d fallen behind.

Dashboard displayed on an iPad.

Deployment

The next big challenge was deployment. We ensured the server was setup with all the necessary dependencies that our computers had to deploy, as well as the relevant SSH keys in order to send files between servers.

Next we created a PHP script that created a random folder on the server and replicated local deployment — essentially git clone, composer install and cap env deploy. We then hooked this up to the site components in React, streaming the output into a pre with Server-Sent-Events.

~

Bonus Round

As a bonus, we decided to create our own starter Composer file generator to ease the creation of new WordPress projects. Click here to view the project.

composer

In Action

What you see is one-click deployment — what you don't see is the massive amount of time saved.