You might have come across the main process and renderer process in Electron. This is a simple explanation of them.
Main process
The main process takes care of starting and running your app. In the electron tutorial app you can see this line in package.json:
"main": "main.js"This is the primary entry point to an electron app. And this is running in the main process. All the files you require from this file will be running in the main process as well.
If we would call process.type and log it with console.log() the word “browser” would turn up in the terminal running the app.
console.log(process.type)
console log in main process
Renderer process
The renderer process takes care of showing your app in the Chromium browser. When the app is ready to show the electron tutorial app runs this command in main.js:
mainWindow.loadURL(`file://${__dirname}/index.html`)The javascript files you include from index.html or any other html-document is running in the renderer process. If we would run the same console.log() call as above, the word “renderer” would show up. But this time in the developer tools of chromium:
console log in renderer process
Documentation
So what API calls can we do from the different processes? The official documents are kind to us and list them under Main Process and Renderer process. But there are also api-calls that work in both processes.
Communicating between the processes
The api allows us to communicate between the processes. You can do that with remote which provides a simple way to do inter-process communication between renderer and the main process.
IPCRenderer and IPCMain
The api also allows us to use ipcRenderer and ipcMain to help us send events between the different processes. We can then listen to these events and implement the functionality we need.