Electron - How to use main and renderer processes

Question

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.

score 9 · Accepted Answer · answered Dec 17 '19 at 11:57

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

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 — half of a glazier, Dec 17 '19 at 12:02

score 0 · Answer 2 · answered Dec 17 '19 at 12:00

The main process and the render process are completely separate.

You define the main process in your package.json:

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "description": "Super cool electron app",
    "main": "index.js",

    /* more scripts and dependencies here */
}

And then in the main process you create a window that loads your html resources:

    window = new BrowserWindow({
        x: windowState.x,
        y: windowState.y,
        width: windowState.width,
        height: windowState.height,
        backgroundColor: '#000000',
    })

    // load main file
    window.loadFile('path/to/index.html')

That html file acts just like any standard web page and can have its own styles and scripts. You should not be including your backend main.js file into your front end HTML. Instead, if you need to communicate between your front end and back end, you can either set up a websocket for communication or use the ipcMain and ipcRenderer to send messages.

just wondering, what if say you write some logic on the renderer side that is supposed to be main,what risk are we inviting? — hafiz ali, Apr 16 '22 at 11:31

Electron - How to use main and renderer processes

2 Answers2

Linked