Jira Courses, Training and Consulting: Sparxsys Trainings
Thanks for coming here, I hope you are enjoying learning here, I have also written some books in case you want to learn a bit more :)
If you need my help with Drupal, Linux, Jira, Scripting, Automation or want to contact me then raise a ticket for me please :) and I will get back to you, promise. At Sparxsys we provide Atlassian consultancy services, reach out to me at ravi at sparxsys dot com

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.

Similar posts

Subscribe

* indicates required

Please confirm that you would like to from Sparxsys:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices.

Want to contact me?