What is Electron?

Electron is a library for building desktop applications with JavaScript, HTML, and CSS. These applications can be packaged to run on Mac, Windows, and Linux, and can also be published to the Mac and Windows App Stores. This means that as long as you have front-end development skills, you can easily build cross-platform desktop applications.

Electron’s Main Process and Renderer Process

Electron has two types of processes: the main process and the renderer process. Some modules can only run on one or the other, while others have no restrictions. The main process acts more as a behind-the-scenes role, while renderer processes are the individual windows of the application.

Main Process

The main process, typically a file named main.js, is the entry point for every Electron application. It controls the application’s lifecycle (from opening to closing). It can call native elements and create new (multiple) renderer processes. Additionally, the Node API is built into it.

Renderer Process

The renderer process is a browser window of the application. Unlike the main process, multiple renderer processes can exist (note: an Electron application can only have one main process) and they are independent of each other (they can also be hidden).

The main window is typically named index.html. These are like typical HTML files, but Electron gives them full access to the Node API. This is what differentiates it from a browser.

Inter-Process Communication (IPC)

To call main process functions from a web page — such as closing a window, minimizing, or fullscreen — which only the main thread can control, Electron provides a communication mechanism called IPC. I’ll gradually introduce how to use IPC.

Angular 7 + Electron

After introducing some basic Electron concepts, I’ll teach you how to build an ng7-based desktop application from scratch.

1. Install the Latest angular-cli

npm i -g @angular/cli

2. Generate an Angular Project

ng new electro-angular7

3. Install the Latest Version of electron

cd electro-angular7
npm install --save-dev electron@latest

4. Add the Main Process main.js File to the Project Root

const { app, BrowserWindow , ipcMain } = require('electron');
const  path  = require('path')
// Keep a global reference of the window object, otherwise the window will
// close automatically when the JavaScript object is garbage collected.
let win;
function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1000,
    height: 670 ,
  });

  // Load the index.html of the app.
  win.loadURL(`file://${__dirname}/dist/electro-angular7/index.html`);
  // Open the DevTools.
  win.webContents.openDevTools();


  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object. If your app supports multiple windows,
    // this is where you delete the corresponding element from an array.
    win = null;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS, applications generally stay active in the menu bar
  // until the user explicitly quits with Cmd + Q.
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On macOS, re-create a window when the dock icon is clicked
  // and no other windows are open.
  if (win === null) {
    createWindow();
  }
});

// In this file, you can continue writing the rest of the main process code.
// It can also be split into several files and imported with require.


// IPC communication code
// Minimize login window
ipcMain.on('window-min', function() {
  win.minimize();
});
// Maximize login window
ipcMain.on('window-max', function() {
  if (win.isMaximized()) {
    win.restore();
  } else {
    win.maximize();
  }
});
ipcMain.on('window-close', function() {
  win.close();
});

5. Modify package.json

Add the main.js location and npm scripts electron command

{
  "scripts": {
    "electron": "electron .",
  },
    "main": "main.js",
}

6. Modify index.html

Find src/index.html

<!-- Find -->
<base href="/">

<!-- Change to: -->
<base href="./">

7. Run It

# Build your angular app
npm run build
# Start the electron app
npm run electron

That’s it for now. I’ll continue diving deeper into Electron later.

Article Link: