Sync code changes in electron app while developing

Question

Are there any tools to live reload electron app when code is changed similar to browser-sync for web?

Whenever we change code for electron app, I am terminating existing running process and relaunching with electron . Are they any tools to reload electron app automatically when code is changed.

Answer 1

The best tool (and easiest) I've found is electron-reload:

// main.js
const electron = require('electron');
const { app, BrowserWindow } = electron;
const path = require('path');

// the first argument can be: a file, directory or glob pattern
require('electron-reload')(__dirname + '/app/index.html', {
  electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
});

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    // ...
  });
  mainWindow.setMenu(null);

  mainWindow.loadURL(`file://${__dirname}/app/index.html`);
  process.env.NODE_ENV !== 'production' && mainWindow.openDevTools();
});

Answer 2

In this case, you should take a look at development tools for NodeJS process management. My personal favorite is nodemon because you can either use config file or pass something like this:

nodemon --watch . --exec "electron ."

And it will work just fine. But again, it's my opinion, pick the right for you from the list.

Answer 3

A little late answer but I hope it helps everyone.
There is an npm module called Electromon.

npm i -g electromon [install]

Usage would be electron .\main.js [change name of main.js to your files like app.js or something. ]

Answer 4

If you directly use the command "electron .",

"nodemon": "nodemon --exec electron ."

then it will give you an error

'electron' is not recognized as an internal or external command,
 operable program or batch file.

So Use it Indirectly,

"start": "electron .",
"start:nodemon": "nodemon --watch main.js --exec npm start",

and restart your app with

npm run start:nodemon