feat: migrate from electron-webpack to electron-forge

Electron upgrade : 10.1.3 => 13.1.7
Angular upgrade : 10.1.3 => 12.1.2

workspaces/electron-app/main/assets/config.json

@@ -0,0 +1,29 @@
+{
+  "development": {
+    "config_id": "development",
+    "mainLogFile": "dist/dev-main.log",
+    "mainLogLevel": "debug",
+    "isIconAvailable": true,
+    "isNodeIntegration": false,
+    "isContextIsolation": true,
+    "isEnableRemoteModule": false,
+    "isOpenDevTools": true
+  },
+  "e2e-test": {
+    "config_id": "e2e-test",
+    "mainLogFile": "dist/e2e-main.log",
+    "mainLogLevel": "error",
+    "isIconAvailable": true,
+    "isNodeIntegration": true,
+    "isContextIsolation": false,
+    "isEnableRemoteModule": true,
+    "isOpenDevTools": false
+  },
+  "production": {
+    "config_id": "production",
+    "mainLogFile": "main.log",
+    "mainLogLevel": "error",
+    "isIconAvailable": false,
+    "isOpenDevTools": true
+  }
+}

workspaces/electron-app/main/components/app.ts

@@ -0,0 +1,65 @@
+import { app, BrowserWindow, shell } from 'electron';
+import { Window } from './window';
+
+export class App {
+  private static _wrapper: Window;
+
+  public static launch() {
+    app.on('window-all-closed', App.quit);
+    app.on('activate', App.start);
+    app.on('ready', App.start);
+
+    // Fix warning by applying electron new default value for this property
+    // Further details : https://github.com/electron/electron/issues/18397
+    app.allowRendererProcessReuse = true;
+
+    // Limit navigation and open external links in default browser
+    app.on('web-contents-created', App.openExternalLinksInDefaultBrowser);
+  }
+
+  public static get window(): BrowserWindow | any {
+    return this._wrapper ? this._wrapper.window : null;
+  }
+
+  private static start() {
+    // On MacOS it is common to re-create a window from app even after all windows have been closed
+    if (!App.window) {
+      App._wrapper = new Window();
+    }
+  }
+
+  private static quit() {
+    // On MacOS it is common for applications to stay open until the user explicitly quits
+    if (process.platform !== 'darwin') {
+      app.quit();
+    }
+  }
+
+  private static openExternalLinksInDefaultBrowser = (
+    event: Electron.Event,
+    contents: Electron.WebContents
+  ) => {
+    // Disabling creation of new windows
+    contents.on(
+      'new-window',
+      (event: Electron.Event, navigationUrl: string) => {
+        // Blocking this event from loading in current app
+        event.preventDefault();
+        // Telling the user platform to open this event's url in the default browser
+        shell.openExternal(navigationUrl);
+      }
+    );
+
+    // Limiting navigation
+    contents.on(
+      'will-navigate',
+      (event: Electron.Event, navigationUrl: string) => {
+        const parsedUrl = new URL(navigationUrl);
+        // Allowing local navigation only
+        if (parsedUrl.origin !== 'http://localhost:4200') {
+          event.preventDefault();
+        }
+      }
+    );
+  };
+}

workspaces/electron-app/main/components/window.ts

