Hard refresh required for alternate template compiles.

[redders6600]

I'm having a strange issue where the first time I save changes to a jade template, the page refreshes as expected, but for subsequent saves it's getting stuck, and a manual refresh is required.

I would provide some debugging info but I have no idea where to start!

I can reproduce the issue in my skeleton: https://github.com/redders6600/writers-vanilla-brunch

Just change boilerplate.jade whilst watching with a server running...

[es128]

I was unable to reproduce the issue. Browser refreshed after each file edit. Using Chrome Stable. What browser are you using?

$ brunch new https://github.com/redders6600/writers-vanilla-brunch.git writers-vanilla-brunch
28 Oct 09:19:44 - log: Cloning git repo "https://github.com/redders6600/writers-vanilla-brunch.git" to "writers-vanilla-brunch"...
28 Oct 09:19:46 - log: Created skeleton directory layout
28 Oct 09:19:46 - log: Installing packages...
bower angular#1.2.0-rc.3    not-cached git://github.com/angular/bower-angular.git#1.2.0-rc.3
bower angular#1.2.0-rc.3       resolve git://github.com/angular/bower-angular.git#1.2.0-rc.3
bower angular#1.2.0-rc.3      download https://github.com/angular/bower-angular/archive/v1.2.0-rc.3.tar.gz
bower angular#1.2.0-rc.3       extract archive.tar.gz

> ws@0.4.25 install /Users/eshanker/Code/writers-vanilla-brunch/node_modules/auto-reload-brunch/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

bower angular#1.2.0-rc.3      resolved git://github.com/angular/bower-angular.git#1.2.0-rc.3
bower angular#1.2.0-rc.3       install angular#1.2.0-rc.3

angular#1.2.0-rc.3 bower_components/angular
  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/bufferutil.node
  SOLINK_MODULE(target) Release/bufferutil.node: Finished
  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/validation.node
  SOLINK_MODULE(target) Release/validation.node: Finished

> jade-angularjs-brunch@1.1.1 postinstall /Users/eshanker/Code/writers-vanilla-brunch/node_modules/jade-angularjs-brunch
> node setup.js postinstall

css-brunch@1.7.0 node_modules/css-brunch

javascript-brunch@1.7.0 node_modules/javascript-brunch

coffee-script-brunch@1.7.2 node_modules/coffee-script-brunch
└── coffee-script@1.6.3

clean-css-brunch@1.7.1 node_modules/clean-css-brunch
└── clean-css@1.1.6 (commander@2.0.0)

stylus@0.38.0 node_modules/stylus
├── debug@0.7.2
├── mkdirp@0.3.5
├── cssom@0.2.5
└── sax@0.5.5

auto-reload-brunch@1.7.0 node_modules/auto-reload-brunch
└── ws@0.4.25 (tinycolor@0.0.1, options@0.0.5, commander@0.6.1)

stylus-brunch@1.7.0 node_modules/stylus-brunch
├── progeny@0.1.3 (async-each@0.1.3)
├── node-sprite@0.1.1 (imagemagick@0.1.2, watch@0.5.1, underscore@1.3.1, coffee-script@1.3.3, seq@0.3.5)
└── nib@1.0.1 (stylus@0.35.1)

jade@0.35.0 node_modules/jade
├── character-parser@1.2.0
├── commander@2.0.0
├── mkdirp@0.3.5
├── transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)
├── with@1.1.1 (uglify-js@2.4.0)
├── constantinople@1.0.2 (uglify-js@2.4.1)
└── monocle@1.1.50 (readdirp@0.2.5)

jade-angularjs-brunch@1.1.1 node_modules/jade-angularjs-brunch
├── mkdirp@0.3.5
├── lodash@0.9.2
├── coffee-script@1.3.3
└── jade@0.31.2 (character-parser@1.0.2, commander@1.1.1, monocle@0.1.48, transformers@2.0.1, with@1.0.4)

bower@1.2.7 node_modules/bower
├── junk@0.2.1
├── stringify-object@0.1.7
├── abbrev@1.0.4
├── which@1.0.5
├── chmodr@0.1.0
├── osenv@0.0.3
├── graceful-fs@2.0.1
├── archy@0.0.2
├── rimraf@2.2.2
├── bower-logger@0.2.1
├── open@0.0.4
├── bower-endpoint-parser@0.2.1
├── lru-cache@2.3.1
├── nopt@2.1.2
├── retry@0.6.0
├── tmp@0.0.21
├── mkdirp@0.3.5
├── q@0.9.7
├── semver@2.1.0
├── chalk@0.2.1 (ansi-styles@0.2.0, has-color@0.1.1)
├── fstream@0.1.24 (inherits@2.0.1)
├── fstream-ignore@0.0.7 (inherits@2.0.1, minimatch@0.2.12)
├── request-progress@0.3.1 (throttleit@0.0.2)
├── glob@3.2.6 (inherits@2.0.1, minimatch@0.2.12)
├── bower-json@0.4.0 (deep-extend@0.2.6, intersect@0.0.3)
├── sudo-block@0.2.1 (chalk@0.1.1)
├── promptly@0.2.0 (read@1.0.5)
├── tar@0.1.18 (inherits@2.0.1, block-stream@0.0.7)
├── handlebars@1.0.12 (optimist@0.3.7, uglify-js@2.3.6)
├── mout@0.7.1
├── cardinal@0.4.2 (ansicolors@0.2.1, redeyed@0.4.2)
├── unzip@0.1.9 (setimmediate@1.0.1, readable-stream@1.0.17, match-stream@0.0.2, pullstream@0.4.0, binary@0.3.0)
├── request@2.27.0 (json-stringify-safe@5.0.0, aws-sign@0.3.0, forever-agent@0.5.0, tunnel-agent@0.3.0, oauth-sign@0.3.0, qs@0.6.5, cookie-jar@0.3.0, node-uuid@1.4.1, mime@1.2.11, hawk@1.0.0, http-signature@0.10.0, form-data@0.1.2)
├── update-notifier@0.1.7 (configstore@0.1.5)
├── bower-config@0.5.0 (optimist@0.6.0, mout@0.6.0)
├── inquirer@0.3.4 (mute-stream@0.0.3, async@0.2.9, lodash@1.2.1, cli-color@0.2.3)
└── bower-registry-client@0.1.5 (request-replay@0.2.0, async@0.2.9, bower-config@0.4.5)


