Strange browser behaviour when trying to use browser-refresh

Hi guys,

Thanks for all your great work! I'm really excited trying to get this browser refresh to work. My marko hot reload works perfectly, so this is my last step for true mastery :)

Here is my main .marko index page with <browser-refresh enabled="true" /> at the end of body.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="semantic.min.css">
    <script src="semantic/dist/semantic.min.js"></script>
    <title>Article Title</title>
  </head>
  <body>
    <h1>My Article here and there! BLIP BLAP SWIP SNAP</h1>
    <h2>HELLO MIKE</h2>
    <browser-refresh enabled="true" />
  </body>
</html>

And my server config:

    start: function(appContainer) {
      let port = options.port || this.default.port;
      let refresh = options.refresh || this.default.refresh;
      let reload = appContainer.reload || options.reload || this.default.reload;

      if (refresh) {
        require('marko/browser-refresh').enable();
        console.log('Marko browser refresh enabled!!');
        console.log('Install browser-refresh');
        console.log('npm install browser-refresh-taglib --save');
        console.log('npm install browser-refresh --global');
        console.log('Start server with: $ browser-refresh server.js');
        console.log('Add <browser-refresh enabled="true" /> to just before </body> in your main page template');
      }

      if (reload) {
        // configure marko hot reload :) works!!!
        let markoConfig = require('./markoConfig');
        markoConfig({views: appContainer.views});
      }

      app.listen(port, function() {
        console.log(`Marko appplication ready on port ${port}`);
        // for browser refresh!
        if (process.send) {
          process.send('online');
        }
      });

This is what I get when I start my server using browser-refresh

11:01 $ browser-refresh test
[browser-refresh] Watching: /Users/kristianmandrup/repos/markoa/markoa-tester
[browser-refresh] Ignore rule: **/node_modules
[browser-refresh] Ignore rule: **/node_modules/**
...
[browser-refresh] Ignore rule: dist
[browser-refresh] App started (pid: 47276)
Missing static: in options for static mw
Added static dir:public
Added static dir:dist
Added static dir:semantic/dist
Marko browser refresh enabled!!
Install browser-refresh
npm install browser-refresh-taglib --save
npm install browser-refresh --global
Start server with: $ browser-refresh server.js
Add <browser-refresh enabled="true" /> to just before </body> in your main page template
Watching: .marko templates in /Users/kristianmandrup/repos/markoa/markoa-tester/apps for hot reload!!
Marko appplication ready on port 4005
[browser-refresh] Server is ready. Watching files for changes.
[browser-refresh] Triggering refresh of client pages...
[browser-refresh] Refresh triggered
[browser-refresh] File has been changed: apps/index/page/index.marko.js
[browser-refresh] Restarting app...
[browser-refresh] App started (pid: 47279)
[browser-refresh] File has been changed: apps/index/page/index.marko.js
[browser-refresh] Restarting app...
[browser-refresh] App started (pid: 47280)
...
[browser-refresh] Waited 1500ms without receiving "online" from child process. Page refresh triggered over WebSockets connection.
[browser-refresh] Triggering refresh of client pages...
[browser-refresh] Refresh triggered

Timed out :(

The browser is not automatically started on the index page at localhost:4005 (should it?). If I try to go there directly, it simply reverts to the previous page. It can't seem to load the real server, doing some kind of back history jump instead. Any ideas? I expect it would work similar to BrowserSync but I was unable to make that work as well... might try again now that marko hot reload works however... :P But I'd rather get your awesome browser refresh solution working. I know I'm SO close, just one obvious thing I'm missing or misunderstanding I'm sure :)

Thanks as always guys :) Cheers!!! Kristian

PS: I created a jade-marko Gulp transformer for you ;)

https://github.com/kristianmandrup/jade-marko

Hi @kristianmandrup, the culprit is that your application is going into an infinite restart because your ignore rules aren't quite right. The following file is being modified during startup and that is triggering a restart before the app is ready:

[browser-refresh] File has been changed: apps/index/page/index.marko.js
[browser-refresh] Restarting app...
[browser-refresh] App started (pid: 47279)
[browser-refresh] File has been changed: apps/index/page/index.marko.js
[browser-refresh] Restarting app...
[browser-refresh] App started (pid: 47280)

By default, browser-refresh will ignore any files listed in your .gitignore. Either that is not working properly or you are missing *.marko.js in your .gitignore. I find it helpful to use a separate .browser-refresh-ignore file for browser-refresh. For example:

.browser-refresh-ignore

/node_modules
/.cache
/build
*.marko.js

This files should be in the root of the project. For example: marko-js-samples/marko-widgets-lasso/.browser-refresh-ignore

Finally, we recently pushed a new version of browser-refresh (and some of its dependencies) because we needed to upgrade to the latest version of chokidar and that introduced some issues along the way. I am pretty sure we have all of the issues sorted out, but I recommend installing the latest:

npm install browser-refresh --global

Hope that solves your problem!

I'll have to checkout out jade-marko this morning. Thanks for sharing and thanks for contributing!

patrick-steele-idem / browser-refresh

Strange browser behaviour when trying to use browser-refresh #16