@@ -0,0 +1,116 @@
+import { app, BrowserWindow, ipcMain, nativeImage } from "electron";
+import * as path from "path";
+import * as url from "url";
+import { AbstractService } from "../services/abstract-service";
+import { MultiplesService } from "../services/multiples-service";
+import { Logger } from "../utils/logger";
+
+declare const global: any;
+declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
+
+export class Window {
+  private _window: BrowserWindow | any;
+
+  constructor() {
+    this.createWindow();
+    this.loadRenderer();
+    this.registerService(MultiplesService);
+  }
+
+  private createWindow(): void {
+    this._window = new BrowserWindow({
+      width: 800,
+      height: 600,
+      backgroundColor: "#FFFFFF",
+      // FIXME
+      // icon: this.loadIcon(),
+      webPreferences: {
+        // Default behavior in Electron since 5, that
+        // limits the powers granted to remote content
+        // except in e2e test when those powers are required by Spectron
+        nodeIntegration: global.gConfig.isNodeIntegration,
+        // Isolate window context to protect against prototype pollution
+        // except in e2e test when that access is required by Spectron
+        contextIsolation: global.gConfig.isContextIsolation,
+        // Ensure that JS values can't unsafely cross between worlds
+        // when using contextIsolation
+        worldSafeExecuteJavaScript: global.gConfig.isContextIsolation,
+        // Disable the remote module to enhance security
+        // except in e2e test when that access is required by Spectron
+        enableRemoteModule: global.gConfig.isEnableRemoteModule,
+        // Use a preload script to enhance security
+        preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
+      },
+    });
+  }
+
+  private loadIcon(): Electron.NativeImage {
+    let iconObj = null;
+    if (global.gConfig.isIconAvailable) {
+      const iconPath = path.join(__dirname, "icons/icon.png");
+      Logger.debug("Icon Path", iconPath);
+      iconObj = nativeImage.createFromPath(iconPath);
+      // Change dock icon on MacOS
+      if (iconObj && process.platform === "darwin") {
+        app.dock.setIcon(iconObj);
+      }
+    }
+    return iconObj;
+  }
+
+  private loadRenderer(): void {
+    if (global.gConfig.config_id === "development") {
+      // Dev mode, take advantage of the live reload by loading local URL
+      this.window.loadURL(`http://localhost:4200`);
+    } else {
+      // Else mode, we simply load angular bundle
+      const indexPath = url.format({
+        pathname: path.join(__dirname, `../renderer/angular_window/index.html`),
+        protocol: "file:",
+        slashes: true,
+      });
+      this.window.loadURL(indexPath);
+    }
+
+    if (global.gConfig.isOpenDevTools) {
+      this.openDevTools();
+    }
+
+    // When the window is closed`
+    this._window.on("closed", () => {
+      // Remove IPC Main listeners
+      ipcMain.removeAllListeners();
+      // Delete current reference
+      delete this._window;
+    });
+  }
+
+  private openDevTools(): void {
+    this._window.webContents.openDevTools();
+    this._window.webContents.on("devtools-opened", () => {
+      this._window.focus();
+      setImmediate(() => {
+        this._window.focus();
+      });
+    });
+  }
+
+  private registerService(AnyService: typeof AbstractService) {
+    const service = new AnyService();
+    ipcMain.on(service.receptionChannel(), async (event, ...args) => {
+      // Handling input
+      Logger.debug(`Received [${service.receptionChannel()}]`, args);
+      const data = await service.process(...args);
+
+      // Handling output
+      if (service.sendingChannel()) {
+        Logger.debug(`Sent [${service.sendingChannel()}]`, data);
+        this._window.webContents.send(service.sendingChannel(), ...data);
+      }
+    });
+  }
+
+  public get window(): BrowserWindow | any {
+    return this._window;
+  }
+}

workspaces/electron-app/main/index.ts

@@ -0,0 +1,19 @@
+import * as fs from "fs-extra";
+import * as _ from "lodash";
+import * as path from "path";
+import { App } from "./components/app";
+
+declare const global: any;
+
+// Load config
+const currentEnv = process.env.X_NODE_ENV || process.env.NODE_ENV;
+const appConfig =
+  currentEnv === "development"
+    ? fs.readJsonSync(path.join(__dirname, "config.json"))
+    : fs.readJsonSync(path.join(__dirname, "config.json"));
+const defaultConf = appConfig.development;
+const currentConf = appConfig[currentEnv];
+global.gConfig = _.merge(defaultConf, currentConf);
+
+// Launch app
+App.launch();

workspaces/electron-app/main/services/abstract-service.ts

@@ -0,0 +1,13 @@
+export class AbstractService {
+  receptionChannel(): string {
+    throw new Error('Method not implemented.');
+  }
+
+  sendingChannel(): string {
+    throw new Error('Method not implemented.');
+  }
+
+  process(...args: any): any {
+    throw new Error('Method not implemented.');
+  }
+}

