How to use live reload in your Electron Project

Many web developers that works with frameworks like ReactJS or Angular, tend to implement a bundler like Webpack that includes a lot of utilities to make the development process smoother and faster. One of the most useful features of Webpack is the hot reloading capability that updates the file that were modified in your project without updating the entire state of your application but the one that changed.

Although hot reloading isn't available yet for Electron, you can implement a live reloading feature using an open source module. Live reloading reloads or refreshes the entire app when a file changes. So for example if you were using some dynamic navigation element (like a list with JavaScript) and you are in some tab of it and decide to make a change on your JS code, live reloading would restart the app and load the app back to the initial item on your navigation element.

1. Install electron-reload

Electron Reload is the simplest way to load contents of all active Browser Windows within electron when the source files change. So it implements a live reloading feature on your project. To install this module in your electron project, switch with your terminal to the directory of your electron project and execute the following command:

npm install electron-reload

Most of the other solutions to achieve a live reload are too complicated and require time to implement, for example to implement an HTTP server, then to configure sockets etc. Too much stuff for a "simple task". For more information about this library, please visit the official repository at Github here.

A. Implement live reload for your content

If you are not modifying JavaScript that handles Electron but only your own code (frontend), then the live reload for your content will be enough. All that you need to is to require the electron-reload module with the path of the folder of your project where once a file changes, will trigger the live reload. With a default project, you can do this on your main.js file after the electron module is required:

const electron = require('electron')

// Enable live reload for all the files inside your project directory
require('electron-reload')(__dirname);

That should be enough for most of the cases. The previous code however refreshes only WebContents of all BrowserWindows. So if you want to have a hard reset (which means starting a new electron process), check the next step.

B. Implement live reload for electron and content

If you want a hard reset (starting a new electron process) you can just pass the path to the electron executable in the options object. For example if you already have electron installed you could just do in your main.js file:

const electron = require('electron')

// Enable live reload for Electron too
require('electron-reload')(__dirname, {
    // Note that the path to electron may vary according to the main file
    electron: require(`${__dirname}/node_modules/electron`)
});

And when you make changes in the JS files that handle Electron code or your frontend code, the application will be reloaded (hard reload only when is code of Electron).

Happy coding !