Using Live Reload with Phpstorm remote project

I recently set up an old machine to run a LAMP stack on Ubuntu for my WordPress development.
As mentioned before, I use Phpstorm for development with xdebug. This works fine for remote debugging, so I can set up my local dev sites on my Ubuntu machine and still develop on my more powerful Windows 8 PC.

One thing I couldn’t figure out was how to get Live Edit to work with remote projects. This is a feature of the Phpstorm IDE which works a lot like Live Reload by adding an extension to Chrome and monitoring file changes. Unfortunately, it doesn’t seem to be supported for remote projects.
I finally found a workaround to this issue and not having to refresh my browser window every time I make a Sass change is a great productivity boost.

First, here’s my config.rb file, which is inpsired by Chris Coyier’s in that it moves the style.css after compilation.
Mine copies it to my local WordPress theme root and then moves it to the remote server via a mapped drive.

On my local machine, I installed Ruby and Sass/Compass gems and just ‘compass watch’ with the command line tool. I used to use but found out it didn’t find all compilation errors.
So, when I save a Sass file, it compiles and moves the style.css to the required locations.

On my Ubuntu machine, to which I connect with Teamviewer (I installed the desktop version of Ubuntu because it’s easier for me to manage), I installed Guard and Guard Livereload and the Chrome LiveReload extension.

If you need to install Guard LiveReload on Ubuntu, I suggest following the steps described in this issue

sudo apt-get install rubygems ruby-dev
sudo gem install guard-livereload

I then just changed the Guardfile configuration to watch CSS files and presto, Live reloading!

I suggest checking out this video by Jeffrey Way