Monday, 29 April 2013

Developing Shopify Dashing on Windows with Vagrant

We've started using Shopify's Dashing gem internally so we can publicise any moving figures people are interested in. You can go from zero to great-looking-dashboard in next to no time once you understand the API. The Dashing Wiki has enough documentation and the example dashboards that ship with it are enough to communicate the usage pattern. 

This post is about the biggest stumbling block we had when starting out. We develop on Windows machines as most of what we do is .net. Dashing is a solution written in Ruby so we wanted to develop on a Linux OS as we would be deploying to Heroku to host our production dashboards.

Enter Vagrant. This a really neat tool that lets you script the creation of a virtual machine. The Vagrant script sits in the root of your project so that it is under source control and can be shared across the team. Simply open the command line at your project directory and enter vagrant up. Within minutes a virtual machine running Ubuntu in text only mode is started.

Vagrant takes care of automatically sharing the project folder on your host machine with the guest virtual machine, so that you can continue development as normal and just execute the code inside the virtual machine. The port 3030 is forwarded so that we can view the Dashboard on our local browser. This is the content of my Vagrantfile:

Vagrant.configure("2") do |config| = "precise32" :forwarded_port, guest: 3030, host: 3030

So now we have in waiting a virtual machine running our target operating system, with a synced folder and the ability to hit any website running inside of it. However, that's not quite enough for Dashing. We need to update the version of Ruby to 1.9.1 and add some other essential apps. Here are the necessary steps that might hopefully save someone a lot of time:

From the Windows command line:

c:\MyDashing> vagrant up
c:\MyDashing> putty

Configure putty correctly and ssh into the VM.
Log in with username: vagrant
Enter commands:

$ cd ../../
$ sudo apt-get update
$ sudo apt-get install ruby1.9.1-full -y
$ exit

Back in the Windows command line:

c:\MyDashing> vagrant reload
c:\MyDashing> putty

Again, ssh into the VM:

$ cd ../../

$ sudo apt-get install build-essential -y
$ sudo apt-get install nodejs -y
$ sudo gem install bundler --no-rdoc --no-ri
$ sudo gem install dashing --no-rdoc --no-ri

$ dashing new MyDashing
$ cd MyDashing
$ bundle install
$ dashing start

Now you have initialized a dashing project. You should be able to enter dashing start at the command prompt and not be met with any error messages. Navigate to http://localhost:3030/sample on your local machine and hey presto! Development can now continue on your local machine, while serving the dashboards via your virtual box.

- Make sure you update your Gemfile with any gems used in any new job you create. Then don't forget to run bundle install at the prompt!
- Any private key files or other assets required by code should reside in the root of the project.
- Keep an eye on the output when running vagrant up as Vagrant will cleverly accomodate any conflicting forwarded ports. This can affect the ports you use to ssh into the VM and view the dashboard.

P.s. I'm aware of the provisioning facilities of Vagrant, including the capability of running all of the above through a shell script during construction of the VM. However, I couldn't get it to work without including the restart so I have just left the raw commands as a the guide for now. If/when I figure it out I will update the post. However, these steps only need to be run once per machine (not every time you run vagrant up) so you might find its just about tolerable as it is.


  1. Great post! just what I was looking for (building on dashing on Windows).

  2. For me it now works without the restart.

    Using the same vagrant box ("precise32") and commands you list here.

  3. Anyone who desires to reap the benefits offered by the amazing ecommerce platform to get soaring success in his or business can seek an hire shopify developer to cater to the specific business requirements.

  4. Thanks for this informative blog, It is very useful for getting knowledge related to shopify developing.

  5. I think this article will fully complement you article. PLease continue publishing helpful topics like this. Regards, from Always Open Commerce