Kapitel 2: Entwicklungsumgebung einrichten

In diesem Kapitel richten wir die vollständige Entwicklungsumgebung für Electron ein. Alle Schritte sind praxisorientiert und für Anfänger geeignet.

2.1 Grundlegende Umgebungsvorbereitung

Node.js installieren und überprüfen

Electron benötigt Node.js als Laufzeitumgebung.

Schritt 1: Node.js herunterladen

Besuchen Sie die offizielle Webseite: https://nodejs.org/

Empfohlene Version: LTS (Long Term Support)
Aktuell: Node.js 20.x LTS

Schritt 2: Installation überprüfen

# Node.js Version prüfen
node --version

# npm Version prüfen
npm --version

Erwartete Ausgabe:

v20.x.x
10.x.x

Schritt 3: npm konfigurieren (optional)

# npm Mirror für China einrichten (optional)
npm config set registry https://registry.npmmirror.com

# Überprüfen
npm config get registry

Systemvoraussetzungen

Betriebssystem	Mindestversion	Empfohlen
Windows	Windows 10	Windows 11
macOS	macOS 10.15	macOS 12+
Linux	Ubuntu 18.04	Ubuntu 22.04+

2.2 Entwicklungswerkzeuge vorbereiten

Visual Studio Code installieren

VS Code ist der empfohlene Editor für Electron-Entwicklung.

Erforderliche Erweiterungen

Electron Extension Pack
Debugger for Electron
ESLint
Prettier - Code formatter
JavaScript (ES6) code snippets

Installation der Erweiterungen

# In VS Code: Strg+Umschalt+X
# Dann folgende Erweiterungen suchen und installieren:

Erweiterung	Zweck
Electron Extension Pack	Electron-spezifische Tools
Debugger for Electron	Debugging von Haupt- und Renderer-Prozess
ESLint	Code-Qualität sicherstellen
Prettier	Code-Formatierung

VS Code Konfiguration für Electron

Erstellen Sie eine .vscode/launch.json für das Debugging:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Hauptprozess",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args": ["."],
      "outputCapture": "std"
    },
    {
      "name": "Electron: Renderer-Prozess",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    }
  ]
}

2.3 Electron-Projekt initialisieren

Es gibt zwei Möglichkeiten, ein Electron-Projekt zu erstellen. Wählen Sie je nach Bedarf.

Möglichkeit 1: Manuell initialisieren

Schritt-für-Schritt Anleitung

# 1. Neues Projektverzeichnis erstellen
mkdir mein-electron-app
cd mein-electron-app

# 2. npm-Projekt initialisieren
npm init -y

# 3. Electron als Entwicklungsabhängigkeit installieren
npm install electron --save-dev

# 4. Projektstruktur erstellen
mkdir src
touch main.js
touch src/index.html
touch src/renderer.js

package.json manuell konfigurieren

{
  "name": "mein-electron-app",
  "version": "1.0.0",
  "description": "Meine erste Electron-App",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "electron . --dev"
  },
  "keywords": ["electron", "desktop"],
  "author": "Ihr Name",
  "license": "MIT",
  "devDependencies": {
    "electron": "^31.0.0"
  }
}

Möglichkeit 2: Offizielles Scaffolding verwenden

Option A: electron-quick-start

# Repository klonen
git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start

# Abhängigkeiten installieren
npm install

# Anwendung starten
npm start

Option B: electron-forge (empfohlen für Einsteiger)

# electron-forge global installieren
npm install -g @electron-forge/cli

# Neues Projekt erstellen
electron-forge init mein-app

# In das Projektverzeichnis wechseln
cd mein-app

# Anwendung starten
npm start

Vorteile von electron-forge:

• Integriertes Build-System
• Einfaches Packaging
• Vorkonfigurierte Vorlagen
• Hot-Reload-Unterstützung

Vergleich der Initialisierungsmethoden

Methode	Vorteile	Nachteile	Empfohlen für
Manuell	Vollständige Kontrolle	Mehr Konfiguration nötig	Lernzwecke
quick-start	Schnell, einfach	Wenig Features	Erste Tests
electron-forge	Professionell, voll ausgestattet	Größerer Projektumfang	Produktions-Apps

2.4 Projektverzeichnis-Struktur erklären

