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


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, …)


Refresh at interval (Html / Javascript)

Reload the page at interval:

<meta http-equiv="refresh" content="10">
  • With Javascript
}, 10000);


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.



How the code injection is working ?

What the basis is of a Live Reload server 1)

var wss = new SocketServer({server})
  .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()


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.

Discover More

Browser Sync serves the content, detects changes, refreshes the browser, and offers many customization's. How to use it to develop with live reloading. The reload will work: for the builtin web server...
Cross-Browser Testing tool

All cross-browser testing tool are web driver based. See the webdriver for more information. You can also open multiple browsers (desktop, mobile for responsive design) and see your change live thanks...
D3 Documentation Vscode
D3 - Dev Installation

This article describe a dev environment installation with: Webpack for Hot reloading D3 Documentation in the IDE The work and scripts are also available on GitHub. gerardnico/create-d3-app HTML...
Flask Idea Nodebug
Python Web - Flask

Flask is web framework to create web application. The idea of Flask is to build a good foundation for all applications. Everything else is up to you or extensions. Flask is just not designed for large...
React Framework - Create React App

facebookincubator/create-react-app is a React framework To enable hot reloading, you need to disable safe write. See See Change Log: facebookincubator/create-react-app/blob/master/CHANGELOG.mdChange...
Web - Build Operations / Build Pipeline

This page is the build operation for the web. A build pipeline will: transform (compile) bundle and optimize web code html, css (less, ...) Javascript (Javascript Module, React Jsx,...
WebPack - Hot Module Replacement

Hot Module Replacement is the live reloading of module functionality of WebPack.
Webpack - Dev Server

The WebPack dev is a little Node.js Express web server that implements live-reloading In the root directory (where your is), run: This will start a server, listening on connections from localhost...

Share this page:
Follow us:
Task Runner