title: Reloading browser for every routes ( Express + gulp + Browsersync )
body: <p>I have build a simple express web server generated with express generator as follow:  </p>
  
  <pre><code>express test -ejs
  </code></pre>
  
  <p>Everything is working fine so far and I have the following folder (with a few changes):  </p>
  
  <p><img src="https://i.stack.imgur.com/lyNug.png" alt="app folder"> </p>
  
  <p>What I want to achieve now is that:<br>
  - for every file I'm working on in "/routes/*.js" and "./*.js", on save reload the server and the browser<br>
  - for every file in "/views" and "/public", on save only reload the browser  </p>
  
  <p>for that I have set up a gulp file.js with browser-sync in proxy mode as follow:    </p>
  
  <pre><code>var server  = require('gulp-develop-server');
  var bs      = require('browser-sync').create();  
  
  (some tasks for checking js and less ...)  
  
  var options = {
    server: {
      path: './bin/www',
      execArgv: ['--harmony']
    },
    bs: {
      proxy: {
        target: 'http://localhost:5000',
        middleware: function (req, res, next) {
          console.log(req.url);
          next();
        }
      },
      files: ['./public/**/*', './views/*'], // files to watch with bs instantly (.ejs &amp; .css)
      logLevel: 'debug'
    }
  };
  
  gulp.task('start', ['js','less'], function () {
    server.listen(options.server, function (error) {
      if (!error)
        bs.init(options.bs);
    });
  
    gulp.watch('./less/*.less', ['less-nonstop']);
  
    gulp.watch(['./*.js', './routes/*.js'], ['restart:forjs']);
  
    gulp.watch('./views/*').on('change', bs.reload);
  });
  </code></pre>
  
  <p>The proxy is working fine and every pages on <a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a> give me the same page as <a href="http://localhost:5000" rel="nofollow noreferrer">http://localhost:5000</a> (my express server is configured to listen on port 5000).</p>
  
  <p>Now my problem is that browsersync doesn't always refresh my browser on reload (even if browser sync gets the reload event) in fact it refresh only when I'm on the first route path specified in app.js. For example if I have the following code in app.js:  </p>
  
  <pre><code>app.use('/bonjour', routes);
  app.use('/users', users);
  </code></pre>
  
  <p>Browser-sync will only reload the browser on <a href="http://localhost:3000/bonjour" rel="nofollow noreferrer">http://localhost:3000/bonjour</a>, but not on <a href="http://localhost:3000/users" rel="nofollow noreferrer">http://localhost:3000/users</a> or any other paths. Even if browser-sync gets the reload event (as I can check in the console log). It seems that when I'm displaying any other pages than the first route specified in app.js my browser is like "disconnected" from browser-sync.<br>
  Why is that ? and How could I fix it ?</p>