Standard-Projektstruktur

mein-electron-app/
├── .vscode/                  # VS Code Konfiguration
│   └── launch.json
├── src/                      # Quellcode
│   ├── index.html           # Renderer-Prozess HTML
│   ├── renderer.js          # Renderer-Prozess JavaScript
│   └── styles.css           # CSS-Styles
├── main.js                  # Hauptprozess (Main Process)
├── preload.js               # Preload-Skript (IPC-Brücke)
├── package.json             # Projektkonfiguration
├── .gitignore               # Git Ignorieren-Liste
└── README.md                # Dokumentation

Kern dateien im Detail

main.js (Hauptprozess)

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

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

app.whenReady().then(createWindow);

index.html (Renderer-Prozess)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron App</title>
</head>
<body>
  <h1>Hallo Electron!</h1>
  <script src="renderer.js"></script>
</body>
</html>

package.json (Konfiguration)

Feld	Bedeutung	Beispiel
main	Hauptprozess-Einstiegsdatei	"main": "main.js"
scripts	Start-/Build-Skripte	"start": "electron ."
devDependencies	Entwicklungsabhängigkeiten	"electron": "^31.0.0"

2.5 Electron-Anwendung ausführen

Start-Skript konfigurieren

{
  "scripts": {
    "start": "electron .",
    "dev": "electron . --dev",
    "build": "electron-builder"
  }
}

Anwendung starten

# Entwicklungsmodus
npm start

# Oder direkt mit npx
npx electron .

Erfolgreiche Ausführung überprüfen

Erwartetes Ergebnis:
✓ Ein neues Fenster öffnet sich
✓ Der Titel zeigt "Electron App"
✓ Die index.html wird gerendert
✓ Keine Fehlermeldungen in der Konsole

Häufige Startprobleme

Problem	Ursache	Lösung
electron: command not found	Nicht installiert	npm install electron erneut ausführen
Cannot find module 'electron'	Pfad-Problem	In Projektverzeichnis sein
Fenster öffnet sich nicht	Fehler in main.js	Entwicklerkonsole prüfen

2.6 Häufige Umgebungsprobleme beheben

Problem 1: Abhängigkeitsinstallation fehlgeschlagen

Symptom

npm ERR! code ELECTRON_DOWNLOAD_FAILED

Lösungen

# Lösung 1: Mirror für Electron setzen
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

# Lösung 2: Proxy konfigurieren (falls hinter Firewall)
npm config set proxy http://proxy.example.com:8080
npm config set https-proxy http://proxy.example.com:8080

# Lösung 3: Cache leeren und neu installieren
npm cache clean --force
rm -rf node_modules
npm install

Problem 2: Anwendung startet nicht

Diagnose-Schritte

# 1. Node.js und npm Version prüfen
node --version
npm --version

# 2. Electron Installation prüfen
ls node_modules/electron

# 3. main.js auf Syntaxfehler prüfen
node main.js  # Sollte Fehler werfen (da es Electron benötigt)

Problem 3: Versionskonflikte

Electron und Node.js Kompatibilität

Electron Version	Node.js Version	Chromium Version
31.x	20.x	126.x
30.x	20.x	124.x
29.x	18.x	122.x

# Electron Version prüfen
npx electron --version

# Node.js Version in Electron prüfen
npx electron -p "process.versions"

Problem 4: Berechtigungsprobleme (Windows)

# Als Administrator ausführen (PowerShell)
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

# Oder npm mit Administratorrechten installieren

Diagnose-Checkliste

☑ Node.js installiert und im PATH?
☑ npm funktioniert korrekt?
☑ Projektverzeichnis korrekt?
☑ package.json existiert?
☑ main-Feld in package.json korrekt?
☑ Electron installiert (in node_modules)?
☑ Keine Syntaxfehler in main.js?
☑ index.html existiert?

Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• Node.js für Electron vorzubereiten
• VS Code mit den richtigen Erweiterungen einzurichten
• Electron-Projekte auf zwei Arten zu initialisieren
• Die Projektstruktur zu verstehen
• Anwendungen zu starten und Probleme zu beheben

Im nächsten Kapitel werden wir die Electron-Architektur und die Prozesse im Detail betrachten.