Matt Bailey
Designer & Developer

A Simple Vagrant Boilerplate For Frontend Development


Feeling impatient? Get straight to the code on Github →

As a designer and frontend developer I’ve been working hard over the past couple of years trying to ‘up’ my skill levels. I’ve been learning how to use development tools, such as ComposerNodeGruntBower and so on. To that end I always try to pay attention to what other ‘backend’ developers are talking about as the tools they use often end up making their way into frontend workflows.

Recently I’ve been hearing the word Vagrant bandied about the office, so I decided to find out more - and I like what I’ve found!

What is Vagrant

Basically Vagrant is a ‘thingumy’ for setting up virtual machines.

What Are The Benefits

The benefit of using virtual machines for development is that you can have a VM config (per project) that closely matches that of your production environment, which you can share with other developers on your team. This means everyone works in the same environment, making it easier to pin down issues and bugs.

It also has the added benefit of keeping your host machine clean, tidy and free of all that command line ‘cruft’ - you don’t have to install any development tools, save your code editor/IDE and your favourite terminal. Everything else is installed ‘in’ the virtual machine. This includes things such as Git, Node, Grunt etc., of which you control the versions as well.

This is very appealing to me as I often come across software/tool version issues when working on projects on different workstations.

But I Know Nothing About Sys-Admin, Will I Be Able To Use Vagrant?

Of course. I’m not a sys-admin either I’m ‘only’ a frontend developer and, while it’s true the underlying ‘stuff’ is a bit difficult to understand (for me at any rate), there are tools out there to help you – you really don’t need to know much to get things up-and-running.

I’ve been using an excellent online tool called PuPHPet to create my server ‘manifest’, the file(s) that set everything up. I’ve spent a few days familiarising myself with how things work and experimenting with the settings, and I’ve settled on what I think is a good starting point for the kinds of projects that I work on, specifically ‘CMS’ based projects (primarily use SilverStripe and Magento, but it could equally be used for WordPress, Drupal etc.). Here are the specifics:

  • Ubuntu Precise x64
  • Apache2
  • PHP 5.3
  • Composer
  • XDebug
  • MySQL
  • Node
  • Grunt
  • Bower
  • Compass

All these settings and tools can be easily changed though if you require a different set-up.

Ok I’m Convinced, Now What?

I don’t think anything else remains to be said, save that you can get my Vagrant boilerplate on Github and use it to start experimenting with yourself. The README contains full usage instructions. If you have any questions leave them here or post and issue on Github. Enjoy!

My Simple Vagrant boilerplate for frontend development on Github →