sindresorhus / electron-reloader Goto Github PK
View Code? Open in Web Editor NEWSimple auto-reloading for Electron apps during development
License: MIT License
Simple auto-reloading for Electron apps during development
License: MIT License
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.
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.
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
I like the configurability so switched from electron-reload
but then noticed no console output with this module. Is that expected?
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
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 has been backed by the following sponsors. Become a sponsor
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.
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.
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.
Electron 7.1.7 - not working
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 has been backed by the following sponsors. Become a sponsor
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.
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?
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
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?
Why does it make no sense to transpile your main process files?
Just a question!
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.