sindresorhus / electron-reloader

Simple auto-reloading for Electron apps during development

electron-reloader

Simple auto-reloading for Electron apps during development

It just works. When files used in the main process are changed, the app is restarted, and when files used in the browser window are changed, the page is reloaded.

Note that it will not work correctly if you transpile the main process JS files of your app, but it doesn't make sense to do that anyway.

Install

npm install --save-dev electron-reloader

Requires Electron 5 or later.

Usage

The following must be included in the app entry file, usually named index.js:

try {
	require('electron-reloader')(module);
} catch {}

You have to pass the module object so we can read the module graph and figure out which files belong to the main process.

The try/catch is needed so it doesn't throw Cannot find module 'electron-reloader' in production.

API

reloader(module, options?)

module

Type: object

The global module object.

options

Type: object

ignore

Type: Array<string | RegExp>

Ignore patterns passed to chokidar.

By default, files/directories starting with a ., .map files, and node_modules directories are ignored. This option is additive to those.

watchRenderer

Type: boolean
Default: true

Watch files used in the renderer process and reload the window when they change.

Setting this to false can be useful if you use a different reload strategy in the rendererer process, like HMR.

debug

Type: boolean
Default: false

Prints watched paths and when files change.

Can be useful to make sure you set it up correctly.

Tip

Using it with Webpack watch mode

Just add the source directory to the ignore option. The dist directory is already watched, so when a source file changes, webpack will build it and output it to the dist directory, which this module will detect.

Related

• electron-util - Useful utilities for developing Electron apps and modules
• electron-debug - Adds useful debug features to your Electron app
• electron-context-menu - Context menu for your Electron app
• electron-dl - Simplified file downloads for your Electron app
• electron-unhandled - Catch unhandled errors and promise rejections in your Electron app
• electron-serve - Static file serving for Electron apps

electron-reloader's Issues

Apparently Window Closes when I edit Main Electron File

I just added console.log('its not working') to index.js & app stopped. index.html works.

There is a $40.00 open bounty on this issue. Add more on Issuehunt.

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on Issuehunt to raise funds.

Support Hot Module Replacement (HMR)

https://webpack.js.org/concepts/hot-module-replacement/

Would be useful so people could totally replace their server (For example webpack-dev-server) with this module and electron-serve.

Since we have access to the window, I don't think we need all the websocket boilerplate, so we could just modify the page directly.

Some resources:
https://github.com/glenjamin/webpack-hot-middleware/blob/master/process-update.js
https://github.com/webpack/webpack-dev-server/blob/b0fa5f634e82ce942ac79f1b1371ef7f5afcdc81/client-src/live/index.js

Add ESM support

Electron 28 already has ESM support, but the library doesn't work in ESM yet.

Here's my current solution based on making a fake NodeModule:

const module = {
  filename: fileURLToPath(import.meta.url)
, children: []
}

Due to the lack of module.children, full ESM support may not be possible.

Doesn't work when main entry file is in a sub-folder

Our application has the following structure:

main
	main.js
renderer

Running the module from main.js doesn't start watching the renderer folder. That's because the code assumes the main.js file is in the root of the application.

Looking at the code the problem can be resolved by either watching the process.cwd() folder or creating an option for specifying which folder is the root of the app.

---

IssueHunt Summary

vehmloewff has been rewarded.

Backers (Total: $60.00)

• issuehunt ($60.00)

Submitted pull Requests

• #10 Watch from root

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Possible bug with ignore regex parsing?

I want to ignore changes to every directory except one. So I tried: /^(?!(web)).*/. It seems to work in theory, as tested here: https://regex101.com/r/W6WQkS/1

However, it doesn't work with your module, this fails to ignore directories other than web/:

try {
  require("electron-reloader")(module, { ignored: [/^(?!(web)).*/] });
} catch (_) {}
console.log('debug 1')
const { BrowserWindow, app } = require("electron");

I looked deeper into your code to see how you're using chokidar and isolated a pure chokidar example and that seemed to create the same problem. Created an issue with them paulmillr/chokidar#1128

When running in development, two windows appear

The first one disappears almost immediately and one/two seconds later, the second window appears. This only happens the first time I run my watch scripts. Here's what they look like:

