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.

Renitarenitent

If you are using React you can have a look at: github.com/geowarin/electron-hot-loader – House

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();
});

Yon

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.

Expediency

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 .'". – Isochronism

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. – Kickback

improving boldnik's answer it should be "dev": "nodemon --watch . --exec \"electron . --debug\"" – Laue

This works! With market solution - there were build issues with having sqlite3 in my package.json – Culdesac

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! – Elstan

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 – Tennies

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. – Chromatic

Update 2023 --debug is invalid. Please use --inspect instead – Botello

Answer 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

Benzol

Answer 4

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

Crucial

Answer 5

I am using swc to compile the typescript files into js files so I fixed the reload with this commands

"start": "electron .",
"build": "swc build ./src -d dist/app",
"dev": "nodemon --watch src --ext ts --exec \"npm run build && npm run start\"",

npm run dev is going to watch for file changes inside src/ folder and then is going to compile the files and then re-open electron app.

Hardener