Electron Builder

my-app/
├── package.json
├── main.js          # Main process (Node.js)
├── preload.js       # Bridge between main/renderer
├── renderer.js      # Renderer process (browser)
└── index.html       # UI

Core Concepts

Main Process

• Runs in Node.js environment
• Manages app lifecycle, windows, native APIs
• Access to BrowserWindow, Menu, dialog, Tray

Renderer Process

• Runs in Chromium browser
• Handles UI logic
• Communicates with main process via IPC

IPC Communication

// main.js
const { ipcMain } = require('electron');
ipcMain.handle('get-data', async () => {
  return await fetchData();
});

// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('api', {
  getData: () => ipcRenderer.invoke('get-data')
});

// renderer.js
const data = await window.api.getData();

Native Features

Menus

const { Menu } = require('electron');
const template = [
  { label: 'File', submenu: [{ role: 'quit' }] }
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));

Dialogs

const { dialog } = require('electron');
const result = await dialog.showOpenDialog({ properties: ['openFile'] });

Notifications

new Notification({ title: 'Hello', body: 'World' }).show();

Auto-Updater

const { autoUpdater } = require('electron-updater');
autoUpdater.checkForUpdatesAndNotify();

Building & Distribution

# Build for current platform
npm run make

# Build installers
npx electron-builder --win --mac --linux

Platform-specific outputs

• Windows: NSIS installer (.exe), MSI
• macOS: DMG, pkg
• Linux: AppImage, deb, rpm