javascriptelectronnodemonlivereload

Sync code changes in electron app while developing

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.

Solution

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