"scripts": {
	"watch": "run-p watch:*",
	"watch:development": "rollup --config --watch",
	"watch:electron": "electron .",
	"watch:sass": "sass --watch src/app/sass:dist --style compressed"
}

In main.js:

if (isDev) {
  try {
    require("electron-reloader")(module);
  } catch (err) {
    console.log(err); // eslint-disable-line
  }
}

---

IssueHunt Summary

andrewburgess has been rewarded.

Backers (Total: $60.00)

• issuehunt ($60.00)

Submitted pull Requests

• #12 Ensure relaunch is only called once

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

When the app is reloaded the original terminal is closed

I run my Electron app using electron ./build/index.js, it logs to stdout/stderr and I also run a repl terminal. However, when using this library and any file is modified (so the app is restarted), the process running in the terminal is terminated and I no longer see logs.

Is this expected?

Delete this

Crash Reporter continually showing up

Hi!

When using the last version of Electron, after each reload/quit, I get a Crash Reporter saying the application did not quit properly.
Is there anything I can do?

can not work

i use like this

`import { webContents, ipcMain, app, BrowserWindow, protocol } from "electron"

import path from "path"
import { gitLog } from "./util/gitHash"
let xlsx = require("node-xlsx")
let fs = require("fs")

// 热更新
try {
require('electron-reloader')(module);
} catch (e) {
console.log(e,'错误');
}`

but show error

[7436:0111/155148.798:ERROR:cache_util_win.cc(20)] Unable to move the cache: 拒绝访问。 (0x5)
[7436:0111/155148.798:ERROR:cache_util.cc(145)] Unable to move cache folder C:\Users\JNPF\AppData\Roaming\toolbox\GPUCache to C:\Users\JNPF\AppData\Roaming\toolbox\old_GPUCache_000

by the way,i use ts, Whether there are other configurations

Electron app.relaunch() fails with v15.3.0 on Windows 10 x64

electron/electron#31726

I have posted an issue in the Electron repo because I thought the app.relaunch() function was broken but when I commented out the electron-reloader it started working as expected.

I obviously have no idea why this happens, but I thought it was a good thing to report it here with a reference to the Electron issue.

Thanks Sind

How to solve the problem that fsevents.node in chokidar is compiled during the compilation phase of webpack production and packaging, isn't electron-reloader dynamically imported by require?

PS: I don't want to use webpack node-loader in production environment. How to fixed it?

Electron 7.1.7 - not working

Electron 7.1.7 - not working

Add option to force relaunch always

I think it could be a good addition to add an option to force the app relaunch always including when isn't really necessary.

Background story: When using this package to refresh my angular / electron-forge app, there is a problem with trying to reload the app because I think it tries to compile the root folder instead of the index.html. But if you relaunch the app instead of refreshing it does the work correctly. See the issue electron-userland/electron-compile#233.

"Maximum call stack exceeded" with circular module references

When I tried using electron-reloader in my app, it encountered a stack overflow. I looked into the issue and it seems to be due to some circular module references in my code. In getPaths, the module graph seems to be traversed, and I am seeing this encounter cycles.

I fixed the issue temporarily locally by utilizing the paths Set that was already present:

if (!paths.has(child.filename)) {
    paths.add(child.filename);
    getPaths(child);
}

With a modification like this to getPaths, it appears to work fine.

What is the difference between this and HMR?

I'm confused what this offers if I already use HMR? I'm not too familiar with it so I know it is my misunderstanding.
It seems like it is not an alternative as you mention that it works with HMR.

Add a note to README indicating that using electron-reloader in a static script avoids problems with transpiling main electron process

My project is in Typescript so I do transpile the main process files.
It didn't work when I added the try...catch in the main module before transpilation, but I was able to add a simple script like the following and that worked.

require('./application')
try {
    const options = {
        debug: true,
        ignore: [ 'src' ]
    }
    require('electron-reloader')(module, options)
} catch (err) {
    console.log(err)
}

I require the main module after transpilation and copy this wrapper script as a static asset for development mode only.
A little node in the README could point users to this workaround.

Transpiling main process

Why does it make no sense to transpile your main process files?

Just a question!

no console output

I like the configurability so switched from electron-reload but then noticed no console output with this module. Is that expected?