Grunt + Node app + livereload

Question

After looking around and not finding a proper answer (the closest and kind of incomplete is this: Grunt livereload with node.js application), I decided to ask.

Given:

node app, client + server (with express)

Desired:

1. ability to start the above app using node-dev or supervisor so that changes to server files reload the server
2. ability to configure grunt-contrib-watch, so that changes to client files reload the browser
3. unless it was clear from the above - both server and client are deployed with the same express server

Issues & Attempts

Despite trying various permutations of watch, connect, parallel, concurrent and more, the main issue remains - inability to inject livereload script into the same domain:port express started on.

Obviously I can configure all REST and socket calls from client to server so that they use some sort of prefix during development and deploy client and server on different ports on `127.0.0.1' or some other stuff like that, while changing it in production to be the same server.

Answer 1

Please look at following example to add files information to be watched:

grunt.initConfig({
    watch: {
        /*example Watches files for changes in JS, scss and gruntfile*/
        js: {
          files: ['<%= yeoman.app %>/<%= yeoman.scripts %>/**/*.js'],
          tasks: ['newer:jshint:all'],
          options: {
            livereload: true
          }
        },
        compass: {
          files: ['<%= yeoman.app %>/<%= yeoman.styles %>/**/*.{scss,sass}'],
          tasks: ['compass:server', 'autoprefixer']
        },
        gruntfile: {
          files: ['Gruntfile.js']
        },
        /*end example*/
        livereload: {
            files: [
                '<%= yeoman.app %>/*/*.html',
                '{.tmp,<%= yeoman.app %>}/styles/*.css',
                '{.tmp,<%= yeoman.app %>}/scripts/*.js',
                '<%= yeoman.app %>/images/*.{png,jpg,jpeg}'
            ],
            tasks: ['livereload']
        }
        // ..cut some parts
    },
    connect: {
        livereload: {
            options: {
                port: 9000,
                middleware: function (connect) {
                    return [
                        lrSnippet,
                        mountFolder(connect, '.tmp'),
                        mountFolder(connect, 'app')
                    ];
                }
            }
        }
    }
    // ..cut some parts
});

grunt.registerTask('node-dev', [ // Now you run task using command grunt node-dev
    'clean:server',
    'coffee:dist',
    'compass:server',
    'livereload-start',
    'connect:livereload',
    'open',
    'watch'
]);

As per issue you have mention i.e. inability to inject livereload script, I think it is an issue related with connect configuration. Now grunt-contrib-livereload is deprecated and now include in watch, so might be liverealod snippet code is creating an issue here. So please try below code, I implement this in one of my project using yeoman.

connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: '0.0.0.0',
        livereload: 35729
      },
      livereload: {
        options: {
          open: true,
          base: [
            '.tmp',
            '<%= yeoman.app %>'
          ]
        }
      }
    }

I wish this could help you. Thanks

Answer 2

See this repository and my answer here for a simple Gulp based solution.