17

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.

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
Sathya Vikram
  • 325
  • 1
  • 2
  • 9
  • If you are using React you can have a look at: https://github.com/geowarin/electron-hot-loader – Tom C Aug 31 '16 at 13:01

4 Answers4

52

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.

Govind Rai
  • 14,406
  • 9
  • 72
  • 83
G07cha
  • 4,009
  • 2
  • 22
  • 39
  • 2
    I was using create-react-app for the frontend (renderer side) of things and most electron reload solutions were about reloading frontend and the backend (main process). This was perfect, just added a new script in package json, `"electron:watch": "nodemon --watch * --exec 'electron .'"`. – Shivek Khurana Sep 11 '18 at 16:28
  • Just one note here, in the `package.json` the exact line would be `"dev": "nodemon --watch . --exec 'electron . --debug'",` - with watching {dot} location and switched single-double-quotes. – boldnik May 07 '19 at 09:15
  • 7
    improving boldnik's answer it should be `"dev": "nodemon --watch . --exec \"electron . --debug\""` – King Charles Jun 26 '19 at 13:37
  • This works! With market solution - there were build issues with having sqlite3 in my package.json – npr Sep 25 '19 at 09:25
  • I added this command to package.json "dev": "nodemon --watch . --exec \"webpack && electron . --debug\"" to my Electron(Angular 5 + TypeScript) project electron application is started but it is not restarting the electron app or updating the changes on UI. Anyon e can help me on this! – Ravindra Vairagi Nov 26 '19 at 07:53
  • 2
    By default, it checks for JS, MJS, and JSON. If you want nodemon to watch other file types, such as HTML and CSS, you can run: `nodemon --watch . --exec "electron . --debug" -e js,json,html,css` – Gregory R. Mar 28 '20 at 08:26
  • A problem I have is that in each restart VS Code looses focus as the electron app gains it. As a consequence in practice it is not usable with auto save on. – Siavoshkc Oct 19 '22 at 07:34
  • Update 2023 `--debug` is invalid. Please use `--inspect` instead – Ismoil Shokirov Feb 10 '23 at 19:18
11

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();
});
Jonatas Walker
  • 13,583
  • 5
  • 53
  • 82
3

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
ASCARIS
  • 53
  • 5
2

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. ]

kapreski
  • 761
  • 5
  • 19
Aham Ekakin
  • 21
  • 1