$ cd writers-vanilla-brunch

$ brunch w -s
28 Oct 09:21:03 - info: application started on http://localhost:3333/
28 Oct 09:21:03 - info: compiled 8 files and 1 cached into 4 files in 404ms
28 Oct 09:21:43 - info: compiled boilerplate.jade and 2 cached files into dontUseMe in 70ms
28 Oct 09:21:48 - info: compiled boilerplate.jade and 2 cached files into dontUseMe in 69ms
28 Oct 09:21:53 - info: compiled boilerplate.jade and 2 cached files into dontUseMe in 81ms
28 Oct 09:21:59 - info: compiled boilerplate.jade and 2 cached files into dontUseMe in 70ms

[redders6600]

Hmm, that's strange. I'm using Chrome stable on Windows
Google Chrome 30.0.1599.101 (Official Build 227552) m

Mine compiles properly every time (i.e. the logs are the same), but it only reloads once, then it gets stuck. The favicon is replaced by chrome's loading animation and it just keeps rotating..

[es128]

So the browser got the auto-reload signal and is trying to refresh, but the built-in brunch server is not responding?

That happens on the second edit or the first? Does it eventually time out if you leave it alone? Anything in the console?

[redders6600]

Yes, just tried and it does eventually time out. There's nothing being logged to the console at all.

edit: sorry and it happens only on the second edit. Sometimes (rarely) it'll happen on the 3rd edit and not the 2nd.

[es128]

If you make an edit after the timeout?

[redders6600]

After the timeout, chrome is displaying the "web page not available" screen, so if I save a changed file again it doesn't trigger a reload.

[es128]

The spinning icon thing only happens the second time you make an edit? After the first successful refresh?

Do you have a version of this site with links to different pages? Can you navigate through the site normally after that first refresh (clicking links, etc)?

node -v?

The issue may be in https://github.com/paulmillr/pushserve (brunch's web server), maybe windows-specific.

[redders6600]

node v0.10.21

• The first time I save a file, everything words as expected: the page refreshes and the changes are visible.
• The second time I save, the page tries to refresh but gets 'stuck' trying to reload
  • I can navigate to a different page e.g. http://localhost:3333/#/someotherpage, but when I navigate back (by clicking a link, not the back button) no changes are visible.
• any subsequent saves, whether I have navigated around the site or not, cause the same 'stuck' state.

This only happens when changing jade templates, and not .stylus or .coffee files..

[es128]

If you just stay on http://localhost:3333 (no hash paths), the same thing happens? Should you possibly be using hashbang syntax (http://localhost:3333/#!/someotherpage)?

[redders6600]

The same thing is happening without any hash paths. For example if I go to just http://localhost:3333 and edit my index.jade it exhibits the same behaviour (first save, fine, second save not).

[redders6600]

In fact, it's worse. The changes are never shown - the page refreshes properly the first time but the html is the same as before.

I'm guessing the only reason the partials are working the first time then is because they're being turned into javascript which is properly reloaded.

As a test, I just disabled the cache on chrome. Now it gets stuck on first save of a .jade file.

[es128]

I'll have to try to reproduce on windows later.

My current theory is that it has to do with the jade-angularjs-brunch plugin. It bypasses the normal brunch compilation cycle, and that may be leading to collisions when the express server is trying to read files at the same time the plugin is writing them. Do you have any way to try this out without using that plugin?

Another thing you could try is to locally edit ./node_modules/auto-reload-brunch/vendor/auto-reload.js and change line 15 from window.location.reload(true); to window.setTimeout(function(){window.location.reload(true)}, 1000);. If that works, a reload delay could be made into a configurable option in this plugin, although it would be probably better handled on the server side.

[redders6600]

Just tried adding a delay to the reload as you suggested and it solved the issue. I suspect you are right about the collision with jade-angular-brunch, but am wondering why this would be windows specific?

Could it alternatively be related to the fact that I'm developing on a laptop with a fairly slow HDD and processor?

EDIT p.s. thanks for the help and the interim fix - it's making my life a lot easier!

[es128]

System slowness could definitely be a factor. And windows file system works very differently from linux/mac in ways that I know from experience can lead to these types of behavior changes, even though I am not well-versed in the low-level details.

You could probably scale that setTimeout back from a full second, experiment to see how much you really need.

Closing this, will open a new one about adding a configurable auto-reload delay.