Changes in express files breaks livereload

[johngouf]

Hi there!

first of all congrats for this wonderful generator!
I noticed the following. If I make any changes to files under lib ( for express ), it does reload the browser but I get:

Oops! Google Chrome could not connect to localhost:9000

If I refresh manually it works ok with the changes made.
I know its not a big issue but thought it could be useful to know.

Thanks a lot!

[DaftMonk]

Thanks for pointing this out. For me, this only happens when I introduce a syntax error that trips up the server and breaks the livereload script. So as long as the changes you make don't cause any errors it should reload correctly.

That said, I think a better way of dealing with this would be to have jshint validate your server code before it reloads. This would prevent the server from crashing if an error was introduced but would let you know where to fix it.

I'll probably release an update to the generator that adds this, but it should be pretty simple to add to your project.

Create a .jshintrc file in the lib folder with the following options:

{
  "node": true,
  "esnext": true,
  "bitwise": true,
  "camelcase": true,
  "curly": true,
  "eqeqeq": true,
  "immed": true,
  "indent": 2,
  "latedef": true,
  "newcap": true,
  "noarg": true,
  "regexp": true,
  "undef": true,
  "strict": true,
  "smarttabs": true
}

Then in your gruntfile under the jshint task add an option for the server code:

 jshint: {
 ...
    server: {
      options: {
        jshintrc: 'lib/.jshintrc'
      },
      src: [ 'lib/{,*/}*.js']
    }
}

Finally, update the express task with the new jshint:server task.

express: {
  files: [
    'server.js',
    'lib/{,*//*}*.{js,json}'
  ],
  tasks: ['newer:jshint:server', 'express:dev'],
  options: {
    livereload: true,
    nospawn: true //Without this option specified express won't be reloaded
  }
}

I'm sure there will still be some that get through and crash the server, but that should catch most of the errors you might introduce.

Hope that helps!

[johngouf]

Hi there, thanks for the prompt response!
Unfortunately, still when I change for instance in file /lib/controllers/api.js the line with:

name : 'HTML5 Boilerplate 2',

(without syntactical errors)
it produces the error I was writing about. Refreshes the browser but with displaying the error. If you refresh manually then it works ok.
Is it possible that is something wrong with my setup? On your end it works ok this scenario?

[DaftMonk]

Hmm, that does actually work for me. So it probably is something wrong with your setup, but I'm not sure where that would be going wrong.

[johngouf]

I really can't figure out what the problem can be. I was using nodejs v.0.10.24 from nvm,
I changed this, and used the one installed from ppa for ubuntu but same issue occurs.
Everything goes smoothly both in the installation and in the generation of the project.
Could I try to check something else from my side? :(

[DaftMonk]

Well the way you describe it, the server restarts after you make a change, but it takes you to a 404 page.

What happening behind the scenes is that there's an express watch task that monitors changes in your file. When it detects a change, it restarts the server. When its finished restarting the server it triggers a livereload of your browser.

Strangely, it sounds like all of that is working for you, but that the livereload is happening before the server has finished restarting.

Maybe you could delay the livereload task for a second or two till you're sure the server has finished restarting.

In your gruntfile, try adding this to the express watch task options:

options: {
  debounceDelay: 1000,
  livereload: true,
  nospawn: true //Without this option specified express won't be reloaded
}

I don't know if debounceDelay works the way I think it does. If that doesn't work, you might want to check out the grunt-contrib-watch docs and see if theres anything else that could do the trick.

[johngouf]

Unfortunately even that option didn't do the trick. I checked a lot in the contrib-watch docs without finding anything. Also I increased a lot the debounceDelay without having any effect.
Maybe its another task which triggers the reload of the browser?
Also what node version are you using?

[DaftMonk]

It's definitely the express watch task which triggers the reload of the browser.

My version of node is 0.10.16, but that probably won't do you much good. I wish I could be of more help...

[johngouf]

Used the same node version, same behaviour.
Anyway, I will keep digging to see what is wrong with my setup and will let you know if I discover anything

[ami7ava]

I am also facing the similar problem. For now I have disabled livereload for express task. My node version is 0.10.23.

[jeef3]

When I split out the express and livereload tasks I was worried about the implications of reloading the browser just because the server has changed. In some cases this is desirable, but sometimes it is not.

As @abasak mentioned, you can change this behaviour by disabling LiveReload in the express task:

express: {
  files: [
    'server.js',
    'lib/{,*//*}*.{js,json}'
  ],
  tasks: ['newer:jshint:server', 'express:dev'],
  options: {
    livereload: true,
    nospawn: true //Without this option specified express won't be reloaded
  }
}

becomes:

express: {
  files: [
    'server.js',
    'lib/{,*//*}*.{js,json}'
  ],
  tasks: ['newer:jshint:server', 'express:dev'],
  options: {
    // livereload removed, or set to false
    nospawn: true //Without this option specified express won't be reloaded
  }
}

[kjellski]

I'm having the same issues here. If I save the server.js file, even without changes, it starts reloading, but stops immediately after the database population step. Then grunt completely hangs.

[DaftMonk]

@kjellski Really? Maybe we should consider switching from grunt-express-server to nodemon https://github.com/ChrisWren/grunt-nodemon.

Need someone to see if it fixes the problem, but it would be worth it to try.

[kjellski]

@DaftMonk unfortunately I'm pretty bad at using and configuring grunt, I've dont nothing but copy paste parts of configs together honestly. But I would like to help, can you tell me what I should do to test this? Would I just hang that task in default and see whether it works or not? :/ sorry, I've got really no clue here...