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

Electron.js makes creating Desktop apps very easy especially if you are already familiar with JavaScript, CSS and html. However, there are a few concepts to that might need getting used to one of them of is inter process communication and that's what this video is about!

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
04:43 - What if we wanted to access Node.js built-ins from our renderer process? - practical example
06:40 - expose Node’s process.versions in mainworld using Context Bridge
10:06 - Send a message from renderer to main and allow users to input a URL that open a webpage in a new window
12:23 - using ipcRenderer.send
13:44 - setting a listener in main process [ IpcMain.on ]
14:31 - Create new window to display inputted URL
13:31 - Trigger ipc Communication through renderer
16:11 - two way ipc Communication
17:27 - ipcRenderer.invoke
17:50 - Open dialog for selecting files [ dialog.showOpenDialog ]
18:44 - ipcMain.handle + async callback function
20:58 - get filepath from main process once user makes a selection

Links:

Electron Forge Docs:
https://www.electronforge.io/

Electron.js Docs:
https://www.electronjs.org/

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