11

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?

forestclown
  • 1,582
  • 4
  • 25
  • 39

3 Answers3

9

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

Rsx200
  • 91
  • 1
  • 2
  • thanks and +1! but, why not use the grunt options instead of editing the node_module: https://github.com/gruntjs/grunt-contrib-watch#optionslivereload (you can set host and port) – Tom Carchrae May 03 '15 at 17:42
  • 1
    I had Chrome and https problems so changed step 4 to: this._uri = “ws” + (this.options.https ? “s” : “”) + “://.c9.io/livereload/”; – metalwood Jul 04 '15 at 07:25
6

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.

Brady Dowling
  • 4,920
  • 3
  • 32
  • 62
basdw
  • 486
  • 2
  • 1
2

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.

basdw
  • 486
  • 2
  • 1
  • 2
    I use grunt to compile sass, run js hint, and etc. and it will create a web server to serve the html (hence grunt serve). Whenever I change something, it will automatically goes through the process (compile sass..and etc.) again and update the html (similar to live preview) via "Livereload" which uses another port. (default at port 35729). If I use "live preview" that cloud 9 provides I will not able to use Grunt. – forestclown Sep 06 '14 at 09:37
  • Regardless, Cloud 9 is still top notch and will move on to be a paying customer, but hopefully C9 will provide multiple ports soon, or probably there is another way to use livereload – forestclown Sep 06 '14 at 09:38