Teil 7 – GitHub Codespaces: Entwicklung in der Cloud

Warum Codespaces?

Das Einrichten einer Entwicklungsumgebung war schon immer ein Reibungspunkt:

• Unterschiedliche Betriebssysteme im Team.
• Abhängigkeiten, die lokal installiert werden müssen.
• „Bei mir läuft’s, bei dir nicht“-Probleme.

👉 GitHub Codespaces löst dieses Problem:
Eine vollständige Entwicklungsumgebung läuft direkt in der Cloud – konfiguriert, versioniert und für alle gleich.

---

Was sind GitHub Codespaces?

• Ein Container-basierter Entwicklungs-Workspace in der Cloud.
• Läuft auf GitHub-Infrastruktur, aber gesteuert über VS Code (Browser oder Desktop).
• Nutzt eine Devcontainer-Konfiguration im Repo.
• Kann CPU, RAM und sogar Docker enthalten.

👉 Statt Stunden mit Setup zu verbringen, klickt man auf „Open in Codespaces“ und startet sofort.

---

Vorteile von Codespaces

1. Schnelles Onboarding
   Neue Entwickler brauchen keine Installationsanleitungen mehr. Repo öffnen → fertig.
2. Einheitliche Umgebung
   Jeder im Team hat dieselbe Konfiguration. Keine Unterschiede durch Betriebssystem oder lokale Tools.
3. Leistung on demand
   Codespaces laufen auf GitHub-Servern. Selbst auf schwachen Laptops kannst du mit starken Maschinen arbeiten.
4. Cloud-first-Entwicklung
   Man kann Projekte auch direkt im Browser starten – ideal für unterwegs.
5. Integration mit GitHub
   Codespaces sind eng mit Repos, Branches und PRs verbunden.

---

Erste Schritte mit Codespaces

Codespace öffnen

1. Auf ein Repository gehen.
2. Grünen Code-Button klicken.
3. Tab „Codespaces“ → „Create codespace on main“.

👉 Innerhalb weniger Sekunden öffnet sich eine VS Code Instanz im Browser mit dem gesamten Projekt.

---

Devcontainer – das Herzstück von Codespaces

Die Konfiguration eines Codespace erfolgt über eine .devcontainer/devcontainer.json-Datei im Repository.

Einfaches Beispiel

{
  "name": "Node.js Dev",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "postCreateCommand": "npm install",
  "forwardPorts": [3000],
  "customizations": {
    "vscode": {
      "extensions": ["dbaeumer.vscode-eslint"]
    }
  }
}

Erklärung:

• image → Basis-Container mit Node.js 18.
• postCreateCommand → läuft nach Start (installiert Dependencies).
• forwardPorts → Port 3000 wird im Codespace erreichbar gemacht.
• extensions → ESLint-Extension in VS Code automatisch installiert.

👉 Damit haben alle im Team dieselbe Node.js-Umgebung.

---

Erweiterte Devcontainer-Funktionen

• Mehrere Services (z. B. App + Datenbank): "dockerComposeFile": "docker-compose.yml"
• Features hinzufügen (z. B. GitHub CLI, Docker in Docker): "features": { "ghcr.io/devcontainers/features/github-cli:1": {} }
• Dotfiles einbinden → persönliche Shell-Configs.

👉 Codespaces sind extrem flexibel und können fast jede Umgebung abbilden.

---

Praxisbeispiel: Web-App mit Codespaces

Ein Team entwickelt eine React-App.

• Lokal müsste jeder Node.js, npm, evtl. Docker installieren.
• Mit Codespaces reicht ein Klick.

Workflow:

1. Codespace öffnen.
2. Devcontainer installiert automatisch Node.js + Dependencies.
3. Entwickler startet Server: npm start
4. App läuft → GitHub zeigt eine Vorschau im Browser.

👉 Niemand musste lokal etwas installieren.

---

Integration mit Pull Requests

Codespaces sind besonders stark im Zusammenspiel mit PRs:

• Reviewer können den PR direkt in einem Codespace öffnen.
• Dort läuft die App mit den Änderungen.
• Feedback ist einfacher, weil man den Code ausführen kann statt nur zu lesen.

---

Kosten und Ressourcen

GitHub Codespaces bietet:

• Frei-Kontingent (z. B. 120 Stunden pro Monat bei bestimmten Plänen).
• Flexible Maschinen (2–32 CPUs, bis zu 64 GB RAM).
• Abrechnung nach Nutzung (pro Stunde).

👉 Für Open Source gibt es oft zusätzliche Freikontingente.

---

Codespaces vs. lokale Entwicklung

Aspekt	Lokal	Codespaces
Einrichtung	Oft stundenlang	Minuten (Klick)
Einheitlichkeit	Unterschiedlich bei jedem	Immer gleich
Leistung	Abhängig vom Laptop	Skalierbar (Cloud-Maschinen)
Offline-Arbeit	Möglich	Nur online
Flexibilität	Total frei	Stark, aber an GitHub gebunden

👉 Codespaces sind kein Ersatz für alles, aber eine große Erleichterung für Teams und Open Source.

---

Best Practices für Codespaces

1. Devcontainer pflegen
   • Regelmäßig aktualisieren.
   • Nur das Nötigste installieren, um Startzeiten kurz zu halten.
2. Extensions dokumentieren
   • Entwickler sollen wissen, welche Tools im Codespace automatisch installiert werden.
3. Secrets sicher handhaben
   • Codespaces unterstützen auch Repository Secrets.
4. Staging/Testing in Codespaces
   • Ideal für schnelle Tests neuer Features.
5. Onboarding mit Codespaces
   • Neue Teammitglieder können sofort starten, ohne Setup-Hölle.

---

Die Zukunft: Lokal oder Cloud?

Codespaces zeigt, wohin die Reise geht:

• Entwicklungsumgebungen wandern in die Cloud.
• Lokale Unterschiede verschwinden.
• Onboarding wird Sekunden statt Stunden dauern.

Aber: Lokale Entwicklung wird nicht verschwinden – gerade für Offline-Arbeit oder sehr spezifische Setups.

👉 Wahrscheinlich wird es ein Hybrid-Modell geben: lokal für tiefe Arbeit, Codespaces für Flexibilität und Teamwork.