Web - (Hot|Live) (Edit|Reload) - Auto File Sync

About

Live reloading (ie File sync) in the web means that the Browser automatically update/refresh the HTML page when you change files in your project (HTML, CSS, images, …)

List

Refresh at interval (Html / Javascript)

Reload the page at interval:

<meta http-equiv="refresh" content="10">
  • With Javascript
setInterval(function(){
  window.location.reload();
}, 10000);

Injection

The below solution works by injecting code in the page that will open a channel with the server via a web socket. The server will then signal the refresh to the browser.

Application:

Library:

How the code injection is working ?

What the basis is of a Live Reload server 1)

var wss = new SocketServer({server})
chokidar
  .watch('*.js')
  .on('change', path => {
    wss.clients.forEach(d => d.send('reload'))
  })
  • Client Side (in the HTML page)
new WebSocket(location.origin.replace(/^http/, 'ws'))
  .onmessage = () => location.reload()

Configuration

Safe Write

To enable hot reloading, you need to disable safe write in your IDE. See https://webpack.github.io/docs/webpack-dev-server.html#working-with-editors-ides-supporting-safe-write

“Safe write” means changes are not written directly to original file but to temporary one instead, which is renamed and replaces original file when save operation is completed successfully. This behaviour causes file watcher to lose the track because the original file is removed. In order to prevent this issue, you have to disable “safe write” feature in your editor.


Powered by ComboStrap