Electron

Highlights

Where it is used

• Code editors and developer tools
• Desktop clients for chat and collaboration
• Internal business applications
• Shipping an existing web product as a desktop app

Install

1. 1

   Set up Node.js

   Electron is installed and run through Node.js and npm. Install a Node.js LTS release and confirm that both versions print.

   node -v && npm -v

   Copy
2. 2

   Add Electron to a project

   Create a package.json in a new folder and install electron as a dev dependency. Then set the main field in package.json to main.js and add a start script that runs electron .

   mkdir my-electron-app && cd my-electron-app && npm init -y && npm install --save-dev electron

   Copy
3. 3

   Start with Electron Forge

   For a project that already includes packaging and publishing, use the scaffolding command from Electron Forge, the official tooling. Run npm start inside the generated folder.

   npm init electron-app@latest my-app

   Copy

Your first program

Open your first window

main.js is the entry point of the main process. Once the app is ready it creates an 800×600 BrowserWindow and loads index.html from the same folder. On macOS, apps conventionally stay running after the last window closes, so the app only quits on other platforms. Put a simple index.html next to main.js and run npm start.

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

npm init -y
npm install --save-dev electron
npm pkg set main=main.js scripts.start="electron ."
npm start

Everyday tools

Electron Forge

Official all-in-one tooling for scaffolding, running in development, packaging, building installers, and publishing.

electron-builder

A widely used packaging tool for multi-platform installers, code signing, and auto-updates.

Electron Fiddle

An official playground for writing small Electron experiments and running them against different Electron versions.

Playwright

Launches your Electron app for end-to-end tests that drive its windows and evaluate code in the main process.

Official docs and resources

• OfficialElectron
• OfficialElectron Documentation
• OfficialElectron Forge
• LearnElectron Tutorial
• LearnElectron Fiddle
• ReferenceBrowserWindow API
• ReferenceElectron Security Checklist
• Communityelectron/electron on GitHub

Languages

• TypeScriptTypeScript adds static types to JavaScript, catching errors before your code runs and making large codebases easier to maintain.
• JavaScriptJavaScript is a dynamic programming language standardized as ECMAScript that runs in every web browser and in runtimes such as Node.js.