Electron

Information

Electron is a framework for building cross-platform desktop applications with web technologies such as HTML, CSS, and JavaScript / TypeScript. It combines Chromium for rendering with Node.js for local system access, which makes it useful for internal tools, developer utilities, offline-first business applications, and desktop wrappers around existing web products.

Main Functionalities and Features

Common Developer Use Cases

Electron is a framework for building cross-platform desktop applications using web technologies — HTML, CSS, and JavaScript. It bundles Chromium and Node.js into a single runtime so you can write desktop apps with the same code as a web application.

Each Electron release ships with a specific embedded Node.js version (not the system-installed one). The embedded Node.js version follows Node.js LTS releases. Check the Electron release page to see which Node.js version a given Electron release bundles.

For your development environment, install a Node.js LTS version as well. Electron’s tooling and build plugins (electron-builder, electron-forge) are tested against LTS releases. See node.md for Node.js LTS versioning details.

Installation

Prerequisites

Create a minimal Electron project

Initialize the project:

npm init --yes
npm install --save-dev electron

If the desktop app is intended to wrap a Windows background service or service-like integration, additional packages may be useful depending on architecture:

npm install --save node-windows winston

Update package.json:

{
    "name": "my-electron-app",
    "version": "1.0.0",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

Create main.js:

const {app, BrowserWindow, Menu, Tray} = require('electron')
const path = require('node:path')

let tray = null

const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 1000,
        height: 700,
        show: false,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: true,
            nodeIntegration: false
        }
    })

    mainWindow.loadFile('index.html')

    tray = new Tray(path.join(__dirname, 'tray-icon.png'))

    const contextMenu = Menu.buildFromTemplate([
        {
            label: 'Open window',
            click: () => mainWindow.show()
        },
        {
            label: 'Exit',
            click: () => app.quit()
        }
    ])

    tray.setToolTip('My Electron App')
    tray.setContextMenu(contextMenu)

    tray.on('click', () => {
        mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show()
    })
}

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

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

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

Optional preload.js:

const {contextBridge} = require('electron')

contextBridge.exposeInMainWorld('appInfo', {
    platform: process.platform
})

Create index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron App</title>
</head>
<body>
<h1>Hello from Electron</h1>
<p>This UI runs in Chromium, but the app behaves like a desktop application.</p>
</body>
</html>

Run it:

npm start

Configuration

Typical Electron configuration topics:

Main process vs. a renderer process

Electron applications usually have at least two responsibility layers:

Keep privileged logic in the main process or behind a secure preload boundary, not directly inside the renderer.

Security baseline

For most real projects, prefer:

Do not enable nodeIntegration in renderer windows unless there is a strong and reviewed reason.

Preparations for Developers

Suggested project structure

One practical structure is:

my-app/
├── main.js
├── preload.js
├── index.html
├── package.json
├── assets/
└── src/

For bigger apps, separate:

Development workflow

Common workflow:

  1. Start a frontend development server if you use an SPA framework.
  2. Start Electron and point it either to local built files or a dev server URL.
  3. Keep main-process logs visible during development.
  4. Test tray behavior, window restoration, and shutdown flow manually.

If the app wraps a backend or local daemon, also test startup ordering and failure handling.

Preparation for Release and Live

Packaging

Electron apps are usually packaged with tools such as:

Typical release outputs:

Release considerations

Before release, review:

Auto-start and tray-style apps

If the application is intended to run mostly in the tray:

Usage, tips, and tricks

Coding tips and tricks

Debugging

Useful approaches:

Common issues

See also