An Electron app runs in two distinct processes: the main process and the render process.
Main process
The main process is responsible for responding to applications life cycle events, starting and quitting the application.
When we launch an Electron application, the framework runs the script specified in package.json's main field (main process). The script creates the application window (renderer process).
Main process responsibilities:
- Show dialog box to access file system
- Create and manage menus
- Handle system events
- Managing render processes
- Start window
- close window
- Switch between multiple windows
Renderer process
The renderer process is responsible for loading the HTML pages to display the graphical user interface. Each HTML page can load and execute additional javaScript files. We can create as many windows as we need for the application. This process allow us to use Node.js APIs directly from HTML pages.
Note: Electron exposes full access to Node.js both in the main and the renderer process.
For more information, visit: https://electronjs.org/docs/tutorial/application-architecture
Creating main.js file
Before creating main.js, we'll discuss, which modules required to load on startup and which events emits when Electron.js initialized and when to launch our startup window:
1. const electron = require('electron')
2. const app = electron.app
3. const BrowserWindow = electron.BrowserWindow
4. app.on ('ready', function (){ ... })
5. app.on ('window-all-closed', function () { ... })
6. app.on ('activate', function () { ... })
Line 1: First, we'll load Electron.js framework in main process (main.js) file. It gives us access to all of the Electron APIs as well as any extensions to Node that Electron provides.
Line 2: The app module is responsible for managing the life cycle of our application. See https://electronjs.org/docs/api/app
Line 3: The BrowserWindow module creates and manages the application window. See https://electronjs.org/docs/api/browser-window
The next linex (4,5,6) events. The app instance is listening to three events here: ready, window-all-closed, and activate.
Line 4: ready event. Emitted when Electron has finished initializing and now we can launch our startup BrowserWindow (index.html) in the callback function.
Line 5: window-all-closed event. Emitted when all windows have been closed.
Line 6. activate event. Emitted when the application is activated. (required for Mac os).
Now we'll create our complete main.js file, which is the entry point for our application and responsible for loading the main window:
1. const electron = require('electron')
// Module to control application life.
2. const app = electron.app
// Module to create native browser window.
3. const BrowserWindow = electron.BrowserWindow
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
4. let mainWindow
//callback function for ready event
5. function createWindow () {
// Create the browser window.
6. mainWindow = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
7. mainWindow.loadURL('file://'+__dirname+'/index.html')
// Emitted when the window is closed.
8. mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
9. mainWindow = null
10. })
11. }
12. app.on('ready', createWindow)
// Quit when all windows are closed.
13. app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
14. if (process.platform !== 'darwin') {
15. app.quit()
16. }
17. })
18. app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
19. if (mainWindow === null) {
20. createWindow()
21. }
22. })
1. const electron = require('electron')
The electron constant is the Electron module. It gives you access to all of the Electron APIs as well as any extensions to Node that Electron provides.
2. const app = electron.app
The app constant is the part of the Electron API that gives you access to the event life cycle of our application.
3. const BrowserWindow = electron.BrowserWindow
The BrowserWindow constant represents your Renderer Process. We will use BrowserWindow to create an instance of Chromium, the windows that make up the UIs of our application.
6. mainWindow = new BrowserWindow({width: 800, height: 600})
Creates an instance of a BrowserWindow, passing along an object used to configure that window to be 800 pixels wide and 600 pixels high.
7. mainWindow.loadURL ('file://' + __dirname + 'index.html')
Loads the HTML page using the loadURL function. This code loads the HTML file from the current directory. This file is the starting point for the Renderer Process.
8. mainWindow.on('closed', function () {
Listens for the closed event on the new window instance.
9. mainWindow = null
It nulls the window instance, so no more reference to the main window. You can add your own logic here, for example a confirmation box.
12. app.on('ready', createWindow)
Launch startup BrowserWindow in the callback function on Line 5.
13. app.on('window-all-closed', function () {
Only necessary for Mac platform. App not quit after closing all windows, we use app.quit() to quit the application.
14. if (process.platform !== 'darwin') {
The process.platform property returns a string identifying the operating system platform on which the Node.js process is running. For instance, process.platform will return darwin for Mac and win32 for the Windows OS.
See https://nodejs.org/api/process.html#process_process_platform.
15. app.quit()
Terminates the application.
18. app.on('activate', function () {
19. if (mainWindow === null) {
Re-create window in Mac