I&#39;ve been scouring the [Electron](http://electron.atom.io) documentation to try and figure out how to persist data in an Electron app. For example, in iOS or OS X, you could use NSUserDefaults to store user settings and preferences. I would like to do something similar. How can I persist data in an Electron app?

How to persist data in an Electron app?

I&#39;ve got an electron app, below is the `main.js` file:

    var app = require(&#39;electron&#39;).app;
    var BrowserWindow = require(&#39;electron&#39;).BrowserWindow;
    
    app.on(&#39;ready&#39;, function() {
        mainWindow = new BrowserWindow({
            height: 715,
            width: 1200,
            minWidth: 600,
            minHeight: 200,
            center: true
        });
    
        mainWindow.loadURL(&#39;file://&#39; + __dirname + &#39;/index.html&#39;);
    });

As you can see, the width and height are specified. What I want is for the app to open, but take up all of the available screen (but *NOT* to be in full screen, such that the dock and tool bar of the OS are hidden).

In simple CSS this is done by using 

    width:100%;
    height:100%;

I want to be able to reproduce this in my electron app, although cannot seem to find any details on how to do it

Note: `fullscreen: true` is not what I am looking for, as that makes the app open so that the dock and toolbar are hidden

Can anyone help?

Electron Take Up 100% Of Screen (Not Full Screen)

I&#39;m making a desktop application with `create-react-app` and Electron. It needs to run on Mac, Windows and Linux. I also want to make a native version afterwards for Android and iOS.

Can I just make an application in React Native that works on mobile devices and on desktops? It would maybe save a lot of time.





Can you use React Native to create a desktop application?

I&#39;m trying to understand the communications between electrons main and renderer processes. The documentation https://github.com/electron/electron/blob/master/docs/api/remote.md states that the &quot;remote module provides a simple way to do inter-process communication (IPC) between the renderer process and the main process.&quot; 

However, the documentation is very sparse with regards to how to set it up. 

I can get the IPC examples to work with my application which seems simple enough. In what scenarios should the remote module be used ? 

When to use remote vs ipcRenderer, ipcMain

I&#39;m learning Electron and working with multiple windows and IPC. In my main script I have the following:

    var storeWindow = new BrowserWindow({
      width: 400,
      height: 400,
      show: false
    });
    
    ipc.on(&#39;show-store-edit&#39;, function(event, store) {
      console.log(store);
      storeWindow.loadURL(&#39;file://&#39; + __dirname + &#39;/app/store.html&#39;);
      storeWindow.show();
    });

And in my primary window&#39;s script, I have the following inside of a click event handler, pulling in a list of stores:

    $.getJSON(&quot;http://localhost:8080/stores/&quot; + item.id).done(function(store) {
       ipc.send(&#39;show-store-edit&#39;, store);
    });

On the console, I am printing the store data from my server. What I&#39;m unclear on is how to get that data into the view for my `storeWindow:store.html`. I&#39;m not even sure I&#39;m handling the sequence of events correctly but they would be:

* click Edit Store
* get store data from server
* open new window to display store data

or 

* click Edit Store
* open new window to display store data
* get store data from server

In the latter, I&#39;m not sure how I would get the ID required to fetch the store from the `storeWindow&#39;s` script.


Passing Data to Windows in Electron

Using [this boilerplate][1] as reference I created an [Electron][2] app. It uses webpack to bundle the scripts and express server to host it.

Webpack config is practically same as [this][3] and server [this][4].

Electron&#39;s script loads:

`mainWindow.loadURL(&#39;file://&#39; + __dirname + &#39;/app/index.html&#39;);`

And index.html loads the script hosted by the server:

`&lt;script src=&quot;http://localhost:3000/dist/bundle.js&quot;&gt;&lt;/script&gt;`

I run `electron index.js` to build the app and `node server` to start server which using webpack bundles the scripts.

It works fine, my React component App is mounted. But how I integrate react-router into this?

I implemented it the same way I would in a browser app. I get this error:

`[react-router] Location &quot;/Users/arjun/Documents/Github/electron-app/app/index.html&quot; did not match any routes`

It is taking file path as the route. Going through the boiler plate code did not help. What am I missing?

  [1]: https://github.com/chentsulin/electron-react-boilerplate
  [2]: http://electron.atom.io/
  [3]: https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.development.js
  [4]: https://github.com/chentsulin/electron-react-boilerplate/blob/master/server.js

How to use React Router with Electron?

I&#39;m working on an `Electron app` with Angular 4. I want to play sound on some specific action. Is there any module or code for that? It can be in the angular 4 or if electron is providing some service for that it should also work

As I want to play it on some action I can&#39;t use the HTML audio tag and audio() of javascript

I only want to play the sound of 2-3 seconds so no other functionalities are needed.

It can be of electron or Angular 4 any of them can work...

Play sound in Angular 4

I am trying to write a cross-platform desktop app using web technologies (HTML5, CSS, and JS). I took a look at some frameworks and decided to use the Electron framework. 

I&#39;ve already done the app in Python, so I want to know if is possible to write cross-platform desktop applications using Python on the Electron framework?

Python on Electron framework

I do not know if this is possible but I might as well give it a chance and ask.
I&#39;m doing an Electron app and I&#39;d like to know if it is possible to have no more than a single instance at a time.

I have found this [gist][1] but I&#39;m not sure hot to use it. Can someone shed some light of share a better idea ?

    var preventMultipleInstances = function(window) {
        var socket = (process.platform === &#39;win32&#39;) ? &#39;\\\\.\\pipe\\myapp-sock&#39; : path.join(os.tmpdir(), &#39;myapp.sock&#39;);
        net.connect({path: socket}, function () {
            var errorMessage = &#39;Another instance of &#39; + pjson.productName + &#39; is already running. Only one instance of the app can be open at a time.&#39;
            dialog.showMessageBox(window, {&#39;type&#39;: &#39;error&#39;, message: errorMessage, buttons: [&#39;OK&#39;]}, function() {
                window.destroy()
            })
        }).on(&#39;error&#39;, function (err) {
            if (process.platform !== &#39;win32&#39;) {
                // try to unlink older socket if it exists, if it doesn&#39;t,
                // ignore ENOENT errors
                try {
                    fs.unlinkSync(socket);
                } catch (e) {
                    if (e.code !== &#39;ENOENT&#39;) {
                        throw e;
                    }
                }
            }
            net.createServer(function (connection) {}).listen(socket);;
        });
    }


  [1]: https://gist.github.com/olegam/10b87e3e54a859506a8d

How to prevent multiple instances in Electron

Evening,&lt;br&gt;
I&#39;m looking into using [electron][1] to package an existing angular2 build. I thought I had a dry run working but the actual packaging seems to be failing (see final step below) and I want to understand why. Here&#39;s what I&#39;m doing...

**Create Project**&lt;br&gt;
Use [angular-cli][2] to start a new project `ng new electron-ng2-cli --style=scss`

Install electron and [electron-builder][3]

**Edit package.json**&lt;br&gt;Make the following additions...&lt;br&gt;
 `&quot;main&quot;: &quot;main.js&quot;`

    &quot;build&quot;:
    {
      &quot;appId&quot;: &quot;com.electrontest.testapp&quot;,
      &quot;mac&quot;: {
        &quot;category&quot;: &quot;your.app.category.type&quot;
      }
    }
and add the following to the `scripts`...

    &quot;pack&quot;: &quot;build --dir&quot;,
    &quot;dist&quot;: &quot;build&quot;,
    &quot;electron&quot;: &quot;electron main.js&quot;,
    &quot;postinstall&quot;: &quot;install-app-deps&quot;

**Create main.js**&lt;br&gt;I just copied the code from the [electron quick start][4]. The only change I make is to the location of `index.html` which I set to `/dist/index.html`

**Amend base**&lt;br&gt;In `index.html` change `&lt;base=&quot;/&quot;&gt;` to `&lt;base=&quot;./&quot;&gt;` 

**Pack code**&lt;br&gt;Run `ng build`. This puts all the packaged code in `/dist`

**Test Run**&lt;br&gt;Run `npm run electron`. This works fine. An Electron app fires up and I see the angular stuff running within it.

**Create App For Distribution**&lt;br&gt;Run `npm run pack` to create a packaged app. The packaging seems to go ok - I get a warning about a missing icon and a warning that my code is unsigned but I&#39;m guessing they shouldn&#39;t be fatal?&lt;br&gt;
The problem is that when I now run the app by double clicking in `Finder` I get an error in the console saying: `Not allowed to load local resource: file:///Users/&lt;username&gt;/Documents/development/electron-ng2-cli/dist/mac/electron-ng2-cli.app/Contents/Resources/app.asar/dist/index.html`
&lt;hr&gt;
So, can anyone explain what is different between the packaged app that fails and the one that runs ok when I use `npm run electron`?

What can I do to fix this issue and get the app running correctly?

Thank you for making it to the end. This got longer than I wanted but I hope I explained myself ok. If you can help or give any pointers that would be great - many good vibes will be thought in your general direction :)

Cheers all

  [1]: http://electron.atom.io/
  [2]: https://cli.angular.io/
  [3]: https://github.com/electron-userland/electron-builder
  [4]: https://github.com/electron/electron-quick-start/blob/master/main.js

Electron - Not allowed to load local resource

I have an electron app which uses pm2 to start some apps using the pm2 module.Everything is fine.However I am trying to implement the following feature:Renaming an app you have started.I know that using the cli I can do the following:

`pm2 restart app --name&quot;New name&quot;`;

So I found the `pm2.restart` function which takes an Object and a callback as a parameter.So I tried this:



    var options = {app:&quot;Blogsport App&quot;,name:&quot;New name&quot;};
    var callback = function(err){
       if(err) {console.log(&#39;Failed&#39;)}
       else {console.log(&#39;App renamed&#39;)}
    };
    
    pm2.restart(options,callback);

This will always log &quot;App renamed&quot;.However If I do `pm2 list` I see that the app has not be renamed.Is there anything I can do to rename an app without deleting it and start it again with a different name?

rename process using pm2 programmatic api

I want my app to have no title bar but still be closeable, draggable, minimizable, maximizable, and resizable like a regular window. I can do this in OS X since there is a [titleBarStyle] [1] option called  `hidden-inset` that I can use but unfortunately, it&#39;s not available for Windows, which is the platform that I&#39;m developing for. How would I go about doing something like this in Windows?

![Example][2] Above is an example of what I&#39;m talking about. 

  [1]: https://github.com/atom/electron/blob/master/docs/api/frameless-window.md
  [2]: https://cloud.githubusercontent.com/assets/2175645/10311824/0f1bebae-6c51-11e5-9194-07cecebfbab3.gif

Frameless window with controls in electron (Windows)

I have an Electron app that I&#39;m trying to install node modules for. When I run `npm install`, it creates the `node_modules` folder but all the modules go into a subfolder called `.staging`. Each module also has `-xxxxx` appended to it, where the x&#39;s are some random alphanumerics.

Other Electron apps I&#39;ve created have never done this. All the node modules sit in the root of `node_modules` and don&#39;t have `-xxxxx` appended.

Any idea why this is happening?

Why do Node modules go into .staging folder?

I&#39;m using `Electron` (formerly atom-shell) and would like to have a minimalist frame window so that the three OSX window buttons (close, maximize, minimize) are visible from **within** the HTML page.

I set the Electron option `frame` to `false` when defining the [`BrowserWindow`][1] to have a chromeless, frameless window.

And I thought I could handle the close button with something like this:

    &lt;a btn href=&quot;#&quot; id=&quot;close&quot; onclick=&quot;window.top.close(); return false&quot;&gt;&lt;/a&gt;

With no luck, sadly. Any idea how to achieve this?


  [1]: https://github.com/atom/electron/blob/master/docs/api/browser-window.md#new-browserwindowoptions

Atom Electron - Close the window with javascript

I can see in this file (https://github.com/ReactTraining/react-router/blob/v0.13.3/modules/createRouter.js) that there is a refresh function but I have no idea how to call it. I&#39;m fairly new to react-router, I&#39;ve only used it to move between some pages a couple times using hashHistory. 

Right now I am trying to use it so that when an install fails, the user is given the option to &#39;retry&#39; which I plan to execute by refreshing the page where the install happens (the page the user would be currently on). Any help would be appreciated.

This is a node app that runs on electron, not a web app.

How do I reload a page with react-router?

I&#39;m creating an Electron app for my own purpose. My problem is when I&#39;m using node functions inside my HTML page it throws an error of:

&gt;&#39;require()&#39; is not defined.

Is there any way to use Node functionalities in all my HTML pages? If it is possible please give me an example of how to do this or provide a link. Here are the variables I&#39;m trying to use in my HTML page:

      var app = require(&#39;electron&#39;).remote; 
      var dialog = app.dialog;
      var fs = require(&#39;fs&#39;);

and these are the values I&#39;m using in all my HTML windows within Electron.




Electron require() is not defined

How do I remove this menu-bar from my electron apps:

[![menu-bar][1]][1]

Also it says &quot;Hello World&quot;(is this because I downloaded electron pre-built, and will go away once I package the application?). I didn&#39;t code these into the html, so I don&#39;t know how to get it out!-


  [1]: http://i.stack.imgur.com/h8rrT.png

Remove menubar from Electron app

How do you set the app icon for your Electron app?

I am trying `BrowserWindow({icon:&#39;path/to/image.png&#39;});` but it does not work.

Do I need to pack the app to see the effect?


How to set app icon for Electron / Atom Shell App

What underlying technologies/libraries is Microsoft&#39;s new *(free)* cross platform editor **[Visual Studio Code][1]** *(Launched 5/29/2015)*  built on? There are rumors that it&#39;s just Github&#39;s Atom Editor rebranded. 


  [1]: https://code.visualstudio.com/

What is the Visual Studio Code editor built on

I have packed my Electron application using the following command:

    asar pack app app.asar

Now, I need to unpack it and get the whole code back. Is there any way to do so?


How to unpack an .asar file?

Now that TideSDK is effectively dead, I&#39;ve been looking into alternative &#39;wrappers&#39; to run HTML/CSS/JS applications as stand-alone desktop applications. The three viable options I have run across so far, are [NW.js](https://github.com/nwjs/nw.js) (formerly node-webkit), [brackets-shell](https://github.com/adobe/brackets-shell), and [Electron](https://github.com/atom/electron/) (formerly atom-shell).

The problem is that there does not appear to be a sufficiently complete comparison between the three in terms of feature set, compatibility, etc. I&#39;m hoping to turn this into a more-or-less canonical thread on the (objective) differences between the three, in particular regarding:

 * **Platform support**; operating systems, dependencies, etc.
 * **Language feature support**, as far as HTML5, CSS3 and JavaScript are concerned. Think things like *&quot;does HTML5 video work, and if yes, what codecs are available?&quot;*
 * **Non-standard extra features**, such as tray icons, popup notifications, and OS-rendered menu bars.
 * **Extensibility**; eg. ability to &#39;plug in&#39; native code, talk to Node.js, and so on.
 * **Architecture**; in particular the architectural differences that affect daily usage as a developer.
 * **Debugging**; included development tools, compatibility with commonly used tools like `node-inspector`, etc.
 * ... and so on.

What are the objective, technical differences that matter when making a choice between them as an application developer?

What are the functional differences between NW.js, Brackets-Shell and Electron?

How can I log data or messages to the console in my Electron app?

This really basic hello world opens the dev tools by default, by I am unable to use `console.log(&#39;hi&#39;)`. Is there an alternative for Electron?

**main.js**

&lt;!-- language: lang-js --&gt;

    var app = require(&#39;app&#39;);
    var BrowserWindow = require(&#39;browser-window&#39;);
    
    require(&#39;crash-reporter&#39;).start();
    
    var mainWindow = null;
    
    app.on(&#39;window-all-closed&#39;, function() {
      // Mac OS X - close is done explicitly with Cmd + Q, not just closing windows
      if (process.platform != &#39;darwin&#39;) {
        app.quit();
      }
    });
    
    app.on(&#39;ready&#39;, function(){
      mainWindow = new BrowserWindow({ width: 800, height: 600});
    
      mainWindow.loadUrl(&#39;file://&#39; + __dirname + &#39;/index.html&#39;);
    
      mainWindow.openDevTools();
    
      mainWindow.on(&#39;closed&#39;, function(){
        mainWindow = null;
      });
    });



Using console.log() in Electron app

What is main difference between [electron-builder][1] and [electron-packager][2]. Is there some example projects for both? Which is better for standalone .exe application build?


  [1]: https://github.com/electron-userland/electron-builder
  [2]: https://github.com/electron-userland/electron-packager

electron-builder vs electron-packager

When I study electron, I found 2 ways of getting BrowserWindow object.

    const {BrowserWindow} = require(&#39;electron&#39;)
and

    const electron = require(&#39;electron&#39;)
    const BrowserWindow = electron.BrowserWindow

What is the difference between `const` and `const {}` in JavaScript?

I can&#39;t understand why the `const {}` can work. Do I miss anything important about JS?


What is the difference between const and const {} in JavaScript

I am creating a simple form to upload file using electron-react-boilerplate with redux form &amp; material ui.

The problem is that I do not know how to create input file field because material ui does not support upload file input.

Any ideas on how to achieve this?


How to enable file upload on React&#39;s Material UI simple input?

I&#39;m working on a project with Typescript, React and Redux (all running in Electron), and I&#39;ve run into a problem when I&#39;m including one class based component in another and trying to pass parameters between them. Loosely speaking, I&#39;ve got the following structure for the container component:

    class ContainerComponent extends React.Component&lt;any,any&gt; {
      ..
      render() {
        const { propToPass } = this.props;
        ...
        &lt;ChildComponent propToPass={propToPass} /&gt;
        ...
      }
    }
    
    ....
    export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

And the child component:

    interface IChildComponentProps extends React.Props&lt;any&gt; {
      propToPass: any
    }

    class ChildComponent extends React.Component&lt;IChildComponentProps, any&gt; {
      ...
    }
    
    ....
    export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

Obviously I&#39;m only including the basics and there is much more to both of these classes but I&#39;m still getting an error when I try and run what looks to me like valid code. The exact error that I&#39;m getting:

&gt;     TS2339: Property &#39;propToPass&#39; does not exist on type &#39;IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Component&lt;{}, ComponentState&gt;&gt; &amp; Readonly&lt;{ childr...&#39;.

When I first encountered the error I thought it was because I wasn&#39;t passing in an interface defining my props, but I created that (as you can see above) and it still doesn&#39;t work. I&#39;m wondering, is there something I&#39;m missing? 

When I exclude the ChildComponent prop from the code in the ContainerComponent, it renders just fine (aside from my ChildComponent not having a critical prop) but with it in the JSX Typescript refuses to compile it. I think it might have something to do with the connect wrapping based on [this article](http://www.mattgreer.org/articles/typescript-react-and-redux/), but the problems in that article occurred in the index.tsx file and were a problem with the provider, and I&#39;m getting my problems elsewhere.

Typescript + React/Redux: Property &quot;XXX&quot; does not exist on type &#39;IntrinsicAttributes &amp; IntrinsicClassAttributes

I want to develop desktop app using [electron][1] that uses sqlite3 package installed via npm with the command

    npm install --save sqlite3

but it gives the following error in electron browser console

    Uncaught Error: Cannot find module &#39;E:\allcode\eapp\node_modules\sqlite3\lib\binding\node-v45-win32-x64\node_sqlite3.node&#39;

My development environment is windows 8.1 x64
node version 12.7


my **package.json** file looks like this:

    {
      &quot;name&quot;: &quot;eapp&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;description&quot;: &quot;&quot;,
      &quot;main&quot;: &quot;index.js&quot;,
      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;electron .&quot;
      },
      &quot;author&quot;: &quot;&quot;,
      &quot;license&quot;: &quot;ISC&quot;,
      &quot;devDependencies&quot;: {
        &quot;electron-prebuilt&quot;: &quot;^0.32.1&quot;
      },
      &quot;dependencies&quot;: {
        &quot;angular&quot;: &quot;^1.3.5&quot;,   
        &quot;sqlite3&quot;: &quot;^3.1.0&quot;
      }
    }

**index.js file**

    var app = require(&#39;app&#39;);
    var BrowserWindow = require(&#39;browser-window&#39;); 
    require(&#39;crash-reporter&#39;).start();
    var mainWindow = null;
    
    
    app.on(&#39;window-all-closed&#39;, function() {  
        if (process.platform != &#39;darwin&#39;) {
            app.quit();
        }
    });
    
    app.on(&#39;ready&#39;, function() {
        // Create the browser window.
        mainWindow = new BrowserWindow({width: 800, height: 600}); 
        mainWindow.loadUrl(&#39;file://&#39; + __dirname + &#39;/index.html&#39;);   
        mainWindow.openDevTools();  
        mainWindow.on(&#39;closed&#39;, function() {       
            mainWindow = null;
        });
    });

**my.js file** 

    var sqlite3 = require(&#39;sqlite3&#39;).verbose();
    var db = new sqlite3.Database(&#39;mydb.db&#39;);
    
    db.serialize(function() {
        db.run(&quot;CREATE TABLE if not exists lorem (info TEXT)&quot;);
    
        var stmt = db.prepare(&quot;INSERT INTO lorem VALUES (?)&quot;);
        for (var i = 0; i &lt; 10; i++) {
            stmt.run(&quot;Ipsum &quot; + i);
        }
        stmt.finalize();
    
        db.each(&quot;SELECT rowid AS id, info FROM lorem&quot;, function(err, row) {
            console.log(row.id + &quot;: &quot; + row.info);
        });
    });
    
    db.close();

**index.html file**

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head lang=&quot;en&quot;&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div &gt;
        &lt;div&gt;
            &lt;h2&gt;Hello&lt;/h2&gt;
        &lt;/div&gt;
    
    &lt;/div&gt;
    &lt;!--&lt;script src=&quot;js/jquery-1.11.3.min.js&quot;&gt;&lt;/script&gt;--&gt;
    &lt;script src=&quot;js/my.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;


  [1]: http://electron.atom.io/

How to use sqlite3 module with electron?

I can&#39;t seem to locate a built in mechanism to store user settings. I was hoping that electron provided a standard method for storing user settings across all desktop platforms. If there isn&#39;t a precedent for this I can implement it myself, I just didn&#39;t want to jump to a custom solution immediately. Research online is pretty sparse in this area. Thanks!

Where to store user settings in Electron (Atom Shell) Application?

I am trying to add functionality to a button in `index.html` file is as follows:
I have a button element in `index.html`

    &lt;button id=&quot;auth-button&quot;&gt;Authorize&lt;/button&gt;

In `main.js` of the app, I have

    require(&#39;crash-reporter&#39;).start();
    console.log(&quot;oh yaeh!&quot;);
    var mainWindow = null;
    
    app.on(&#39;window-all-closed&#39;, function(){
    	if(process.platform != &#39;darwin&#39;){
    		app.quit();
    	}
    });
    
    app.on(&#39;ready&#39;,function(){
    	mainWindow = new BrowserWindow({width:800, height : 600});
    	mainWindow.loadUrl(&#39;file://&#39; + __dirname + &#39;/index.html&#39;);
    
        var authButton = document.getElementById(&quot;auth-button&quot;);
        authButton.addEventListener(&quot;click&quot;,function(){alert(&quot;clicked!&quot;);});
    
    	mainWindow.openDevTools();
    
    	mainWindow.on(&#39;closed&#39;,function(){
    		mainWindow = null;
    	});
    });

But an error occurs as follows:
`Uncaught Exception: ReferenceError: document is not defined`

Can the DOM objects be accessed while building electron apps? or is there any other alternative way that can give me the required functionality?


How to access DOM elements in electron?

We are planning to built cross platform desktop application. We found that [Node-Webkit](https://github.com/rogerwang/node-webkit) is a perfect choice for us. But GitHub developed their own framework called [Electron](https://github.com/atom/electron) instead of using Node-Webkit.

What is the difference between them?

Node-Webkit vs Electron

I&#39;m trying to use Node modules (in this example, `fs`) in my `renderer` processes, like this:

    // main_window.js
    const fs = require(&#39;fs&#39;)

    function action() {
        console.log(fs)
    }

&lt;sup&gt;Note: The `action` function gets called when I press a button in my `main_window`.&lt;/sup&gt;

But this gives an error:

    Uncaught ReferenceError: require is not defined
        at main_window.js:1

I can solve this issue, [as suggested by this accepted answer][1], by adding these lines to my `main.js` when initializing the `main_window`:

    // main.js
    main_window = new BrowserWindow({
        width: 650,
        height: 550,
        webPreferences: {
            nodeIntegration: true
        }
    })

But, [according to the docs][2], this isn&#39;t the best thing to do, and I should instead, create a `preload.js` file and load these Node modules there and then use it in all of my `renderer` processes. Like this:

`main.js`:

    main_window = new BrowserWindow({
        width: 650,
        height: 550,
        webPreferences: {
            preload: path.join(app.getAppPath(), &#39;preload.js&#39;)
        }
    })

 `preload.js`:

    const fs = require(&#39;fs&#39;)

    window.test = function() {
        console.log(fs)
    }

`main_window.js`:

    function action() {
        window.test()
    }

And it works!

----------

Now my question is, isn&#39;t it counter-intuitive that I should write most of the code of my `renderer` processes in `preload.js` (Because only in `preload.js` I have access to Node modules) and then merely call the functions in each `renderer.js` file (for example here, `main_window.js`)? What am I not understanding here? 

  [1]: https://stackoverflow.com/a/55908510/6282576
  [2]: https://electronjs.org/docs/tutorial/security#2-do-not-enable-nodejs-integration-for-remote-content

How to use preload.js properly in Electron

I had initially been using electron stable (4.x.x), and was able to use `require` in both my browser and renderer processes. I upgraded to electron beta (5.0.0) because I needed a newer version of node and encountered this error message in my renderer process, `Uncaught ReferenceError: require is not defined`. 

Googling and looking through the electron docs, I found comments saying the error could be caused by setting `webPreferences.nodeIntegration` to false when initializing the `BrowserWindow`; e.g.: `new BrowserWindow({width, height, webPreferences: {nodeIntegration: false}});`. But I was not doing this, so I thought something else must be the issue and continued searching for a resolution.

electron 5.0.0 &quot;Uncaught ReferenceError: require is not defined&quot;

I&#39;m trying to wrap my head around how [Electron][1] (formerly Atom Shell) works.

I&#39;m coming from a traditional, MVC-style web application where a Browser is calling a *Controller Action* through a *Routing System*, the Controller then fetches data from a store (File System, Data Base, ...) and renders a *View*, which is sent back to the Browser. Some Actions may be sending back JSON instead, as they are called through JavaScript/AJAX instead of the Browser actually navigating to them.

I want to create that, but as a Cross-Platform Desktop Application. I know that Atom Shell combines both a Chromium-Browser and a Node.js/v8 runtime, but I&#39;m not sure how they would communicate.

I guess I could run a full on web server (basically, some Node.js HTTP Middleware like [Express][2]), but that creates a network-reachable server (which might also trip up firewalls) - one of the reasons I want to make a desktop app is precisely to avoid running a real server. Basically like the MVP/MVVM pattern in a &quot;normal&quot; desktop app.

Can someone give me a few starting points for what I&#39;m trying to do? How would the browser talk to the node runtime (the &quot;Client&quot; as they call it?) to tell it &quot;Hey, fetch my the record with ID 12345&quot; and would the Client return rendered HTML, or would the browser just get a blob of JSON back and render it through a JavaScript templating engine?


  [1]: https://github.com/atom/electron
  [2]: http://expressjs.com/

What is the Client/Server model when using Electron (Atom Shell)?

I want to generate a unique `.exe` file to execute the app or a `.msi` to install the application. How to do that?

How to deploy an Electron app as an executable or installable in Windows?

After sweating blood and tears I&#39;ve finally managed to set up a Node C++ addon and shove a web-platform standard `MediaStream` object into one of its C++ methods for good. For compatibility across different V8 and Node.js versions, I&#39;m using [Native Abstractions for Node.js (nan)](https://github.com/nodejs/nan):

**addon.cc**

    NAN_METHOD(SetStream)
    {
        Nan::HandleScope scope;
        v8::Local&lt;v8::Object&gt; mediaStream = info[0]-&gt;ToObject();
    }

**addon.js**

    setStream(new MediaStream());

For what it&#39;s worth, this works correctly (i.e. it does not obliterate the renderer process on sight), and I can verify the presence of the `MediaStream` object, e.g. by returning its constructor name from the C++ method:

**addon.cc**

    info.GetReturnValue().Set(mediaStream-&gt;GetConstructorName());

When called from JavaScript through `setStream`, this would return the string *`MediaStream`*, so the object is definitely there. I can also return the `mediaStream` object itself and everything will work correctly, so it&#39;s indeed the object I need.

**So, how would I read audio data (i.e. audio samples) from this `MediaStream` object in C++?** As a sidenote, the actual data read (and processing) would be done in a separate `std::thread`.

-----

## Bounty Update

I understand this would be sort of easier/possible if I were compiling Electron and/or Chromium myself, but I&#39;d rather not get involved in that maintenance hell.

I was wondering if it would be possible without doing that, and as far as my research goes, I&#39;m convinced I need 2 things to get this done:

 1. The relevant header files, for which I believe [blink public](https://chromium.googlesource.com/chromium/blink-public/) should be adequate
 2. A chromium/blink library file (?), to resolve external symbols, similarly to the node.dylib file

Also, as I said, I believe I could compile chromium/blink myself and then I would have this lib file, but that would be a maintenance hell with Electron. With this in mind, I believe this question ultimately comes down to a C++ linking question. Is there any other approach to do what I&#39;m looking for?

### Edit

ScriptProcessorNode is not an option in my case, as its performance makes it nearly unusable in production. This would require to process audio samples on the ui/main thread, which is absolutely insane.


### Edit 2

[AudioWorklets](https://developer.mozilla.org/en-US/docs/Web/API/AudioWorklet) have been available in Electron for some time now, which, unlike the ScriptProcessorNode (or worse, the AnalyzerNode), is low-latency and very reliable for true C++ backed audio processing even in real time.

If someone wants to go ahead and write an AudioWorklet-based answer, I&#39;ll gladly accept, but beware: it&#39;s a _very_ advanced field and a very deep rabbit hole, with countless obstacles to get through even before a very simple, general-purpose pass-through prototype (especially so because currently in Electron, Atomics-synced, buffered cross-thread audio processing is required to pull this off because https://github.com/electron/electron/issues/22503 -- although getting a native C++ addon into one audio renderer thread, let alone multiple threads at the same time, is probably equally as challenging).

How to read audio data from a &#39;MediaStream&#39; object in a C++ addon

I want my [Electron.js](https://github.com/electron/electron) application to live on system tray and whenever the user wants to do something they can restore from the system tray do something and minimize/close it back to system tray. How do i do that?

I&#39;ve seen the `tray` section from the documentation but doesn&#39;t help much to achieve what i want. 

Here is what i got so far on the `main.js` file

  
    var application = require(&#39;app&#39;),
    	BrowserWindow = require(&#39;browser-window&#39;),
    	Menu = require(&#39;menu&#39;), 
    	Tray = require(&#39;tray&#39;); 
    application.on(&#39;ready&#39;, function () {
    	var mainWindow = new BrowserWindow({
    		width: 650,
    		height: 450,
    		&#39;min-width&#39;: 500,
    		&#39;min-height&#39;: 200,
    		&#39;accept-first-mouse&#39;: true,
    		// &#39;title-bar-style&#39;: &#39;hidden&#39;,
    		icon:&#39;./icon.png&#39;
    	});
    	mainWindow.loadUrl(&#39;file://&#39; + __dirname + &#39;/src/index.html&#39;);
    	mainWindow.on(&#39;closed&#39;, function () {
    		mainWindow = null;
    	});
    	mainWindow.setMenu(null);
    	
    	var appIcon = null;
    	appIcon = new Tray(&#39;./icon-resized.png&#39;);
    	var contextMenu = Menu.buildFromTemplate([
    		{ label: &#39;Restore&#39;, type: &#39;radio&#39; }
    	]);
    	appIcon.setToolTip(&#39;Electron.js App&#39;);
    	appIcon.setContextMenu(contextMenu);
    });

**UPDATE:**

I found this [menubar](https://github.com/maxogden/menubar) repo, but it won&#39;t work as expected on linux.

Electron.js How to minimize/close window to system tray and restore window back from tray?

I have trouble with using Electron. As you can see the title, when i load remote module, it saids it is undefined. This is the code of entry js:

    const electron = require(&#39;electron&#39;);
    const { app, BrowserWindow, Tray, remote, ipcMain } = electron;

    function initApp() { ... }

    app.on(&#39;ready&#39;, () =&gt; {
        initApp();
    
        console.log(electron);         // object, but no remote inside
        console.log(electron.remote);  // undefined
        console.log(remote);           // undefined
    });


and i tried to follow official doc here: http://electron.atom.io/docs/api/remote/

with

    const { remote } = electron;
    const { BrowserWindow } = remote;

    let win = new BrowserWindow({width: 800, height: 600});  // error! BrowserWindow is not a constructor blabla

    ...
    remote.getCurrentWindow().focus();


i don&#39;t know what am i missing. any advice will very appreciate.

Electron.remote is undefined

I&#39;ve been learning how to create applications in [Electron][1] and I need help compiling a simple project to a Windows executable. The program is a clone from this Github repo: [https://github.com/electron/electron-quick-start][2]. On the repo readme it shows how to run the program:

    # Clone this repository
    git clone https://github.com/electron/electron-quick-start
    # Go into the repository
    cd electron-quick-start
    # Install dependencies
    npm install
    # Run the app
    npm start

This works fine, but I can&#39;t figure out how to simply compile it. I&#39;ve looked all over google, you would think that something as simple as deploying an application would be well known information. 

  [1]: http://electron.atom.io/
  [2]: https://github.com/electron/electron-quick-start

How To Compile An Electron Application To A .exe

Problem: while developing using Electron, when you try to use any JS plugin that requires jQuery, the plugin doesn&#39;t find jQuery, even if you load in the correct path using script tags.

For example,

    &lt;body&gt;
    &lt;p id=&quot;click-me&quot;&gt;Click me!&lt;/p&gt;
    ...
    &lt;script src=&quot;node_modules/jquery/dist/jquery.min.js&quot;&gt;&lt;/script&gt; //jQuery should be loaded now
    &lt;script&gt;$(&quot;#click-me&quot;).click(() =&gt; {alert(&quot;Clicked&quot;)});&lt;/script&gt;
    &lt;/body&gt;

Running this code above wouldn&#39;t work. In fact, open up DevTools, go to the Console view, and click on the `&lt;p&gt;` element. You should see that `function $ is not defined` or something to that effect.

Electron: jQuery is not defined

I am using [Electron][1] to make a desktop app. In my app I am loading a an external site (outside Atom app) lets say http://mydummysite/index.html page.

Here is the structure of my app in [Atom Editor][2]:

[![enter image description here][3]][3]

i.e it is having following parts:

 1. `main.js`  
 2. `package.json`
 3. `nodemodules&gt;jquery` (to load jquery)
 
Source code:

main.js:

       &#39;use strict&#39;;
        
        var app = require(&#39;app&#39;);
        
        app.on(&#39;ready&#39;, function() {
          var BrowserWindow = require(&#39;browser-window&#39;);
        
          var win = 
          new BrowserWindow({ width: 800, height: 600, show: false, 
                   &#39;node-integration&#39;:true });
          win.on(&#39;closed&#39;, function() {
            win = null;
          });
        
          win.loadUrl(&#39;http://mydummysite/index.html &#39;);
          win.show();
        });

package.json:

    {
      &quot;name&quot;: &quot;my-mac-app&quot;,
      &quot;version&quot;: &quot;5.2.0&quot;,
      &quot;description&quot;: &quot;My Mac Desktop App&quot;,
      &quot;main&quot;: &quot;main.js&quot;,
      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;electron .&quot;
      },
      &quot;author&quot;: &quot;Me&quot;,
      &quot;license&quot;: &quot;ISC&quot;,
      &quot;dependencies&quot;: {
        &quot;jquery&quot;: &quot;^2.1.4&quot;
      }
    }

External page - http://mydummysite/index.html page code:

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;h1&gt;Hello World!&lt;/h1&gt;
    
      &lt;/body&gt;
    &lt;script&gt;
    
       var jqr=require(&#39;jquery&#39;);
    
    &lt;/script&gt;
    &lt;/html&gt;

When I run the above app (by dragging the application folder to Electron) the external page (http://mydummysite/index.html) loads in Electron shell
but with the error 

&gt; Uncaught Error: Cannot find module &#39;jquery&#39;

[![enter image description here][4]][4]

Can you help me finding the cause of this issue?

As you can see in my screenshot of directory structure I have alread installed jquery module to my folder and I did it via `npm install jquery` command. 

Note: To play with `require` command in JS I tried adding `require(&quot;ipc&quot;)` in my external page http://mydummysite/index.html page and it was working so what could be the reason with `require(&quot;jquery&quot;)`. 

Did I add external module (jquery) in correct way in Electron?

Am I missing some dependency in `package.json`?

**What I have already tried:**

 - `npm cache clean`, `npm install jquery` (to my app folder) 
 - `npm install --save jquery `
 - `npm install jquery -g`
 - `npm rebuild`
 - `sudo npm install jquery -g`
 - `sudo npm install jquery`
 - `export NODE_PATH=/usr/local/lib/node_modules`

Here is the screenshot of the location from where the error is thrown in `module.js`

[![enter image description here][5]][5]

Can someone suggest why `require(&quot;ipc&quot;)` is working and `require(&quot;jquery&quot;)` not? 

My goal is to use jQuery with electron app with node-integration true.

  [1]: https://github.com/atom/electron
  [2]: https://atom.io/
  [3]: http://i.stack.imgur.com/1Dbx2.png
  [4]: http://i.stack.imgur.com/jieUE.png
  [5]: http://i.stack.imgur.com/xgLKg.png

Uncaught Error: Cannot find module &#39;jquery&#39;

I&#39;m using the [BrowserWindow][1] to display an app and I would like to force the external links to be opened in the default browser. Is that even possible or I have to approach this differently?


  [1]: https://github.com/atom/electron/blob/master/docs/api/browser-window.md

How can I force external links from browser-window to open in a default browser from Electron?

I have some template files that contain a few variable strings each, I&#39;d like to build a very simple input form with Electron (https://www.electronjs.org/) and I want to save the composed output file on the user&#39;s computer.

Is there any module I can use to let Electron save files locally?

Saving files locally with electron

Is there any (simple/built-in way) to open a new browser (I mean default OS browser) window for a link from Electron instead of visiting that link inside your Electron app ?

All Electron Solutions on Gang of Coders

Total of 43 Electron Solutions