Electron ¶

Electron is a library to develop cross-platform applications in JavaScript. You can use it with frameworks such as Vue.js, React, Angular, or simply HTML+CSS.

Electron is running your application in a Chromium web browser. If enabled, you can open the devtools with CTRL+SHIFT+I.

Some applications made using electron are VSCode, Discord, GitHub Desktop, MongoDBCompass, and Microsoft Teams...

• Documentation

Electron is following a fast-moving development pace, so there are frequently releasing major releases 😥.

• electron-quick-start (10.2k ⭐)
• secure-electron-template (1.4k ⭐) and new-to-electron
• electron-sample-apps (3.8k ⭐)
• examples-electron (0.2k ⭐)

Other interesting projects

• electron-seamless-titlebar (0.5k ⭐)
• the-ultimate-electron-guid
• awesome-electron (24k ⭐)

Run electron in the current directory

{
  "scripts": {
    "start": "electron ."
  }
}

Creating a Window

mainWindow = new BrowserWindow({
    // some properties
    width: 1080, height: 720, icon: "...",
    webPreferences: {
        // ❌ loaded before each view
        // seems deprecated
        preload: path.join(__dirname, './src/preload.js'),
        // ❌ enable remote, deprecated
        // https://github.com/electron/remote
        // ipcRenderer should be used instead
        enableRemoteModule: true
    }
});

Random notes ¶

➡️Open devtools on start, or disable devtools

// Open the DevTools.
mainWindow.webContents.openDevTools();

// Close the DevTools
mainWindow.webContents.on("devtools-opened", () => {
    mainWindow.webContents.closeDevTools();
});

• electron-build-service
• electron-devtools-installer
• Auto-updating electron application
• Secure Electron Source (article (2019))

• Getting started with electronjs (2020)