2

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.

Community
  • 1
  • 1
ZenMaster
  • 12,363
  • 5
  • 36
  • 59
  • You need to provide folder structure to desire goal. As above code you mention, everything is setup using yeoman generator so we need a folder structure for which we setup all configuration. – Mithlesh Kumar Nov 17 '14 at 11:32
  • For 1st point, just `server` in `grunt.registerTask('server', [...` to `node-dev` or `supervisor`. – Mithlesh Kumar Nov 17 '14 at 11:34
  • No preferable folder structure. I can't see how it is relevant at all, to be honest. The main issue here is how to, __cleanly__, inject reloading script into the node-dev "owned" server. – ZenMaster Nov 17 '14 at 16:42

2 Answers2

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

Mithlesh Kumar
  • 748
  • 7
  • 16
  • I think I may have confused you. `node-dev` is an actual _npm_ module that watches changes to _npm modules_ and reloads the server. The server itself is express-based and as such has a specific port configured. As a result, client files, like CSS, are served from that port. That is the port I need to configure in livereload. That doesn't work, naturally. – ZenMaster Nov 18 '14 at 06:10
  • `livereload: 35729` **35729** is port number here and both connect and livereload use same host which you define in `hostname: '0.0.0.0'` – Mithlesh Kumar Nov 18 '14 at 07:18
  • It seems as if I still unable to explain. You will have to put livereload manually in your HTML pages in order to achieve it. Or via Express (middleware I suppose). The application, however, runs on a different port, so you won't be able to refresh it. – ZenMaster Nov 18 '14 at 13:23
  • 1
    No livereload code inject automatically once you run grunt server – Mithlesh Kumar Nov 18 '14 at 14:18
0

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

Community
  • 1
  • 1
Dmitri Zaitsev
  • 13,548
  • 11
  • 76
  • 110