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.
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.
Share Improve this question edited Dec 17, 2019 at 11:44 half of a glazier asked Dec 17, 2019 at 11:20 half of a glazierhalf of a glazier 2,0762 gold badges26 silver badges51 bronze badges2 Answers
Reset to default 9With electron you have to pay attention in which context your JS files run:
- process / nodejs context
Typicallymain.jsruns 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 ponent, 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.jsin 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/docs/tutorial/first-app).
The main process and the render process are pletely 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 municate between your front end and back end, you can either set up a websocket for munication or use the ipcMain and ipcRenderer to send messages.