Electron JS Inter Process Communication ( IPC ) Explained - 2024 Beginner Friendly Guide

We will start out by going through processes in Electron. Then we will create an Electron app to start learn how to implement the three main patterns of Inter-process communication:

1. Main Process to Renderer Process
2. Renderer Process to Main Process
3. Two way

Chapters:

00:00 - Processes in an Electron App
00:18 - The main process
00:51 - The Renderer Process
01:26 - How do processes communicate?
01:40 - Create a new project to learn from doing - we will use electron-forge
03:15 - examine project's scaffolding and files created
03:46 - preload script
10:06 - Send a message from renderer to main and allow users to input a URL that open a webpage in a new window
14:31 - Create new window to display inputted URL
13:31 - Trigger ipc Communication through renderer
16:11 - two way ipc Communication
20:58 - get filepath from main process once user makes a selection

Links:

Electron Forge Docs:

#electronjs
#codingtutorial
#IPC
#softwaredevelopment
#javascript
#nodejs
#codingtutorial

[PikoCanFly]

Hi 👋 I hope you find this video useful to you! I would also love to hear your thoughts and any suggestions you might have for me! 😊

[kokomugi]

A lot of the videos are outdated due to the Electron 20+ sandboxing things and needing to run preload to expose certain nodejs modules. Great video explaining how everything works!

[hernanescudero]

I found your channel on reddit. It's pure gold

[bytesnb]

AWESOME.... TRULY 💯💯💯💯💯💯THANK YOU VERY VVVERY MUCH!! 🤗🤗🤗🤗

[jesusStudent]

Thanks you! This video help me a lot. The explain is so good!

[shattereddnb]

Great video!

Related question, what is the correct way of using JS libraries (npm packages) in the renderer?

Say I want to use a large frontend library like Three.js or Phaser, is there a way to export the whole lib/namespace to the renderer, or should I just set sandboxing to false for that window? If so, it that safe?

[DavidOsee-English]

Like the content.
I kindly suggest that you use a pop filter to improve the sound quality.
Hmm, nice voice by the way !

[AsmodeusClips]

Really good explanation, even I understood it, and I thought it would be too advanced for me 👍Great job

[yahyafurkanklcoglu]

Hi, i am new at electronjs and i have to learn it so quick. i watched so many videos but i didnt understand some parts. Could we please have a short Google meet with you? 30 mins is enough for my questions. i know probably you are so busy and you cant answer each people like me. but i really need it. also thanks for this video

[athanadrian]

Amazing job++ Tnx a lot for the up-to-date electron. Are you thinking of creating a react-electron video implementing navigation and db (sqlite, or any kind). It would be more than perfect.

[rikki]

why no one focus on electron js if it can build desktop application. May be something wrong with this framework. I am hardly seeing any recent tutorial for electron js mostly 3-4 year old