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
  }
}


        

Answer 1

You can use any port, when it is used for local/loopback connections. From outside your workspace only one port is accessible (at this moment that is, C9 is considering multiple ports). I'm not too familiar with this livereload, sorry. It seems that grunt needs to spawn a browser as well? That will not run on C9.

But why would you not use the 'live preview' that Cloud9 provides? Just open any html page, click Preview and select 'Live preview'. All changes to css, html will be applied immediately in the preview frame.

Answer 2

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 :)

Answer 3

Update: On Cloud9, you can use ports 8080, 8081, and 8082 to make this work. For details and an example, you can look at Multiple Ports.

---

In Cloud9, port 8080 is the only externally accessible port, so please change 9000 to 8080. The port is in use by another process, which should be stopped first. Use:

kill -9 $(lsof -i:8080 -t)

and restart grunt. That will work.