2

Does anyone know of a plugin or extension that will auto refresh the browser when my project files change?

I'm using supervisor to restart my node server. but hitting refresh every time I want to make a small change is kinda annoying :/

The browser i'm using is the latest version of Chrome on OSX and my editor is Sublime Text 2.

Keva161
  • 2,623
  • 9
  • 44
  • 68

4 Answers4

1

I wired up gulp and gulp-watch to notify my browser-side javascript to reload the page, whenever I change front-end javascript, html, etc...

Something like....

Primus  = require 'primus'
http    = require 'http'
logging = require './logging'

logSpark = (spark, message) -> 
  logging.logBlue('Spark ' + spark.id + ' from ' + spark.address.ip + ' ' + message + ' (now ' + sparks + ' total sparks active)')

# Start sparks server
server = http.createServer().listen(3000)
sparkServer = new Primus(server, { transformer: 'websockets' })
sparkServer.save('./public/script/primus.js');

logging.logBlue 'Sparks server listening on port ' + 3000 + '....'

sparks = 0

# Log spark connections
sparkServer.on('connection', (spark) -> 
  sparks += 1
  logSpark(spark, 'connected on port ' + spark.address.port))

sparkServer.on('disconnection', (spark) ->
  sparks -= 1
  logSpark(spark, 'disconnected'))

exports.broadcast = () -> sparkServer.write('refresh') # arbitrary message text here

And in gulpfile.js:

watch({glob: "public/*"}, function() {
    clientRefresh.broadcast()
});

Plus in the html:

  <head>
    <script type='text/javascript' src='/script/main.js'></script>
    <script src="/script/primus.js"></script>
    <script>
      var primus = new Primus('http://localhost:3000');

      primus.on('data', function message(data) {
        console.log('@@@ refreshing by gulp ' + data + ' request @@@');
        document.location.reload(true);         
        });
    </script>
  </head>

I am not familiar with supervisor, but I use nodemon to automatically restart my project's back-end, and have a script that does that plus it starts gulp, which takes care of both types of automatic restart (back-end with nodemon, and front-end with the above).

matanster
  • 15,072
  • 19
  • 88
  • 167
1

I made a wrapper around node watch facilities for the purpose of refreshing a web browser on file changes. If you're on OS X then this solution could be a one liner for you.

npm install -g watchme

Will install the wrapper. Then save this script somewhere, for example as ~/refresh.applescript...

# ~/refresh.applescript
tell application "Chrome" to tell the active tab of its first window
    reload
end tell

Then you use watchme to watch specific folder/file/regex on files for any changes. When it detects a change, you execute the applescript to refresh. This essentially simulates the refresh on save that you're looking for, and is totally editor independent (ie, doesn't matter if on Sublime/Vim/Emacs, you're still changing the file)

watchme app views web -e "osascript ~/refresh.applescript"

The watchme program can be used a bit more expressively, as you can use javascript regex's to match on any files in your project, of particular types. Use watchme --help to have a look at the other features.

Lawrence Jones
  • 955
  • 6
  • 14
0

You could have your node server hold a connection open (i.e. a websocket), and write some code on your webpage so that when that connection dies (the node process restarts), the page calls window.location.reload()

kzahel
  • 2,765
  • 1
  • 22
  • 31
0

This answer shows a way to automate the task of reloading the extension. The illustrated technique can be used with a custom Grunt task, an onSave hook in youe editor or whatever suits you.

This other answer shows a way to reload the extension along with a tab (useful when you use content scripts).

Community
  • 1
  • 1
gkalpak
  • 47,844
  • 8
  • 105
  • 118