workspaces/electron-app/main/services/multiples-service.ts

@@ -0,0 +1,21 @@
+import { WindowApiConst } from "shared-lib";
+import { AbstractService } from "./abstract-service";
+
+export class MultiplesService extends AbstractService {
+  receptionChannel(): string {
+    return WindowApiConst.MULTIPLES_INPUT;
+  }
+
+  sendingChannel(): string {
+    return WindowApiConst.MULTIPLES_OUTPUT;
+  }
+
+  process(...args: any): any {
+    // From 1 to 10, return input multiples
+    const multiples = [];
+    for (let n = 1; n <= 10; n++) {
+      multiples.push(n * args[0]);
+    }
+    return multiples;
+  }
+}

workspaces/electron-app/main/utils/logger.ts

@@ -0,0 +1,139 @@
+import { app } from "electron";
+import * as os from "os";
+import * as path from "path";
+import * as winston from "winston";
+
+declare const global: any;
+
+export class Logger {
+  private static singleton: Logger;
+  private _logger: winston.Logger;
+
+  public static error(message: string, ...meta: any[]) {
+    Logger.initSingleton();
+    Logger.singleton._logger.error(message, ...meta);
+  }
+
+  public static warn(message: string, ...meta: any[]) {
+    Logger.initSingleton();
+    Logger.singleton._logger.warn(message, ...meta);
+  }
+
+  public static info(message: string, ...meta: any[]) {
+    Logger.initSingleton();
+    Logger.singleton._logger.info(message, ...meta);
+  }
+
+  public static http(message: string, ...meta: any[]) {
+    Logger.initSingleton();
+    Logger.singleton._logger.http(message, ...meta);
+  }
+
+  public static verbose(message: string, ...meta: any[]) {
+    Logger.initSingleton();
+    Logger.singleton._logger.verbose(message, ...meta);
+  }
+
+  public static debug(message: string, ...meta: any[]) {
+    Logger.initSingleton();
+    Logger.singleton._logger.debug(message, ...meta);
+  }
+
+  public static silly(message: string, ...meta: any[]) {
+    Logger.initSingleton();
+    Logger.singleton._logger.silly(message, ...meta);
+  }
+
+  private static initSingleton() {
+    if (!Logger.singleton) {
+      Logger.singleton = new Logger();
+    }
+  }
+
+  private constructor() {
+    this._logger = winston.createLogger({
+      level: "debug",
+      format: winston.format.json(),
+      defaultMeta: { service: "user-service" },
+      transports: [
+        new winston.transports.File({
+          filename: this.getLogFilename(),
+          level: global.gConfig.mainLogLevel,
+          format: winston.format.combine(
+            winston.format.timestamp(),
+            this.fileFormat
+          ),
+        }),
+      ],
+    });
+
+    // If we're not in production then log also to the `console` with the format:
+    // `${info.timestamp} ${info.level}: ${info.message} JSON.stringify({ ...rest }) `
+    if (global.gConfig.config_id === "development") {
+      this._logger.add(
+        new winston.transports.Console({
+          stderrLevels: ["error", "warn"],
+          format: winston.format.combine(
+            winston.format.timestamp(),
+            this.consoleFormat
+          ),
+        })
+      );
+    }
+  }
+
+  /**
+   * Returns log filename with standard path
+   * In production, returns absolute standard path depending on platform
+   */
+  private getLogFilename() {
+    let filename = global.gConfig.mainLogFile;
+    if (global.gConfig.config_id === "production") {
+      const appName = app.getName();
+      if (process.platform == "linux") {
+        filename = `.config/${appName}/${filename}`;
+      } else if (process.platform == "darwin") {
+        filename = `Library/Logs/${appName}/${filename}`;
+      } else if (process.platform == "win32") {
+        filename = `AppData\\Roaming\\${appName}\\${filename}`;
+      }
+    }
+    return path.join(os.homedir(), filename);
+  }
+
+  /**
+   * Custom winston file format
+   * Write JSON logs with given format :
+   * `${timestamp} ${level} : ${info.message} : ${meta})`
+   */
+  private fileFormat = winston.format.printf((data: any) => {
+    return JSON.stringify(this.prepareLogData(data));
+  });
+
+  /**
+   * Custom winston console format
+   * Write logs with given format :
+   * `${timestamp} ${level} : ${info.message} : JSON.stringify({ ...meta }) `
+   */
+  private consoleFormat = winston.format.printf((data: any) => {
+    const preparedData = this.prepareLogData(data);
+    return (
+      `${preparedData.timestamp} ${preparedData.level} : ` +
+      `${preparedData.message} : ${JSON.stringify(preparedData.meta)}`
+    );
+  });
+
+  private prepareLogData = (data: any) => {
+    const additionalData = { ...data };
+    delete additionalData.timestamp;
+    delete additionalData.level;
+    delete additionalData.message;
+    delete additionalData.service;
+    return {
+      timestamp: data.timestamp,
+      level: data.level,
+      message: data.message,
+      meta: additionalData,
+    };
+  };
+}

