Electron - How to use main and renderer processes

javascript node.js electron renderer

13,118

With electron you have to pay attention in which context your JS files run:

process / nodejs context
Typically main.js runs here, it does all the bootstrapping of the electron environment and browser / electron windows. At some point you will tell a window to load some HTML file - which enters the second context.
electron window / browser context
Anything that got loaded into a window, runs "remotely". To get JS files extecuted in the browser context, you pretty much do the same as with any other web application (use <script> tags etc).

Up to that point an electron app is not different to any other web application - the process/nodejs part acts as a server component, while the window context is the webpage/client context. Note that those contexts are only loosely coupled, you need IPC mechanisms to exchange data between them.

Still electron goes abit further - it allows to directly embed nodejs modules into a window context. This is possible due to some extensions made by the electron team to the underlying chrome libraries. Use that with caution as it might introduce security issues (there is even a security setting for this).

To get what you want:

create a window in main.js
load some HTML document into that window
refer to some other JS file in that HTML document, which now gets loaded along with the HTML document (thats the ominous render.js in your reference)
put some logic in that other JS file --> gets executed within the window context

There is a nice walkthrough to get a basic example up and running in the electron docs (https://electronjs.org/docs/tutorial/first-app).

13,118

Author by

half of a glazier

Hard work is a thrilling way to exercise the little grey cells, I find.

Updated on September 15, 2022

Comments

half of a glazier over 1 year
At this point, after much research and googling, I understand what the main and the renderer do, and their importance in an Electron app.

However, here I am sending out my plea to be answered by all those knowledgeable people out there: Please can I have a clear explanation of how exactly to implement this in my app?

I have a main.js, index.html, and style.css, and I'm trying to fire a javascript function from the html file. @Manprit Singh Sahota has the same question, button click event binding in Electron js, and solves it (lucky him), but simply states that he's setting his function in renderer.js without explaining where and what and how. @NealR also has a similar question but also doesn't explain how he's associating his renderer.js.

Please, someone unveil the secret of where this mysterious file is kept, and how I can reference it in my program?

Don't advise the Electron documentation, I've already been through it and it seems to need some serious improvement...

main.js
```
const electron = require('electron');
const { app, BrowserWindow } = require('electron');

//stuff creating window...

function applyFormattingRules() {
  console.log('called!');
};

//more stuff opening and closing window...
```
index.html
```
<head>
    //...
    <script src="main.js"></script>
</head>

<body>
    //...
    <button type="button" class="btn btn-secondary" name="applyRules"
    onclick="applyFormattingRules()">Apply formatting</button>
</body>
```
My window works fine, no errors there. But when I click the button, nothing happens, and nothing logs to the console. Maybe I'm doing something wrong in the code but all my research seems to point to the Electron main and renderer processes.

Any advice much appreciated.
half of a glazier over 4 years

Thanks for those bullet points, but since I'm new to Electron I need more details. How do I "refer to some other JS file in that HTML document"? I've been through that tutorial, it's only got the main.js and doesn't mention render.js
jerch over 4 years

Simply as with any other HTML document, e.g. <script src="./render.js"></script>
hafiz ali about 2 years

just wondering, what if say you write some logic on the renderer side that is supposed to be main,what risk are we inviting?