Hot Reloading Solution for Electron

Photo by Mohammad Rahmani on Unsplash

Classic Approach with electron-reloader

If you’re maintaining an existing project or prefer a simpler setup, electron-reloader is still a viable option.

First, install electron-reloader as a development dependency:

npm install --save-dev electron-reloader

1. Set Up Your Development Script

First, ensure your package.json contains the proper script for development mode:

For Linux/macOS:

"scripts": {
  "dev": "NODE_ENV=development electron ."
}

For Windows (Command Prompt):

"scripts": {
  "dev": "set NODE_ENV=development && electron ."
}

For Windows (PowerShell):

"scripts": {
  "dev": "$env:NODE_ENV='development'; electron ."
}

These commands set the NODE_ENV environment variable to "development", which we'll use to conditionally enable hot reloading.

If you’re developing for multiple platforms, you could install the cross-env package as a dev dependency, which provides a cross-platform way to set environment variables:

npm install --save-dev cross-env

Then use it in your scripts:

"scripts": {
  "dev": "cross-env NODE_ENV=development electron ."
}

2. Configure Hot Reloading in Your Main Process

Add this code at the very top of your main process file (typically src/main/index.js):

const { app, BrowserWindow } = require("electron");

if (process.env.NODE_ENV === "development") {
  console.log("Development mode detected -- enabling hot reload")
  try {
    require("electron-reloader")(module, {
      debug: true,
      watchRenderer: true // it watches the render
    })
    console.log("Hot reload ENABLED ✓");
  } catch (err) {
    console.error("Hot reload error:", err);
  }
}

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadFile("src/index.html");
};

app.whenReady().then(() =>{
    createWindow()
})

The key configuration here is watchRenderer: true, which ensures that changes to your renderer process files (HTML, CSS, JS) trigger reloads as well.

3. Testing Your Hot Reloading Setup

After setting up electron-reloader, start your application with:

npm run dev

Now, whenever you make changes to your main process or renderer files, the application will automatically reload to reflect those changes without requiring a manual restart. Try changing the background color or text in your HTML file to see hot reloading in action!

Changing background color with hot reloading