rezach / secure-electron-template Goto Github PK
View Code? Open in Web Editor NEWThe best way to build Electron apps with security in mind.
License: MIT License
The best way to build Electron apps with security in mind.
License: MIT License
I cannot access the renderer UI hosted by the Web pack dev server within a Chrome browser because the main Electron process is adding the preload script. Is there a way to continue debugging renderer UI processes in Chrome via the We pack dev server please?
I have an app ready which I did with react-cra, I'm trying to package it with the electron as a desktop application, Can I remove CSP?
Uncaught ReferenceError: global is not defined
at jsonp chunk loading:42
at bundle.js:106116
at startup:6
Hi,
I anticipate I'm not an Electron expert.
I am using secure-electron-template
as a valid and strong starting point for my application.
The issue I am having is with the store.
I understand the data-flow for secure-electron-store
but I'm struggling to make main
reading it.
I need to read the app configuration (options such as "Start at login") and set them in the tray menu. This means it has to happen at the app bootstrap and can't wait for the window (or React app) to render.
I have tried in many ways, even triggering a useConfigInMainRequest
from the main
file but with no avail and I am now a bit lost.
How can I achieve it by keeping the best practices?
PS: I know this is not the best place where to ask for implementation help but for issues. However, I haven't found any other forum where to ask.
Thanks,
Mauro
styled-components.browser.esm.js:133 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.
It is unable to add style now.
I tried to add
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({
responseHeaders: {
'Content-Security-Policy': ["default-src 'self' 'unsafe-inline' 'unsafe-eval'"],
...details.responseHeaders,
},
});
});
But still can't get around this.
I tried to execute the production version of the app. Running on macOS 10.15.6, node.js v14.11.0 and npm v6.14.8.
npm install
npm run prod
It fails with the following error:
$ npm run prod
> [email protected] prod .../secure-electron-template
> npm run prod-build && electron .
> [email protected] prod-build .../secure-electron-template
> cross-env NODE_ENV=production npx webpack --mode=production --config ./webpack.production.js
merge is not a function
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prod-build: `cross-env NODE_ENV=production npx webpack --mode=production --config ./webpack.production.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prod-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! .../.npm/_logs/2020-09-23T20_23_36_242Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prod: `npm run prod-build && electron .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! .../.npm/_logs/2020-09-23T20_23_36_271Z-debug.log
Running npm run dev
works fine.
Any ideas what could cause this error?
Im getting this error over and over:
"Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js
Also, React Dev Tools is not working, I tried a lot of different ways:
and of course electron-devtools-installer
because it already came with the template, and was still throwing this error.
It doesn't break the application, but I still haven't managed to use React Dev Tools with this template. I also barely touched the template. (only removed redux related stuff because I won't use it)
Thanks!
Edit:
Also, another problem that I'm having is: running yarn dev opens electron, but it only loads the app when I manually reload.
When run the program in prod mode nothing is rendered and the screen is blank
Just cloned and tried to install with npm.
(base) marco@pc01:~/webMatters/electronMatters$ git clone https://github.com/reZach/secure-electron-template.git
Cloning into 'secure-electron-template'...
remote: Enumerating objects: 405, done.
remote: Counting objects: 100% (405/405), done.
remote: Compressing objects: 100% (322/322), done.
remote: Total 1552 (delta 120), reused 298 (delta 70), pack-reused 1147
Receiving objects: 100% (1552/1552), 4.84 MiB | 6.79 MiB/s, done.
Resolving deltas: 100% (641/641), done.
(base) marco@pc01:~/webMatters/electronMatters$ cd secure-electron-template/
(base) marco@pc01:~/webMatters/electronMatters/secure-electron-template$ npm i
npm ERR! code ENOENT
npm ERR! syscall chmod
npm ERR! path /home/marco/webMatters/electronMatters/secure-electron-template/node_modules/@doyensec
/electronegativity/dist/index.js
2021-02-18T08_54_40_729Z-debug.log
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, chmod '/home/marco/webMatters/electronMatters/secure-electron-
template/node_modules/@doyensec/electronegativity/dist/index.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /home/marco/.npm/_logs/2021-02-18T08_54_40_729Z-debug.log
npm install
npm run dev
[wait for application to load]
[click "X" to close window]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `concurrently "npm run dev-server" "cross-env NODE_ENV=development electron ." -k`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Is there a way to get the dev scripts to exit cleanly?
I've been toying with this excellent template and moving our own work to more closely replicate yours.
While looking for a way to make this compatible with the Webpack DLL plugins I was looking through the HTML Webpack plugin's options and noticed there's an option to inject the <base />
tag.
https://github.com/jantimon/html-webpack-plugin#base-tag
PS: Any thoughts on DLL compatibility? I'm not sure this is still relevant on Webpack 5 so I didn't want to make an issue, but we're using Webpack 4 and I don't see any way to make it work so far.
Thanks again for the share!
various errors. .babelrc missing, wrong case on all paths
for such merticulous documentation .. one would have thought you would have the basics working
but anyway thanks for sharing...
yarn
as a package manager does not currently work for the project. If you are using yarn, you'll have to follow these steps to install dependencies.
npm i
yarn import
yarn
Then, delete package.lock.json from the project.
--
You will get bonus points for helping resolve this bug (and all the gratitude of others who want to use yarn
with this project 😄).
Hi there.
I have a beginners question. I managed to follow you example and am receiving data from the main process in my renderer process. But I can only access it within the window.api.receive function and I just can't figure out how to make it accessible to the rest of the renderer functions.
Can you give me a quick hint on how to make the data available outside the receive function?
Thanks a lot!
When try to pack solution with npm run dist-windows
inside folder: dist/win-unpacked
not exsist folder: app/localization/locales
with subfolder and file translation but if I open application (selected english language for example) and show page that present a traslation string, file: dist/win-unpacked/app/localization/locales/en/translation.missing.json
has been created with key and value.
Which best way to include app/localization/locales
folder inside dist/win-unpacked
(for example in windows build)?
Love this template! Not only did it make me feel more comfortable writing a secure Electron app, but it also helped solidify some fundamental Electron concepts.
I have run into a problem that I can't seem to nail down. Using this template, I cannot remove an event listener from an IpcRenderer
channel by using .off
or .removeListener
. As long as the listener functions are in scope, they continue to listen and receive messages.
With all the debugging I have done, I am either missing something fundamental or I am running into a cloning/copying issue and my function name is getting lost. Disclaimer, I am running an Angular application under Electron which may contribute to weirdness.
Angular Service
import { Injectable } from '@angular/core';
import { Observable, Subject, of, merge } from 'rxjs';
import { filter, map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class InputFileService {
private _channelName = 'input-file';
constructor() { }
getInputFileData(): Observable<string> {
if (window.electron) {
const responseSubjet = new Subject<string>();
function onReceive(...args: any[]): void {
responseSubjet.next(args[0]);
responseSubjet.complete();
window.electron.stopReceiving('input-file', onReceive);
}
window.electron.receive(this._channelName, onReceive);
return merge(
responseSubjet.asObservable(),
of(window.electron.send(this._channelName))
).pipe(
filter(value => !!value), // double negative to force check truthiness
map(value => value as string)
);
}
return of();
}
}
preload.js
const {
contextBridge,
ipcRenderer
} = require('electron');
const ALLOWED_CHANNELS = [
'input-file',
'context-menu'
];
contextBridge.exposeInMainWorld('electron', {
send: (channel, ...args) => {
// whitelisted channels only
if (ALLOWED_CHANNELS.includes(channel)) {
ipcRenderer.send(channel, ...args);
}
},
receive: (channel, callback) => {
// whitelisted channels only
if (ALLOWED_CHANNELS.includes(channel)) {
ipcRenderer.on(channel, (_, ...args) => {
// deliberately protect `event` as it includes `sender`
callback(...args);
});
}
},
stopReceiving: (channel, listener) => {
// whitelisted channels only
if (ALLOWED_CHANNELS.includes(channel)) {
ipcRenderer.off(channel, listener);
}
},
once: (channel, callback) => {
// whitelisted channels only
if (ALLOWED_CHANNELS.includes(channel)) {
ipcRenderer.once(channel, (_, ...args) => {
// deliberately protect `event` as it includes `sender`
callback(...args);
});
}
},
sendSync: (channel, ...args) => {
// whitelisted channels only
if (ALLOWED_CHANNELS.includes(channel)) {
return ipcRenderer.sendSync(channel, ...args);
}
},
});
Window extension
declare global {
interface Window {
electron: {
send: (channel: string, ...args: any[]) => void,
receive: (channel: string, callback: (...args: any[]) => void) => void,
stopReceiving: (channel: string, listener: (...args: any[]) => void) => void,
once: (channel: string, listener: (...args: any[]) => void) => void,
sendSync: (channel: string, ...args: any[]) => any;
};
}
}
While running under the Visual Studio Code debugger, if I set a breakpoint on the .off
line in preload.js
, the name
property of the listener
function is empty string. It seems like my named function onReceive
is getting passed as an anonymous function somewhere. If I just use once
instead, the listener is removed as expected.
Uncaught Error: Cannot find module 'fs'
at webpackMissingModule (bundle.js:1115)
at Module../app/src/core/root.jsx (bundle.js:1115)
at webpack_require (bootstrap:789)
at fn (bootstrap:100)
at Module../app/src/index.jsx (index.jsx:1)
at webpack_require (bootstrap:789)
at fn (bootstrap:100)
at Object.1 (log.js:59)
at webpack_require (bootstrap:789)
at bootstrap:856
npm ERR! code ENOENT
npm ERR! syscall chmod
npm ERR! path /home/adelino/Documentos/dev/electron/secure-electron-template/node_modules/@doyensec/electronegativity/dist/index.js
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, chmod '/home/adelino/Documentos/dev/electron/secure-electron-template/node_modules/@doyensec/electronegativity/dist/index.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
problema de incompatibilidade com o modulo @doyensec/electronegativity
(base) marco@pc01:~/webMatters/electronMatters/secure-electron-template$ yarn
yarn install v1.22.5
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix
package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning,
remove package-lock.json.
[1/4] Resolving packages...
warning @doyensec/electronegativity > cheerio > [email protected]: Use cheerio-select instead
warning webpack-dev-server > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less
dependencies.
warning webpack-dev-server > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure
binaries. Upgrade to fsevents 2.
warning webpack-dev-server > chokidar > braces > snapdragon > source-map-resolve > [email protected]: https://github.com
/lydell/resolve-url#deprecated
warning webpack-dev-server > chokidar > braces > snapdragon > source-map-resolve > [email protected]: Please see ì
https://github.com/lydell/urix#deprecated
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "immutable@^3.8.1 || ^4.0.0-rc.1".
warning " > [email protected]" has unmet peer dependency "history@^4.7.2".
warning " > [email protected]" has incorrect peer dependency "react@^16.4.0".
warning " > [email protected]" has unmet peer dependency "seamless-immutable@^7.1.3".
[4/4] Building fresh packages...
success Saved lockfile.
$ electron-builder install-app-deps
• electron-builder version=22.9.1
• loaded configuration file=package.json ("build" field)
Done in 27.20s.
(base) marco@pc01:~/webMatters/electronMatters/secure-electron-template$ yarn run dev
yarn run v1.22.5
$ concurrently --success first "npm run dev-server" "cross-env NODE_ENV=development electron ." -k
[0]
[0] > [email protected] dev-server
[0] > cross-env NODE_ENV=development webpack serve --config ./webpack.development.js
[0]
[1] (node:7535) ExtensionLoadWarning: Warnings loading extension at /home/marco/.config/secure-electron-template
/extensions/lmhkpmbekcpmknklioeibfkpmmfibljd: Unrecognized manifest key 'commands'. Unrecognized manifest key
'homepage_url'. Unrecognized manifest key 'page_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest
key 'update_url'. Permission 'notifications' is unknown or URL pattern is malformed. Permission 'contextMenus' is unknown or
URL pattern is malformed. Permission 'tabs' is unknown or URL pattern is malformed. Cannot load extension with file or
directory name _metadata. Filenames starting with "_" are reserved for use by the system.
[1] (node:7535) ExtensionLoadWarning: Warnings loading extension at /home/marco/.config/secure-electron-template
/extensions/fmkadmapgofadopljbjfkapdkoienihi: Unrecognized manifest key 'browser_action'. Unrecognized manifest key
'minimum_chrome_version'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name
_metadata. Filenames starting with "_" are reserved for use by the system.
[1] Added Extension: React Developer Tools
[1] [7535:0212/180505.625283:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180505.625531:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[0] ℹ 「wds」: Project is running at http://localhost:40992/
[0] ℹ 「wds」: webpack output is served from /
[0] ℹ 「wds」: Content not from webpack is served from /home/marco/webMatters/electronMatters/secure-electron-template
/app/dist
[1] [7535:0212/180506.625544:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180507.625522:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180508.625524:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180509.625823:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[0] ✖ 「wdm」: asset bundle.js 3.52 MiB [emitted] (name: main) 1 related asset
[0] asset main.css 238 KiB [emitted] (name: main) 1 related asset
[0] asset index.html 517 bytes [emitted]
[0] Entrypoint main 3.75 MiB (4.07 MiB) = main.css 238 KiB bundle.js 3.52 MiB 2 auxiliary assets
[0] runtime modules 28.9 KiB 16 modules
[0] modules by path ./node_modules/ 3.21 MiB (javascript) 237 KiB (css/mini-extract)
[0] javascript modules 3.2 MiB 255 modules
[0] json modules 12.7 KiB
[0] modules by path ./node_modules/browserify-sign/browser/*.json 2.23 KiB 2 modules
[0] css ./node_modules/css-loader/dist/cjs.js!./node_modules/bulma/css/bulma.css 237 KiB [code generated]
[0] modules by path ./app/ 27.9 KiB (javascript) 585 bytes (css/mini-extract)
[0] javascript modules 27.8 KiB 17 modules
[0] css modules 585 bytes 3 modules
[0] ./app/src/constants/routes.json 140 bytes [built] [code generated]
[0] optional modules 30 bytes [optional]
[0] buffer (ignored) 15 bytes [optional] [built] [code generated]
[0] crypto (ignored) 15 bytes [optional] [built] [code generated]
[0] util (ignored) 15 bytes [built] [code generated]
[0]
[0] ERROR in ./node_modules/@msgpack/msgpack/dist.es5+esm/utils/utf8.mjs 1:37-44
[0] Module not found: Error: Can't resolve 'process/browser' in '/home/marco/webMatters/electronMatters/secure-electron-
template/node_modules/@msgpack/msgpack/dist.es5+esm/utils'
[0] Did you mean 'browser.js'?
[0] BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
[0] (probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
[0] The extension in the request is mandatory for it to be fully specified.
[0] Add the extension to the request.
[0] resolve 'process/browser' in '/home/marco/webMatters/electronMatters/secure-electron-template/node_modules/@msgpack
/msgpack/dist.es5+esm/utils'
[0] Parsed request is a module
[0] using description file: /home/marco/webMatters/electronMatters/secure-electron-template/node_modules/@msgpack
/msgpack/package.json (relative path: ./dist.es5+esm/utils)
[0] Field 'browser' doesn't contain a valid alias configuration
[0] resolve as module
[0] /home/marco/webMatters/electronMatters/secure-electron-template/node_modules/@msgpack/msgpack/dist.es5+esm
/utils/node_modules doesn't exist or is not a directory
[0] /home/marco/webMatters/electronMatters/secure-electron-template/node_modules/@msgpack/msgpack/dist.es5+esm
/node_modules doesn't exist or is not a directory
[0] /home/marco/webMatters/electronMatters/secure-electron-template/node_modules/@msgpack/msgpack
/node_modules doesn't exist or is not a directory
[0] /home/marco/webMatters/electronMatters/secure-electron-template/node_modules/@msgpack/node_modules doesn't
exist or is not a directory
[0] /home/marco/webMatters/electronMatters/secure-electron-template/node_modules/node_modules doesn't exist or is not
a directory
[0] looking for modules in /home/marco/webMatters/electronMatters/secure-electron-template/node_modules
[0] existing directory /home/marco/webMatters/electronMatters/secure-electron-template/node_modules/process
[0] using description file: /home/marco/webMatters/electronMatters/secure-electron-template/node_modules/process
/package.json (relative path: .)
[0] using description file: /home/marco/webMatters/electronMatters/secure-electron-template/node_modules/process
/package.json (relative path: ./browser)
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /home/marco/webMatters/electronMatters/secure-electron-template/node_modules/process/browser doesn't exist
[0] /home/marco/webMatters/electronMatters/node_modules doesn't exist or is not a directory
[0] /home/marco/webMatters/node_modules doesn't exist or is not a directory
[0] /home/marco/node_modules doesn't exist or is not a directory
[0] /home/node_modules doesn't exist or is not a directory
[0] /node_modules doesn't exist or is not a directory
[0] @ ./node_modules/@msgpack/msgpack/dist.es5+esm/Decoder.mjs 59:0-86 612:30-52 613:21-33 616:21-33
[0] @ ./node_modules/@msgpack/msgpack/dist.es5+esm/index.mjs 8:0-40 9:0-19
[0] @ ./node_modules/secure-electron-store/lib/index.js 1:26-53
[0] @ ./app/src/pages/motd/motd.jsx 4:0-83 18:26-48 35:26-44
[0] @ ./app/src/core/routes.jsx 6:0-38 22:17-21
[0] @ ./app/src/core/root.jsx 4:0-30 20:41-47
[0] @ ./app/src/index.jsx 5:0-31 12:36-40
[0]
[0] webpack 5.21.2 compiled with 1 error in 4288 ms
[0] ℹ 「wdm」: Failed to compile.
[1] [7535:0212/180510.625586:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180511.625474:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180512.625776:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180513.625580:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180514.625761:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180515.625603:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180516.625457:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180517.625635:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
[1] [7535:0212/180518.625847:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source:
devtools://devtools/bundled/extensions/extensions.js (1)
How to solve the problem?
Running from a file:///
origin is insecure, for example. A simple solution
OS: Windows 7 and Linux if you use yarn
Full error text:
bundle.js:2644 Uncaught Error: Cannot find module 'process/browser'
at webpackMissingModule (bundle.js:2644)
at Module../node_modules/@msgpack/msgpack/dist.es5+esm/utils/utf8.mjs (bundle.js:2644)
at __webpack_require__ (bootstrap:21)
at fn (hot module replacement:61)
at Module../node_modules/@msgpack/msgpack/dist.es5+esm/Encoder.mjs (bundle.js:1582)
at __webpack_require__ (bootstrap:21)
at fn (hot module replacement:61)
at Module../node_modules/@msgpack/msgpack/dist.es5+esm/encode.mjs (bundle.js:2231)
at __webpack_require__ (bootstrap:21)
at fn (hot module replacement:61)
webpackMissingModule | @ | bundle.js:2644
-- | -- | --
| ./node_modules/@msgpack/msgpack/dist.es5+esm/utils/utf8.mjs | @ | bundle.js:2644
| __webpack_require__ | @ | bootstrap:21
| fn | @ | hot module replacement:61
| ./node_modules/@msgpack/msgpack/dist.es5+esm/Encoder.mjs | @ | bundle.js:1582
| __webpack_require__ | @ | bootstrap:21
| fn | @ | hot module replacement:61
| ./node_modules/@msgpack/msgpack/dist.es5+esm/encode.mjs | @ | bundle.js:2231
| __webpack_require__ | @ | bootstrap:21
| fn | @ | hot module replacement:61
| ./node_modules/@msgpack/msgpack/dist.es5+esm/index.mjs | @ | bundle.js:2274
| __webpack_require__ | @ | bootstrap:21
| fn | @ | hot module replacement:61
| ./node_modules/secure-electron-store/lib/index.js | @ | index.js:1
| __webpack_require__ | @ | bootstrap:21
| fn | @ | hot module replacement:61
| ./app/src/pages/motd/motd.jsx | @ | bundle.js:7236
| __webpack_require__ | @ | bootstrap:21
| fn | @ | hot module replacement:61
| ./app/src/core/routes.jsx | @ | bundle.js:7032
| __webpack_require__ | @ | bootstrap:21
| fn | @ | hot module replacement:61
| ./app/src/core/root.jsx | @ | bundle.js:6990
| __webpack_require__ | @ | bootstrap:21
| fn | @ | hot module replacement:61
| ./app/src/index.jsx | @ | bundle.js:7085
| __webpack_require__ | @ | bootstrap:21
| (anonymous) | @ | startup:4
| (anonymous) | @ | startup:6
I get an Uncaught ReferenceError: required is not defined at index.js:5
and Uncaught TypeError: Cannot read property 'receive' of undefined at index.html:62
when starting my fresh electron forge app with your security ugrade from newtoelectron.md
. I suppose there is something wrong with my preload.js but can't really understand what since I just . I will probably just clone the actual template but still thought I should post this.
Here is the preload.js:
const {
contextBridge,
ipcRenderer
} = require("electron");
contextBridge.exposeInMainWorld(
"api", {
send: (channel, data) => {
let validChannels = ["toMain"];
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
receive: (channel, func) => {
let validChannels = ["fromMain"];
if (validChannels.includes(channel)) {
ipcRenderer.on(channel, (event, ...args) => func(...args));
}
}
}
);
Here is the index.html snippet:
<body>
<script>
// Called when message received from main process
window.api.receive("fromMain", (data) => {
console.log(`Received ${data} from main process`);
});
// Send a message to the main process
window.api.send("toMain", "some data");</script>
</body>
Here is my index.js:
const {
app,
BrowserWindow,
ipcMain
} = require('electron');
const path = require('path');
const fs = require('fs');
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
app.quit();
}
let win;
async function createWindow() {
win = new BrowserWindow({
width: 1280,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
enableRemoteModule: false,
preload: path.join("src", "preload.js")
}
});
win.loadFile(path.join("src", "index.html"));
win.webContents.openDevTools();
};
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
ipcMain.on("toMain", (event, args) => {
fs.readFile("path/to/file", (error, data) => {
win.webContents.send("fromMain", responseObj);
});
});
A user has left a comment that it would be good to prove out each of the security recommendations is properly implemented in this template.
Figure out the best way to do this.
Hi @reZach,
First off, this is an awesome looking template. Thanks to you and everyone who's contributed on this. Kudos to you all.
I was wondering if there was a slightly simpler version of this template, as my skill set is a bit out-dated, and I am completely unfamiliar with react / redux.
Is there any chance you might have a version of this template that still has the security features but doesn't have the react/redux parts? Or, possibly could you point me in the direction of how to remove the react / redux so I can just use older stuff (html5 / jquery, etc etc).
Thank you!
~Nick
I came across this issue just now which makes a good point about nonce
reuse due to it being defined at build time.
I also wonder if it wouldn't be better to set a CSP from the main
process to ensure it will apply to any newly created windows? Doing it from within Electron would allow for setting nonce
at runtime rather than build time, and additionally would allow for users to access the nonce
for packages they use which need the value, like Emotion (and I assume Styled-Components.)
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
details.responseHeaders['Content-Security-Policy'] = cspString;
callback({ responseHeaders: details.responseHeaders });
});
Hey I'm extremely new to Electron and I've come across a few of your posts on stack overflow about proper ways to expose Node modules/packages so you can use them in your app. So I wanted to give your template a go hoping it would start me on a good path, but I can't seem to figure out where to start.
In the readme, it says "Click the 'Use this template' button to get started." Of course though when you click that button it just takes you to the button source in the repository. I can't find any other buttons in the readme to click.
While helpful, reading the other documents in the docs folder I haven't been able to find a starting point in there either. Architecture.md and app.md/src.md are especially good.
But like...
Do I just clone the repo. and start modifying files?
What files from the root are required after I get up and running - clearly I don't need your readme, or code of conduct documents, or the license, etc... what can I "clean up" so I have only my apps required stuff?
There will be commands for building and development such as npm run dev which is in the little blurb that the "click this button to start" text is in, but what other commands are there?
Thanks for your work on this, there is a lot of comments in the code that I can see will help me understand how an Electron app is put together. Just need to get started.
It only comes up after I reload.
https://github.com/reZach/secure-electron-template/blob/master/app/electron/main.js#L215
Removing it leads to no change in behavior - but attempts to navigate the page away are blocked properly either way.
Hey there, I'm getting started with electron and happened to come across your repository and have read most of the documentation on your packaged modules.
I'm having some trouble with rendering images from a selected directory in the FileSystem. Currently, I'm using the menu to create a dialog that lets me choose a directory. I'm then using IPC to send the information related to those files to the renderer thread. This information currently consists of...
However, when attempting to load the image through a file://
URL I get the following error: Not allowed to load local resource:
I then decided I could try to load all of the image data and send the Buffer
over IPC to be stored in my Redux Reducer, however as you can imagine this is quite slow compared to on-demand reading. However, these buffers can't be rendered without encoding them in base64 so it causes even more performance loss.
Just wondering what you would recommend for this? I'm basically making a miniature file explorer (albeit inside of a project directory) that serves as the asset selection component of my game's map editor.
The best-idea I've had with the workarounds I've found is to use something like imagemagick on the main thread to resize and encode the images and keep thumbnails in base64 format in the reducer, this isn't optimal, but it's the only solution I've come up with for the time being.
This however, is a problem when it comes to rendering the world inside of PixiJS as I need the image at full scale. I guess around this point I could use IPC again to request the full image in Base64 format and then render it. But I feel like this makes the app feel a lot less responsive.
EDIT: I wasn't really sure where to ask this, but since most recommendations include disabling security features, I assumed this was the best place.
It is said that
target: 'web', // Our app can run without electron
in webpack.config.js
But when I tried npm run dev-slim
, it gives :
TypeError: window.api is undefined
This seems unavoidable since you are to import i18n from '../localization/i18n.config';
which needs window.api
to communicate with the backend.
Even I change the "close" event handler to:
win.on('closed', event => {
event.preventDefault();
});
The win
object still got destroyed, because I can change "activate" handler to this:
app.on('activate', () => {
if (win.isDestroyed()) {
createWindow();
}
});
And it will recreate the window. This means, though win
is not null
, it is actually destroyed.
And this resulted in the following error:
Uncaught Exception:
Error: Object has been destroyed
at BrowserWindow.<anonymous> (/xxx/node_modules/i18next-electron-fs-backend/lib/index.js:1:2472)
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61:3)
Hi,
since you are using https://github.com/reZach/secure-electron-template/blob/master/app/electron/protocol.js which has GPL(2) inside, I think this implies that the whole solution should be GPL(2).
I have read a few articles about it(no expert in law) but this is the conclusion I got, according to https://www.quora.com/What-are-the-key-differences-between-the-GNU-General-Public-license-and-the-MIT-License this is repo is actually the "derivative work" that means you can not put MIT but only GPL(2). https://www.google.com/search?q=gpl+derivative+work&source=lmns&bih=766&biw=1440&rlz=1C5GCEM_enUS918US918&hl=en&sa=X&ved=2ahUKEwjyzLjGpv_sAhXNhqQKHbRdBCQQ_AUoAHoECAEQAA
The audit
command for Electronegativity is a great addition! A minor issue though is that yarn audit
is already built into Yarn, and because yarn audit
is equal to yarn run audit
that means this will interfere with Yarn.
Running yarn audit
ignores the command in the package.json in favor of the built-in command.
You should also avoid exposing any IPC objects directly to the DOM from the preload script, though without ContextIsolation
it's trivial to escape the sandbox using prototype pollution attacks.
There's a couple different ways to approach this, my solution is detailed here but certainly isn't the only way to address the problem.
hi there,
I’m new to electron and want to build a small, quick and simple electron app relying only on JavaScript.
Is there any way to get your cool template without all the react overhead i don't need?
Do you know about any forks or similar, you can recommend?
Thanks in advance :)
Hi, I'm relatively new to Electron and I've never used electron-builder.
So I'm not sure is it a question for FAQ or a feature request, but it would be cool to know how to use TypeScript with this template.
Hi,
First, I'd like to thank you for the enormous amounts of work it must have taken to make this basic boiler plate project, I truly appreciate it!
I cloned the project on a Windows machine (10, latest) and ran the npm run dist-windows
command. (after an npm install
of course)
I did absolutely no further changes.
When I try running the resulting installer, I get this error:
I'd appreciate any help in the matter, I assume I did something wrong, and I'd like to know why, I've literally started looking into this whole Electron thing today.
Windows version: 10.0.0.18362 Build 18362
NPM version: 6.14.4
Node version: 12.16.3
Thanks.
First of all: Thank you for this project :)
Second of all: I'm new to Electron (this being my second app) so I'm most likely doing something wrong.
npm: 7.5.3, node 15.8.0
I ran into some road blocks trying to start a fresh project. All below is of a vanilla checkout from the template (I've done no changes yet):
The first was that @doyensec/electronegativity ^1.8.1 fails to install properly on OS X[1] (at least my version). Given that it's only a day old it's probably some compatibility. I resolved it by removing electronegativity from package.json and installing 1.8.0 globally. It will probably sort itself out since it's a downstream issue.
However, when I run ´npm run dev` I get the following in the electron window:
While it takes the 10 seconds for webpack to compile. If I then refresh the page (CTRL+R) after it's been compiled it runs like a charm.
Given that I am new to Electron I'm not sure if this is intended behaviour or not :)
[1]:
WIN-HVPUU8BOK0U:test bivald$ npm install @doyensec/[email protected]
npm ERR! code ENOENT
npm ERR! syscall chmod
npm ERR! path /Users/xxxx/test/node_modules/@doyensec/electronegativity/dist/index.js
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, chmod '/Users/.../node_modules/@doyensec/electronegativity/dist/index.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
[2]
secure-electron-template-master myusername$ npm run dev
> [email protected] dev
> concurrently --success first "npm run dev-server" "cross-env NODE_ENV=development electron ." -k
[0]
[0] > [email protected] dev-server
[0] > cross-env NODE_ENV=development webpack serve --config ./webpack.development.js
[0]
[1] (node:87131) ExtensionLoadWarning: Warnings loading extension at /Users/myusername/Library/Application Support/secure-electron-template/extensions/lmhkpmbekcpmknklioeibfkpmmfibljd: Unrecognized manifest key 'commands'. Unrecognized manifest key 'homepage_url'. Unrecognized manifest key 'page_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest key 'update_url'. Permission 'notifications' is unknown or URL pattern is malformed. Permission 'contextMenus' is unknown or URL pattern is malformed. Permission 'tabs' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
[1] (node:87131) ExtensionLoadWarning: Warnings loading extension at /Users/myusername/Library/Application Support/secure-electron-template/extensions/fmkadmapgofadopljbjfkapdkoienihi: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'minimum_chrome_version'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
[1] Added Extension: React Developer Tools
[1] [87131:0211/150957.101784:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/150957.102619:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[0] ℹ 「wds」: Project is running at http://localhost:40992/
[0] ℹ 「wds」: webpack output is served from /
[0] ℹ 「wds」: Content not from webpack is served from /Users/myusername/Downloads/secure-electron-template-master/app/dist
[1] [87131:0211/150958.309152:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/150959.364427:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151000.848240:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151001.417003:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151002.417035:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151003.547594:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[0] ℹ 「wdm」: asset bundle.js 4.03 MiB [emitted] (name: main) 1 related asset
[0] asset main.css 238 KiB [emitted] (name: main) 1 related asset
[0] asset index.html 517 bytes [emitted]
[0] Entrypoint main 4.26 MiB (4.68 MiB) = main.css 238 KiB bundle.js 4.03 MiB 2 auxiliary assets
[0] runtime modules 28.9 KiB 16 modules
[0] modules by path ./node_modules/ 3.71 MiB (javascript) 237 KiB (css/mini-extract)
[0] javascript modules 3.69 MiB 285 modules
[0] json modules 12.8 KiB
[0] modules by path ./node_modules/browserify-sign/browser/*.json 2.23 KiB 2 modules
[0] css ./node_modules/css-loader/dist/cjs.js!./node_modules/bulma/css/bulma.css 237 KiB [code generated]
[0] modules by path ./app/ 27.9 KiB (javascript) 585 bytes (css/mini-extract)
[0] javascript modules 27.8 KiB 17 modules
[0] css modules 585 bytes 3 modules
[0] ./app/src/constants/routes.json 140 bytes [built] [code generated]
[0] optional modules 30 bytes [optional]
[0] buffer (ignored) 15 bytes [optional] [built] [code generated]
[0] crypto (ignored) 15 bytes [optional] [built] [code generated]
[0] util (ignored) 15 bytes [built] [code generated]
[0] webpack 5.21.1 compiled successfully in 6243 ms
[0] ℹ 「wdm」: Compiled successfully.
[1] [87131:0211/151004.355034:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151005.551551:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151006.451596:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151007.408898:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151008.721513:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151009.668266:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151010.695874:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151011.681174:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151012.684542:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151013.686433:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151014.355381:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151015.851809:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151016.355426:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151017.355711:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151018.355957:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151019.168291:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151020.421169:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
When I run the following commands
git clone https://github.com/reZach/secure-electron-template .
npm install
npm run dev
the electron app appears but shows a blank white screen and many errors in the console:
security-warnings.ts:179 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
(anonymous) @ security-warnings.ts:179
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/index.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/encode.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/Encoder.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/utils/utf8.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/ExtensionCodec.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/ExtData.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/timestamp.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/utils/int.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/utils/typedArrays.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/decode.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/Decoder.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/utils/prettyByte.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/CachedKeyDecoder.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/decodeAsync.js.map
DevTools failed to parse SourceMap: chrome-error://chromewebdata/Users/athenawisdoms/test/node_modules/@msgpack/msgpack/dist/utils/stream.js.map
What might be the problem here? Thanks!
System:
I apologize, this is not exactly an issue. Just a request for advice.
I am having issues in my app using the "app://" protocol.scheme.
Do you have any suggestion on good resources to help me get this setup?
Thanks!
Sandbox will be a property on the BrowserWindow in the future (?) hopefully. When it is in place, enhance the template to use it. Using sandbox will force ipc communication between the renderer and main processes. Even though that's how the template is built now, it feels better to force our decisions by the framework than by our own designs.
When this is implemented, copy the documentation from here and write up some documentation to verify we are in sandbox mode.
What are your thought on changing the bable preset to enable use of async/await with the template.
Great work on integrating all the must have security things in one place.
This is something every electron app should have. Unfortunately I don't really use react everywhere, especially with Redux. I wanted to create vanillajs electron apps.
Can we have a standard boilerplate without hard dependency on any framework? So that people who want to work with Vue or Angular will be able to just integrate themselves. And people who want to use it without framework are free to do so.
If creating another repo is harder, maybe we can just mention the steps to remove framework from existing app.
path.normalize
doesn't work the way you'd think it does and leaves open the possibility of path traversal, it should instead be path.resolve
:
https://github.com/reZach/secure-electron-template/blob/master/app/electron/protocol.js#L54
I tried to add React Material-UI to the project template.
This is how it looks in package.json
(by simply following the installation routine on material-ui page):
"dependencies": {
...
"@material-ui/core": "^4.9.5",
"@material-ui/icons": "^4.9.1",
"@material-ui/styles": "^4.9.0",
...
}
And in one of the components simply used material button:
... (ommited other react imports)
import Button from '@material-ui/core/Button';
...
const Component = () => {
return (
<Button variant="contained" color="primary">
Hello World!
</Button>
)
}
Somehow, I seem to hit unsolvable error similar to this issue.
jss.esm.js:1712 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' 'nonce-qahp5MvuRSU3PA6LfMc+Vg=='". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.
I tried to modify this in webpack.development.js
:
new CspHtmlWebpackPlugin({
'base-uri': ["'self'"],
'object-src': ["'none'"],
'script-src': ["'self'"],
'style-src': ["'self' 'unsafe-inline'"], // Added unsafe-inline
'frame-src': ["'none'"],
'worker-src': ["'none'"],
}),
but it had no effect.
Is there a way to get Material-UI working along with this template? I feel like I'm terribly missing something trivial, but I don't know what else to try. Thanks in advance.
$ npm run dist-windows
[email protected] dist-windows C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master
npm run prod-build && electron-builder --windows
[email protected] prod-build C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master
cross-env NODE_ENV=production npx webpack --mode=production --config ./webpack.production.js
Hash: 5f880b068b91abf62e55
Version: webpack 4.44.2
Time: 7719ms
Built at: 2020-10-09 18:34:24
Asset Size Chunks Chunk Names
bundle.js 1.07 MiB 0 [emitted] [big] main
bundle.js.map 1.55 MiB 0 [emitted] [dev] main
index-prod.html 522 bytes [emitted]
main.css 1.99 KiB 0 [emitted] main
main.css.map 965 bytes 0 [emitted] [dev] main
Entrypoint main [big] = main.css bundle.js main.css.map bundle.js.map
[7] ./app/src/constants/routes.json 134 bytes {0} [built]
[8] (webpack)/buildin/global.js 472 bytes {0} [built]
[14] (webpack)/buildin/module.js 497 bytes {0} [built]
[17] ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js + 3 modules 70.8 KiB {0} [built]
| 4 modules
[70] ./node_modules/react-i18next/dist/es/index.js + 4 modules 15 KiB {0} [built]
| 5 modules
[133] ./app/localization/i18n.config.js 918 bytes {0} [built]
[138] multi ./app/src/index.jsx 28 bytes {0} [built]
[154] ./app/localization/whitelist.js 2.11 KiB {0} [built]
[159] ./app/src/pages/welcome/welcome.css 39 bytes {0} [built]
[267] ./app/src/pages/motd/motd.css 39 bytes {0} [built]
[268] ./app/src/pages/localization/localization.css 39 bytes {0} [built]
[270] ./app/src/pages/undoredo/undoredo.css 39 bytes {0} [built]
[272] ./app/src/core/root.css 39 bytes {0} [built]
[273] ./app/src/index.jsx + 52 modules 181 KiB {0} [built]
| ./app/src/index.jsx 530 bytes [built]
| ./app/src/core/root.jsx 3.74 KiB [built]
| ./app/src/redux/store/store.js 1.62 KiB [built]
| ./app/src/core/routes.jsx 4.24 KiB [built]
| ./app/src/redux/reducers/rootReducer.js 607 bytes [built]
| ./app/src/pages/welcome/welcome.jsx 4.32 KiB [built]
| ./app/src/pages/motd/motd.jsx 5.74 KiB [built]
| ./app/src/pages/localization/localization.jsx 3.95 KiB [built]
| ./app/src/pages/undoredo/undoredo.jsx 8.5 KiB [built]
| ./app/src/pages/contextmenu/contextmenu.jsx 5.07 KiB [built]
| + 43 hidden modules
[274] ./node_modules/i18next/dist/esm/i18next.js + 10 modules 76.7 KiB {0} [built]
| 11 modules
+ 266 hidden modules
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
bundle.js (1.07 MiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (1.08 MiB)
main.css
bundle.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child HtmlWebpackCompiler:
1 asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./app/src/index-prod.html 232 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!app/src/core/root.css:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./app/src/core/root.css 534 bytes {0} [built]
+ 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!app/src/pages/contextmenu/contextmenu.css:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./app/src/pages/contextmenu/contextmenu.css 594 bytes {0} [built]
+ 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!app/src/pages/localization/localization.css:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./app/src/pages/localization/localization.css 614 bytes {0} [built]
+ 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!app/src/pages/motd/motd.css:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./app/src/pages/motd/motd.css 689 bytes {0} [built]
+ 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!app/src/pages/undoredo/undoredo.css:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./app/src/pages/undoredo/undoredo.css 679 bytes {0} [built]
+ 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!app/src/pages/welcome/welcome.css:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./app/src/pages/welcome/welcome.css 449 bytes {0} [built]
+ 1 hidden module
ÔÇó electron-builder version=22.8.1 os=10.0.18362
ÔÇó loaded configuration file=package.json ("build" field)
ÔÇó packaging platform=win32 arch=x64 electron=10.1.3 appOutDir=dist\win-unpacked
ÔÇó downloading url=https://github.com/electron/electron/releases/download/v10.1.3/electron-v10.1.3-win32-x64.zip size=77 MB parts=8
ÔÇó downloaded url=https://github.com/electron/electron/releases/download/v10.1.3/electron-v10.1.3-win32-x64.zip duration=1m3.324s
ÔÇó downloading url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1
ÔÇó downloaded url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration=23.73s
ÔÇó building target=MSI arch=x64 file=dist\YourProductName 5.1.6.msi
ÔÇó building target=nsis file=dist\YourProductName Setup 5.1.6.exe archs=x64 oneClick=true perMachine=false
ÔÇó downloading url=https://github.com/electron-userland/electron-builder-binaries/releases/download/wix-4.0.0.5512.2/wix-4.0.0.5512.2.7z size=2.2 MB parts=1
ÔÇó downloading url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z size=1.3 MB parts=1
Ô¿» Get "https://github-production-release-asset-2e65be.s3.amazonaws.com/65527128/ef212b60-b8f8-11e7-9ab4-004e6174b0d5?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20201009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20201009T163652Z&X-Amz-Expires=300&X-Amz-Signature=ac0f34a7baf00b2bdab0f3ffa7fd56116cbf215676899239d2ec91fe55659703&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=65527128&response-content-disposition=attachment%3B%20filename%3Dwix-4.0.0.5512.2.7z&response-content-type=application%2Foctet-stream": dial tcp 52.216.152.68:443: connectex: Une tentative de connexion a ├®chou├® car le parti connect├® nÔÇÖa pas r├®pondu convenablement au-del├á dÔÇÖune certaine dur├®e ou une connexion ├®tablie a ├®chou├® car lÔÇÖh├┤te de connexion nÔÇÖa pas r├®pondu.
github.com/develar/app-builder/pkg/download.(*Part).doRequest
Y:/Documents/app-builder/pkg/download/Part.go:108
github.com/develar/app-builder/pkg/download.(*Part).download
Y:/Documents/app-builder/pkg/download/Part.go:47
github.com/develar/app-builder/pkg/download.(*Downloader).DownloadResolved.func1.1
Y:/Documents/app-builder/pkg/download/downloader.go:155
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2
Y:/Documents/app-builder/pkg/util/async.go:68
runtime.goexit
c:/go/src/runtime/asm_amd64.s:1373
Ô¿» Get "https://github-production-release-asset-2e65be.s3.amazonaws.com/65527128/10518a80-10f6-11ea-8d2f-403bab81b4cd?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20201009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20201009T163652Z&X-Amz-Expires=300&X-Amz-Signature=d575549958ef3cdb71e302676b336e4b28e2c122aa4fed56aafc0989958468f9&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=65527128&response-content-disposition=attachment%3B%20filename%3Dnsis-3.0.4.1.7z&response-content-type=application%2Foctet-stream": dial tcp 52.216.152.68:443: connectex: Une tentative de connexion a ├®chou├® car le parti connect├® nÔÇÖa pas r├®pondu convenablement au-del├á dÔÇÖune certaine dur├®e ou une connexion ├®tablie a ├®chou├® car lÔÇÖh├┤te de connexion nÔÇÖa pas r├®pondu.
github.com/develar/app-builder/pkg/download.(*Part).doRequest
Y:/Documents/app-builder/pkg/download/Part.go:108
github.com/develar/app-builder/pkg/download.(*Part).download
Y:/Documents/app-builder/pkg/download/Part.go:47
github.com/develar/app-builder/pkg/download.(*Downloader).DownloadResolved.func1.1
Y:/Documents/app-builder/pkg/download/downloader.go:155
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2
Y:/Documents/app-builder/pkg/util/async.go:68
runtime.goexit
c:/go/src/runtime/asm_amd64.s:1373
Ô¿» Cannot cleanup:
Error #1 --------------------------------------------------------------------------------
Error: C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
at ChildProcess. (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\util.ts:243:14)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at maybeClose (internal/child_process.js:1021:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
Error #2 --------------------------------------------------------------------------------
Error: C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
at ChildProcess. (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\util.ts:243:14)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at maybeClose (internal/child_process.js:1021:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
From previous event:
at processImmediate (internal/timers.js:456:21)
From previous event:
at NsisTarget.buildInstaller (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\targets\nsis\NsisTarget.ts:203:29)
at NsisTarget.finishBuild (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\targets\nsis\NsisTarget.ts:110:7)
at async Promise.all (index 2)
at AsyncTaskManager.awaitTasks (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\asyncTaskManager.ts:65:25)
at Packager.doBuild (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\packager.ts:456:5)
at executeFinally (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\promise.ts:12:14)
at Packager._build (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\packager.ts:373:31)
at Packager.build (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\packager.ts:337:12)
at executeFinally (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\promise.ts:12:14) stackTrace=
Error: Cannot cleanup:
Error #1 --------------------------------------------------------------------------------
Error: C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
at ChildProcess.<anonymous> (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\util.ts:243:14)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at maybeClose (internal/child_process.js:1021:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
Error #2 --------------------------------------------------------------------------------
Error: C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
at ChildProcess.<anonymous> (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\util.ts:243:14)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at maybeClose (internal/child_process.js:1021:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
From previous event:
at processImmediate (internal/timers.js:456:21)
From previous event:
at NsisTarget.buildInstaller (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\targets\nsis\NsisTarget.ts:203:29)
at NsisTarget.finishBuild (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\targets\nsis\NsisTarget.ts:110:7)
at async Promise.all (index 2)
at AsyncTaskManager.awaitTasks (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\asyncTaskManager.ts:65:25)
at Packager.doBuild (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\packager.ts:456:5)
at executeFinally (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\promise.ts:12:14)
at Packager._build (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\packager.ts:373:31)
at Packager.build (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\packager.ts:337:12)
at executeFinally (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\promise.ts:12:14)
at throwError (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\asyncTaskManager.ts:90:11)
at checkErrors (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\asyncTaskManager.ts:53:9)
at AsyncTaskManager.awaitTasks (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\asyncTaskManager.ts:67:7)
at Packager.doBuild (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\packager.ts:456:5)
at executeFinally (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\promise.ts:12:14)
at Packager._build (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\packager.ts:373:31)
at Packager.build (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\app-builder-lib\src\packager.ts:337:12)
at executeFinally (C:\Users\DESKTOP\Desktop\Applications\secure-electron-template-master\node_modules\builder-util\src\promise.ts:12:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dist-windows: npm run prod-build && electron-builder --windows
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dist-windows script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\DESKTOP\AppData\Roaming\npm-cache_logs\2020-10-09T16_37_14_492Z-debug.log
From your readme:
There are a number of additions that I'd like to implement in this repository, namely auto-updating
I actually just got this setup on a sample/template app of mine using GitLab. It's my understanding that it is actually easier to get setup using GitHub as GitHub is a specific provider vs using the generic provide for GitLab.
Essentially, when I commit to the master
branch, it builds the app, adds the *.exe
artifact as a package on GitLab, and links that package as an asset on the release. When my app launches, it waits 10sec to check for an update, then checks every 2min (obvs too often but needed for testing purposes). When an update is detected, it pops up a window to let the user know. Downloads the update and asks the user if they want to restart now to install the update or install on exit. It then installs as appropriate.
What are you looking for in your template to implement auto-updating? What would you like to see the process be? I don't mind making a PR if I know more about what you are looking for.
If you would like, I can link my repo from GitLab.
I know that there is one major security concern with it right now that I have not taken the time to fix. But it otherwise functions as expected.
It appears here
I wasn't able to find a comprehensive list of Blink features but on this page that I did find, I couldn't find Auxclick
.
@reZach in any event, could you share the rationale for disabling Auxclick? If the idea is that it would prevent additional mouse buttons from acting as normal left clicks, it doesn't seem to work. I'm not sure that's the intended purpose though.
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.