Yeoman, AngularJs and Nitrous.IO

If you are looking to develop a Yeoman scaffolded AngularJS using the marvelous Nitrous.io cloud development environment here is a quick helper on getting the grunt serve webserver working.

Nitrous Issues

There are three things that falter with grunt serve:

  1. Livereload requires websockets which aren't supported by default on Nitrous.
  2. The default port doesn't match the ones proxied by Nitrous.
  3. The hostname of localhost won't proxy through Nitrous to the internet.

Solution

To get the server working, simply edit the Gruntfile.js file and change the following section to look like :

// The actual grunt server settings
connect: {
  options: {
    port: 3000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: '0.0.0.0',
    livereload: false
  },

The fixes to this section are:

  1. Disable livereload by setting livereload property to false
  2. Change to a proxied port by setting port property to 3000
  3. Allowing non-localhost serving by setting hostname to 0.0.0.0

Once you have saved the modifications try out grunt serve and use the Preview - Port 3000 button on the ide to navigate to your site.

Angular on Nitrous.io