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)

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.

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)?

@reZach

as per my original post, and you were nice enough to offer insights, I would love to get clarification and your thoughts on the following.

Since Electron currently does NOT implement any security mechanism to protect the src code, it would be helpful for devs to get an explanation what security implications they are facing when changing certain recommended Electron settings.

Types of apps would include: (1) online only app (e.g. Slack) (2) app that connects to remote sources, but NOT to 3rd party sources, hence the app ONLY loads verified/validated content (3) offline only app (only loads local content)

Specifically, why is the contextIsolation setting "helpful" and/or "needed" for apps (2) and (3) ?

Thanks !

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

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.

Hi, I'm new to Electron.

Can you detail a bit more how updating would work, and how licensing in general works?

~My assumption is that currently there is no updating mechanism implemented. Is that right?~ (Was wrong about this assumption)

For licensing, my assumption is that you need to somehow provision a license for a user at build time so that you can include the key file in the distribution files. Is that accurate? That doesn't seem very practical. If so, could you explain a reasonable workflow?

Thanks

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!

All of the app.on calls in main.js here are using deprecated calls - are these necessary anymore?

When I convert the main.js file to a .ts file instead, it allows us to pickup electron.d.ts where these calls are marked as deprecated:

    /**
     * Emitted when `remote.getGlobal()` is called in the renderer process of
     * `webContents`. Calling `event.preventDefault()` will prevent the global from
     * being returned. Custom value can be returned by setting `event.returnValue`.
     *
     * @deprecated
     */
    on(event: 'remote-get-global', listener: (event: Event,
                                              webContents: WebContents,
                                              globalName: string) => void): this;
    once(event: 'remote-get-global', listener: (event: Event,
                                              webContents: WebContents,
                                              globalName: string) => void): this;
    addListener(event: 'remote-get-global', listener: (event: Event,
                                              webContents: WebContents,
                                              globalName: string) => void): this;
    removeListener(event: 'remote-get-global', listener: (event: Event,
                                              webContents: WebContents,
                                              globalName: string) => void): this

Per this Github issue, the remote module has been removed. Should this code also be removed from main? Is it safe to remove this code?

Thanks!

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

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.

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

JSON is great! However, my current data-storage love-affair is with SQLite. Is it doable to make a SQLite example?

Describe the solution you'd like A clear and concise description of what you want to happen.

I would love to know the details of swapping out JSON and inserting SQLite.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

N/A

Additional context Add any other context or screenshots about the feature request here.

This template, with SQLite - would be awesome.

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

React is great! However, my current JavaScript-Framework love-affair is with Vue. Is it doable to make a Vue example?

Describe the solution you'd like A clear and concise description of what you want to happen.

I would love to know the details of swapping out React and inserting Vue.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

N/A

Additional context Add any other context or screenshots about the feature request here.

This template, with Vue - would be awesome.

Bumps electron from 19.0.10 to 19.0.11.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Thank @reZach and all others Who contributes to this project. One of the best Electron Starter repo IMO. But it's missing one of the key feature "Auto Update after build/package"

Motivation: As Developer, we worked on software that could lead to a bug or sometime that necessary to change after the build. If the Application is an agile, then continuous development is must. In this case, Auto-update after deployment will be a great feature to have.

Is your feature request related to a problem? Please describe.

When opening index.tsx in vscode, various import errors appear, like so:

Describe the solution you'd like

ts imports should just work out-of-the-box in vs code. This issue doesn't affect the build, but it all the same very annoying and reduces trust in the IDE's ability to provide useful vs useless feedback to the developer.

Describe alternatives you've considered

I first tried to rename all .jsx files to .tsx, but I went too far down the rabbit hole end eventually decided to roll back. Then I found the suspected root cause of the issue: the aliases for the main src/ packages are defined in .babelrc, but seem not to be properly recognized by vscode. I tried to add some alias entries to tsconfig.json but that unfortunately didn't work either, for some unknown reason.

Please provide the following information:

Operating system: Windows 11 Version of the template: Based off of 9.x, I believe

Has anyone gotten React Dev Tools to load in the packaged application? I'm not sure if it's because of the app:// protocol or what, but the fix that worked for others does not work for us and I'm inclined to believe it's because we're not loading over a file:// protocol - or maybe the fix here was only tested by upvoters in development?