How to get LiveReload working with Vagrant and auto compile scss files from shared folder

Last few days are amazing. Learning so many things, especially setup of Vagrant in our company. I had few issues with the performance of Drupal running on Vagrant on windows host which I fixed yesterday. That was one milestone achieved but I didn't realized that there would be more obstacles.

We started using Omega 4 for all of our projects now and it is great. Especially compass support of SASS that enables us to design great websites in short time. The only problem is that it is not smooth to setup. If you read the Omega 4 documentation you will come to know that they have clear instructions on how to setup this stuff. I will not cover that in this blog. It is already well documented and there are plenty of articles on the internet.

I did all the setup for Omega 4 but the problem was that Live Reloading was not working and the .scss files were not compiling automatically whenever there are some changes done in them.

My current setup is Vagrant running on Windows 8.1, and guest OS is CentOS 6.5

Steps to get Live Reload working

First make sure that live reload is enabled in Drupal Omega 4 settings. Go to your Omega subtheme settings, under Development tab check the "Enable Development extension" and then under it check "Enable LiveReload". Here you would notice that LiveReload server uses port 35729. We will use it just now in the next step.

Changes in the Guardfile

You will find the Guardfile under the root of your subtheme directory. Edit it and do the following changes. We need to mention the ip address as 0.0.0.0 (I am not sure about the purpose) and the port number here.

  1. guard :livereload , :host=> '0.0.0.0', :port=> '35729' do
  2.    watch(%r{^((?!\.normalize\.).)*\.(css|js)$})
  3. end

Now enable the Port Forwarding in Vagrantfile

Add the following line to forward 35729 port from guest to host.

  1. config.vm.network "forwarded_port", guest: 35729, host: 35729

These are the changes I did and it took me 5 hours to figure out after lot of researching and hopefully this will work for you as well. Provided you are using the same environment as I am. At this moment just reload your Vagrant and try whether LiveReloading works or not.

Changes in .scss file are not detected from Windows Share, but there is a work around

I am still stuck here. If I make changes directly in CentOS VirtualBox then Guard picks up the changes immediately and .scss files are compiled when I make the changes through windows then it won't. I tried few methods but didn't succeed yet but there is a workaround which works fine.

Trick is to force the polling

  1. bundle exec guard -p -l 10

The only problem with this force polling is that it is not super fast. You have to wait for few seconds for Guard compile the .scss files, but I am still ok with it. At least it is not blocking issues.

So far loving working with Vagrant. Lovely.

Add new comment

Want to contact me?

Life begins outside your comfort zone and that is where your courage is developed". Write to me by filling this form. For living I am an Atlassian Consultant who love both Jira and Drupal. I am the author of "Mastering JIRA" and "Mastering JIRA 7" books. I Love both JIRA and Drupal (a bit more). You can Write To Me and I will get back to you as soon as I can. Have a nice day!

Social Links

Subscribe to my mailing list.

Enter your email address: