How to use grunt serve in Cloud9 IDE?

Question

In my Gruntfile.js I have tried to do this:

connect: {
  options: {
    port: process.env.PORT,
    hostname: process.env.IP,
    livereload: 35729
  }
}

I tried to run from Cloud 9 terminal and I get the following:

Running "serve" task

Running "concurrent:server" (concurrent) task

Running "connect:livereload" (connect) task Fatal error: Port 8080 is already in use by another process.

Then I have changed my Gruntfile.js to the following:

connect: {
  options: {
    port: 9000,
    hostname: process.env.IP,
    livereload: 35729
  }
}

From the terminal I get:

Running "serve" task

Running "concurrent:server" (concurrent) task

Running "connect:livereload" (connect) task Started connect web server on http://0.0.0.0:9000

Running "watch" task Waiting...

But how do I access http://0.0.0.0:9000 from Cloud 9? I have tried http://localhost:9000, http://127.0.0.1:9000, am I missing something here?

Answer 1

Apparently, you can actually get Livereload working on Cloud9 when using Apache as web-server, by proxying the websocket request to grunt-watch with "mod_proxy_wstunnel":

1) Add the following directive to /etc/apache2/mods-available/proxy_wstunnel.load

ProxyPass /livereload/ ws://127.0.0.1:35729/

2) Enable "mod_proxy_wstunnel" and it's dependency "mod_proxy"

ln -s /etc/apache2/mods-available/proxy_wstunnel.load /etc/apache2/mods-enabled/proxy_wstunnel.load
ln -s /etc/apache2/mods-available/proxy.load /etc/apache2/mods-enabled/proxy.load

3) Restart Apache

service apache2 restart

4) So far so good, now you must hardcode the websocket URL that Livereload will be using, by modifying the livereload.js script, in my particular case this was located at ~/myworkplace/grunt-contrib-watch/node_modules/tiny-lr/lib/public/livereload.js, you need to change the following line:

this._uri = "ws://" + this.options.host + ":" + this.options.port + "/livereload/";

to

this._uri = "ws://YOUR_WORK_PLACE.c9.io/livereload/";

5) Last but not least, you must reference the livereload.js script directly in your desired page, in my particular instance:

<script src="/ng-boilerplate/node_modules/grunt-contrib-watch/node_modules/tiny-lr/lib/public/livereload.js"></script>

Hope this might help someone and especially save some time :)