Electron ist im Kern ein npm-Paket — wer Node.js und npm hat, ist drei Befehle vom „Hello World”-Fenster entfernt. Dieser Artikel zeigt den klassischen Weg (plain npm) und den modernen mit electron-vite, inklusive der wichtigsten Stolperfallen beim ersten Setup.
Voraussetzung: Node.js
Electron braucht Node.js — nicht zum Bauen, sondern weil das Electron-CLI über npm installiert wird. Empfehlung: aktuelle LTS-Version (Node 20 oder 22, je nach Zeitpunkt).
node --version # v22.11.0
npm --version # 10.9.0Wer Node noch nicht hat: nodejs.org/download oder via Versions-Manager wie nvm, fnm, volta. Auf macOS auch via Homebrew (brew install node).
Klassischer Weg — plain npm
mkdir my-electron-app && cd my-electron-app
npm init -y
npm install --save-dev electron--save-dev, weil Electron beim Packaging gebündelt wird — produktiv liegt es nicht als Dependency vor, sondern wird mit der App ausgeliefert.
package.json anpassen
{
"name": "my-electron-app",
"version": "0.1.0",
"type": "module",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^32.0.0"
}
}Drei wichtige Felder:
"main"— Einstiegspunkt für den Main-Prozess"type": "module"— moderne ESM-Syntax (importstattrequire); ab Electron 28 voll unterstützt"scripts.start"—electron .startet die App im aktuellen Verzeichnis
Hello-World-App
main.js
import { app, BrowserWindow } from 'electron';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
contextIsolation: true,
sandbox: true,
preload: path.join(__dirname, 'preload.js')
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});preload.js
// noch leer — wird in IPC-Artikel mit Inhalt gefülltindex.html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'" />
<title>My Electron App</title>
</head>
<body>
<h1>Hallo aus Electron</h1>
<p>Node: <span id="node"></span></p>
<p>Chromium: <span id="chrome"></span></p>
<p>Electron: <span id="electron"></span></p>
<script>
document.getElementById('node').textContent = process.versions.node;
document.getElementById('chrome').textContent = process.versions.chrome;
document.getElementById('electron').textContent = process.versions.electron;
</script>
</body>
</html>process.versions.* funktioniert hier, weil sandbox: true einen lesenden Zugriff auf Versionsinfos erlaubt, ohne die ganze Node-API zu öffnen.
Starten
npm startEin Fenster öffnet sich, zeigt drei Versions-Strings. Erfolg.
Moderner Weg — electron-vite
Für reale Projekte mit TypeScript, einem UI-Framework (React, Vue, Svelte) und HMR ist Plain-npm zu spartanisch. electron-vite bündelt Vite für Renderer und ESBuild für Main + Preload — schnelle Builds, HMR im Renderer.
npm create @quick-start/electron@latest my-app
cd my-app
npm install
npm run devDas Scaffold fragt nach Framework (React, Vue, Svelte, Vanilla) und TypeScript ja/nein. Resultat: ein vollständiges Projekt mit klarer src/main, src/preload, src/renderer Struktur und vorkonfigurierter Build-Pipeline.
Mehr Details im Artikel Forge vs. Builder vs. plain npm.
DevTools und Debugging
DevTools sind Standard im Renderer:
win.webContents.openDevTools();Zur Laufzeit auch via Tastenkürzel — Cmd+Alt+I (macOS) bzw. Ctrl+Shift+I (Windows/Linux).
Für den Main-Prozess: mit --inspect-Flag starten und Chrome DevTools (chrome://inspect) verbinden, oder VS Code mit Node-Debugger.
"scripts": {
"start": "electron .",
"debug": "electron --inspect=5858 ."
}Kompletter Datei-Baum nach diesem Schritt
my-electron-app/
├── main.js
├── preload.js
├── index.html
├── package.json
├── package-lock.json
└── node_modules/
└── electron/Vier Datei-Anpassungen + npm — fertig ist die App. Production-fähig ist sie damit noch nicht (kein Code-Signing, kein Auto-Update, keine Build-Pipeline) — aber funktional läuft sie auf macOS, Windows, Linux gleich.
Interessantes
Node-Version: LTS reicht.
Electron bringt seine eigene Node-Runtime mit — die installierte Node-Version auf dem Entwickler-Rechner wird nur fürs CLI gebraucht. Eine aktuelle LTS-Version ist immer ausreichend; Bleeding-Edge ist nicht nötig.
npm init -y ist okay als Start, aber dann manuell anpassen.
Das -y legt eine package.json mit Defaults an. Wichtig danach: "main" auf den richtigen Einstieg setzen, "type": "module" für ESM, und ein start-Script ergänzen. Sonst weiß Electron nicht, welche Datei den Main-Prozess hostet.
electron . startet die App im aktuellen Verzeichnis.
Das CLI liest package.json → main-Feld und führt diese Datei aus. Wer Multi-App-Projekte hat: über CLI-Argumente einen anderen Pfad mitgeben (electron ./other-app).
contextIsolation: true + sandbox: true ab Tag 1.
Beides ist seit Electron 12 bzw. 20 Default oder empfohlen. Beim Hello-World schon korrekt setzen — nicht später nachrüsten. Wer einmal mit nodeIntegration: true angefangen hat, hat überraschend viel Refactoring vor sich.
Erste Hürde sind oft fehlende Build-Tools.
Auf Linux ohne build-essential oder auf Windows ohne Build Tools schlägt npm install fehl, sobald native Module reinkommen. Für die reine Hello-World-App nicht relevant — aber bei jedem npm-Paket mit C++-Anteilen plötzlich Pflicht.
Plain npm reicht zum Lernen — für reale Apps electron-vite.
Vanilla-Electron mit JS, ohne Build-Tooling, ist perfekt zum Verstehen der Grundkonzepte. Sobald TypeScript, ein UI-Framework oder HMR ins Spiel kommen, lohnt der Wechsel zu electron-vite — sonst baust du dir die ganze Build-Pipeline selbst.
Weiterführende Ressourcen
Externe Quellen
- Quick Start Guide — offizielles Hello-World-Tutorial
- Application Architecture — Multi-Prozess-Modell
- electron-vite — modernes Vite-basiertes Setup
- Node.js Releases — LTS-Übersicht
- Electron Releases — Versionsplan