workspaces/electron-app/renderer/README.md

@@ -0,0 +1,3 @@
+preload.ts is the only file that matters in this directory.
+
+The others files are not needed at all, but they are required for electron forge webpack config.

workspaces/electron-app/renderer/index.css

@@ -0,0 +1,6 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  margin: auto;
+  max-width: 38rem;
+  padding: 2rem;
+}

workspaces/electron-app/renderer/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+
+  </head>
+  <body>
+    <h1>💖 Hello World!</h1>
+    <p>Welcome to your Electron application.</p>
+  </body>
+</html>

workspaces/electron-app/renderer/index.ts

@@ -0,0 +1,31 @@
+/**
+ * This file will automatically be loaded by webpack and run in the "renderer" context.
+ * To learn more about the differences between the "main" and the "renderer" context in
+ * Electron, visit:
+ *
+ * https://electronjs.org/docs/tutorial/application-architecture#main-and-renderer-processes
+ *
+ * By default, Node.js integration in this file is disabled. When enabling Node.js integration
+ * in a renderer process, please be aware of potential security implications. You can read
+ * more about security risks here:
+ *
+ * https://electronjs.org/docs/tutorial/security
+ *
+ * To enable Node.js integration in this file, open up `main.js` and enable the `nodeIntegration`
+ * flag:
+ *
+ * ```
+ *  // Create the browser window.
+ *  mainWindow = new BrowserWindow({
+ *    width: 800,
+ *    height: 600,
+ *    webPreferences: {
+ *      nodeIntegration: true
+ *    }
+ *  });
+ * ```
+ */
+
+import './index.css';
+
+console.log('👋 This message is being logged by "renderer.js", included via webpack');

workspaces/electron-app/renderer/preload.ts

@@ -0,0 +1,32 @@
+// To secure user platform when running renderer process stuff,
+// Node.JS and Electron APIs are only available in this script
+import { contextBridge, ipcRenderer } from "electron";
+import { WindowApi, WindowApiConst } from "shared-lib";
+
+// So we expose protected methods that allow the renderer process
+// to use the ipcRenderer without exposing the entire object
+const windowApi: WindowApi = {
+  send: (channel: any, ...data: any) => {
+    if (WindowApiConst.SENDING_SAFE_CHANNELS.includes(channel)) {
+      ipcRenderer.send(channel, ...data);
+    }
+  },
+  receive: (channel: string, func: (...data: any) => void) => {
+    if (WindowApiConst.RECEIVING_SAFE_CHANNELS.includes(channel)) {
+      // Deliberately strip event as it includes `sender`
+      ipcRenderer.on(channel, (event, ...args) => func(...args));
+    }
+  },
+};
+
+declare const window: any;
+if (process.env.X_NODE_ENV === "e2e-test") {
+  // Injecting windowApi directly
+  window.api = windowApi;
+} else {
+  // ContextBridge API can only be used when contextIsolation is enabled
+  // which is normally the case except in e2e test mode
+  contextBridge.exposeInMainWorld("api", windowApi);
+}
+
+console.log("The preload script has been injected successfully.");

workspaces/electron-app/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "references": [{ "path": "../shared-lib" }]
+}