In this article I will show you how to set up a vagrant devbox by using VirtualBox and Vagrant. But first a little background story.

The last few weeks have been pretty exciting: Because we (that’s my buddy jb and myself) are on the verge of starting a new big project at work, we’ve been looking into a bunch of “new” development technologies lately. And I basically couldn’t get rid of the “living under a stone for the past years” feeling. I’ve barely paid attention to development environments – for me it was always more like “install xampp” or make a new folder on your webserver and you’re ready to go. But jb shed some light into those dark, virtual, reachable-by-ssh places which made my php-mysql-what-else ego look pretty stupid. :D

So, for the sake of learning and not forgetting stuff I’m writing articles like this one.

Vagrant, VirtualBox and Git

Your first step is to install some useful programs – doh! VirtualBox is Oracles virtual machine, basically the “thingy-your-webserver-will-run-on”. The second little program is Vagrant. This is for managing development environments – you can create a so-called vagrantfile that contains your webservers configuration, the programs it needs to run, settings, and so on. Once created you can easily share it with colleagues, so everyone got the same development environment without doing much more than calling “vagrant up” in a console. This leads me to the last program you’ll need to install: Git. Git is a wonderful distributed version control system which is simply essential if working in teams.

Setting up the vagrant devbox

Alright, with everything installed you should have some more options in your right-click context menu like Git Init Here or Git Bash. If those options are missing, re-install Git – it happended once to me that those git options simply were gone. The next step would be to create a Vagrantfile and define your servers configuration or search for configurations on the web. There are some nice generators like rove.io out there where you simply go through the options and select what programs you’re going to need. jb set up a vagrant devbox for node.js applications and I’m using this one for our example:

Setting up a vagrant devbox – Step 1

Go into the folder you want the devbox to be in. Right click and select Git Bash, which opens a commandline. Enter git clone https://github.com/jbinder/devbox.git and hit enter. This command “clones” jb’s vagrant devbox, which basically means that it downloads this project from the github server to your computer. Now you should have a devbox folder with a couple of folders and files in it. Important is the aforementioned Vagrantfile and the www folder.

vagrant-devbox-setup

Setting up a vagrant devbox – Step 2

Next, enter cd devbox in the git bash window to get into the devbox folder. Enter vagrant up – this is the command you use to start up the virtual server. If it hasn’t already been configured (ergo: you’re starting it for the first time) it will take some time since it’s downloading all the programs your server is going to need – PHP, MySQL, and so on… so grab a cup of coffee until it’s done.

Setting up a vagrant devbox – Step 3

Let the fun begin. You’ll notice that the www folder now contains a new folder called html. This is basically your webservers root folder: Simply add a new folder for your project there and visit 127.0.0.1:10080/[folder-name] in your browser. Bazinga!

vagrant debox #2

If you got any questions or problems setting up this stuff, just drop a comment below. I’m happy to help. :)