Forge vs. Builder vs. plain npm

Die vier Optionen im Überblick

Wichtig: electron-vite und electron-builder sind oft kombiniert — Vite für Dev, Builder für Distribution. Forge ist die Alternative, die beides selbst macht.

plain npm

Was du selbst tun musst:

• Build-Setup für TypeScript, JSX, CSS-Frameworks
• Dev-Server / HMR (oder darauf verzichten)
• Packaging zu .app/.exe/.AppImage
• Code-Signing-Pipeline
• Auto-Update-Logik

Wofür’s reicht:

• Hello-World, kleine Vanilla-JS-Tools
• Lehr- und Demo-Projekte
• Maximale Kontrolle, du kennst genau jeden Schritt

Nicht produktiv für reale Apps gedacht — irgendein Build-Tool willst du fast immer.

electron-vite

Dev-Setup mit Vite für den Renderer und ESBuild für Main + Preload.

npm create @quick-start/electron@latest my-app

Was du bekommst:

• src/main, src/preload, src/renderer — klare Struktur
• TypeScript out-of-the-box
• React/Vue/Svelte-Templates
• HMR im Renderer (sofortiger Reload bei Code-Änderungen)
• Sehr schneller Build dank ESBuild

Was fehlt:

• Kein Packaging — Vite macht den Code-Bundle, aber nicht das .dmg/.exe. Dafür kombiniert man electron-vite typisch mit electron-builder.

Faustregel: für moderne Apps mit Framework + TypeScript ist electron-vite der Default geworden.

electron-builder

Reines Packaging-Tool. Nimmt deinen Code (egal wie gebundlet) und macht daraus distribuierbare Pakete.

npm install --save-dev electron-builder

{
  "scripts": {
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.example.myapp",
    "productName": "MyApp",
    "mac": { "target": "dmg", "category": "public.app-category.utilities" },
    "win": { "target": "nsis" },
    "linux": { "target": ["AppImage", "deb"] }
  }
}

Stärken:

• Sehr ausgereift, viele Plattform-Optionen
• Code-Signing für macOS und Windows mit minimaler Konfiguration
• Auto-Update via electron-updater (Schwester-Paket)
• Multi-Platform-Builds (mit Einschränkungen — Mac-Builds nur auf Mac wegen Signing)

Schwächen:

• Konfiguration kann komplex werden
• Macht keine Dev-Pipeline, nur Packaging — du brauchst zusätzlich Vite o. ä.

Electron Forge

Offizielles All-in-One-Toolkit vom Electron-Team. Kombiniert Dev-Server, Build, Packaging und Publishing in einem CLI.

npm init electron-app@latest my-app -- --template=vite

Templates: vanilla, webpack, vite, vite-typescript u. a.

npm start              # Dev-Server mit HMR
npm run package        # Unverpackte App in out/
npm run make           # Distribuierbare Pakete (DMG, NSIS, deb …)
npm run publish        # Direkt zu GitHub Releases o. ä.

Stärken:

• Aus einer Hand — Setup, Entwicklung, Packaging, Publish
• Integriertes Plugin-System (Maker für DMG, NSIS, Squirrel; Publishers für GitHub, S3, Azure)
• Wird vom Electron-Team gepflegt (long-term mit Electron synchron)

Schwächen:

• Andere Konfig-Logik als electron-builder — Migration zwischen beiden ist Aufwand
• Etwas mehr „Magic” — bei spezifischen Anforderungen muss man tief in die Plugin-Konfiguration

Entscheidungs-Matrix

In der Praxis: electron-vite + electron-builder ist der häufigste Modern-Stack in 2026. Electron Forge holt auf, vor allem für neue Projekte ohne historische Builder-Konfiguration.

Was alle Tools NICHT lösen

Egal welches Tool — folgende Themen musst du selbst angehen:

• Code-Signing-Zertifikate — bei Apple kostenpflichtig, bei Windows OV/EV-Zert
• macOS Notarization — Apple-Service, dauert oft Minuten pro Build
• CI/CD-Setup — GitHub Actions, GitLab CI etc.; Mac-Builds nur auf Mac-Runnern
• Update-Server — GitHub Releases reicht oft, manche brauchen eigenen S3-Bucket

Tools machen Packaging, aber nicht den ganzen Distributions-Prozess.

Weiterführende Ressourcen

Externe Quellen

• Electron Forge — offizielle Doku
• electron-builder — Konfigurations-Referenz
• electron-vite — Vite-basiertes Setup
• Electron Boilerplates — Community-Vorlagen
• Vite — Build-Tool, das hinter electron-vite steht

Verwandte Artikel

• Was ist Electron?
• Setup und erste Schritte
• Projektstruktur