Good tutorial but I'm stuck on the last piece. Requesting data from renderer while in main. Like invoke() but the other way around. How can I achieve this?
You would use the webContents field in the window object to send that way. Something like win.webContents.send() will send from main Proc to renderer. Then in renderer you listen using ipcRenderer on
@@tylerlaceby I've been doing this: In main: ipcMain.on('channel_resp', (returnFromRenderer) => { ... }); win.webContents.send('channel', ...); In Preload: // Functions that allow me to access ipcRenderer.send() and ipcRender.on() without nodeIntegration on. Pretty much just arrow functions calling .send() and .on() respectively. In Renderer: // window.api contains the functions in preload window.api.on('channel', (...) => { let returnFromRenderer = ... window.api.send('channel_resp', returnFromRenderer); }); This is quite error prone, doesn't scale well, and overall seems quite janky considering how popular Electron is. Surely there's a better way to return a value from renderer?
Well it depends. Most people won’t be accessing the DOM directly as they will be using frameworks such as svelte or react. Also that’s just really bad practice. The preload script is meant to act as a api between the front end of your app and the backend. Think of it like a web socket connection. The server can send and receive data over web sockets. Also the client can send and re is e data over web sockets . In this case the server is the main process and the client is the renderer process. The preload is just a middleman that sets up your functions to access the preload. Also I recommend you never access the dom from the preload. If you are doing that it means your probably making some bad design decisions. If you need any help or have any questions please message me I discord. JSimplified#9121
Cheers! A lot of content on Electron is quite outdated by now so it's great to see some current methods explained for noobs like me, appreciate it!
Exactly what i needed
Yay I love to hear it.
I was suffering all the day to understand this! And finally, thanks to you I get it now 🌹
excellent video. Easy to understand and updated. Thanks and greetings from Peru in Latin America
Cheers! Excellent video! Thank!
Man... this tutorial is perfect!
It's really enlightening.
THANK YOU VERY MUCH FOR SHARING YOUR KNOWLEDGE
this is great, thank you man !
this is what exactly what I looking for, thanks a lot
THANKS MAN!
Such a nice video. You should probably make more content brother. God bless you
Thanks man I appreciate the friendly words.
I will try to more videos man.
Gold mine!
Can you do a video on building a environment with Electron + Typescript + React
if you found this video useful
yes, it is
Good tutorial but I'm stuck on the last piece. Requesting data from renderer while in main. Like invoke() but the other way around. How can I achieve this?
You would use the webContents field in the window object to send that way.
Something like win.webContents.send() will send from main Proc to renderer.
Then in renderer you listen using ipcRenderer on
@@tylerlaceby I've been doing this:
In main:
ipcMain.on('channel_resp', (returnFromRenderer) => {
...
});
win.webContents.send('channel', ...);
In Preload:
// Functions that allow me to access ipcRenderer.send() and ipcRender.on() without nodeIntegration on. Pretty much just arrow functions calling .send() and .on() respectively.
In Renderer:
// window.api contains the functions in preload
window.api.on('channel', (...) => {
let returnFromRenderer = ...
window.api.send('channel_resp', returnFromRenderer);
});
This is quite error prone, doesn't scale well, and overall seems quite janky considering how popular Electron is. Surely there's a better way to return a value from renderer?
What if we keep the communication between preload and main process only, because you can access DOM from preload too right?
Well it depends. Most people won’t be accessing the DOM directly as they will be using frameworks such as svelte or react.
Also that’s just really bad practice. The preload script is meant to act as a api between the front end of your app and the backend.
Think of it like a web socket connection. The server can send and receive data over web sockets. Also the client can send and re is e data over web sockets .
In this case the server is the main process and the client is the renderer process. The preload is just a middleman that sets up your functions to access the preload.
Also I recommend you never access the dom from the preload. If you are doing that it means your probably making some bad design decisions.
If you need any help or have any questions please message me I discord.
JSimplified#9121
@@tylerlaceby Thank you!
Your playlist is out of order, my friend.
Yea I need to fix that. Thanks for reminding me 😅