Tutorials

Tutorial: Lovable AI-Projekte in VS Code nutzen und bearbeiten

Melden

Hier ist ein ausführliches Tutorial, wie du dein Lovable-Projekt (ehemals GPT Engineer) in Visual Studio Code (VS Code) integrierst und bearbeitest.

Lovable ist ein leistungsstarkes KI-Tool, das komplette Web-Anwendungen erstellt. Während die KI im Browser arbeitet, möchtest du für fortgeschrittene Anpassungen, Debugging oder Deployment oft die gewohnte Umgebung von VS Code nutzen.

In dieser Anleitung lernst du, wie du den Code von Lovable lokal auf deinen Rechner holst und Änderungen synchronisierst.

1. Voraussetzungen

Bevor du startest, stelle sicher, dass du Folgendes installiert hast:

  • Visual Studio Code
  • Node.js (inklusive npm)
  • Git
  • Einen GitHub-Account

Schritt 1: Das Lovable-Projekt mit GitHub verbinden

Lovable nutzt GitHub als Brücke zwischen der KI-Plattform und deiner lokalen Entwicklungsumgebung.

  1. Öffne dein Projekt in Lovable.dev.
  2. Klicke oben rechts auf den Button "GitHub" (oder das GitHub-Icon).
  3. Wähle "Connect to GitHub".
  4. Gib deinem Repository einen Namen und klicke auf "Create Repository".
  5. Lovable pusht nun den gesamten generierten Code in dieses neue GitHub-Repo.

Schritt 2: Das Projekt in VS Code klonen

Jetzt holen wir den Code auf deinen Computer.

  1. Gehe auf GitHub zu deinem neu erstellten Repository.
  2. Klicke auf den grünen Button "Code" und kopiere die HTTPS- oder SSH-URL.
  3. Öffne VS Code.
  4. Drücke Strg + Shift + P (Windows) oder Cmd + Shift + P (Mac) und tippe: Git: Clone.
  5. Füge die URL ein und wähle einen Ordner auf deinem PC aus.
  6. Klicke nach Abschluss des Vorgangs auf "Open".

Schritt 3: Abhängigkeiten installieren

Da Lovable-Projekte meist auf React (Vite), Tailwind CSS und shadcn/ui basieren, müssen die Pakete lokal installiert werden.

  1. Öffne das Terminal in VS Code (Strg + ö oder Terminal -> New Terminal).
  2. Gib folgenden Befehl ein:
    npm install

    (Dies installiert alle notwendigen Bibliotheken, die in der package.json gelistet sind.)

Schritt 4: Den lokalen Entwicklungsserver starten

Um die App live in VS Code zu sehen und zu testen:

  1. Gib im Terminal ein:
    npm run dev
  2. Klicke auf den Link (meist http://localhost:8080 oder 5173), um die App im Browser zu öffnen.

Schritt 5: Änderungen vornehmen und mit Lovable synchronisieren

Das Beste an der Lovable-Integration ist, dass die Synchronisation in beide Richtungen funktionieren kann.

A. Lokale Änderungen zu GitHub hochladen

Wenn du Code in VS Code änderst (z.B. in der App.tsx), musst du diese speichern und committen:

  1. Gehe in VS Code zum Reiter Source Control (das Icon mit den drei Kreisen).
  2. Gib eine Nachricht ein (z.B. "Farbe angepasst") und klicke auf Commit.
  3. Klicke auf Sync Changes (Push), um es zu GitHub hochzuladen.

B. Lovable über Änderungen informieren

Sobald du den Code zu GitHub gepusht hast, erkennt Lovable die Änderungen im Repository. Wenn du das nächste Mal einen Prompt in Lovable eingibst, wird die KI auf Basis deines manuell geänderten Codes weiterarbeiten.

Profi-Tipps für die Arbeit mit Lovable in VS Code

1. Die richtigen Extensions

Installiere diese VS Code Erweiterungen für eine bessere Erfahrung:

  • ESLint / Prettier: Damit dein Code sauber bleibt.
  • Tailwind CSS IntelliSense: Hilft dir enorm bei den Stylings, die Lovable verwendet.
  • GitHub Copilot: Ergänzt die Lovable-KI perfekt direkt im Editor.

2. Vorsicht bei Strukturänderungen

Vermeide es, die grundlegende Dateistruktur (z.B. den Speicherort der Komponenten) massiv zu verändern, da die Lovable-KI sonst eventuell den Überblick verliert, wo sie neuen Code einfügen soll.

3. Supabase Integration

Die meisten Lovable-Projekte nutzen Supabase als Datenbank. Wenn du lokal arbeitest, stelle sicher, dass du die .env-Datei korrekt konfiguriert hast. Oft kopiert Lovable die Umgebungsvariablen nicht automatisch in dein lokales Git (aus Sicherheitsgründen). Du musst die URL und den Anon Key aus deinem Supabase-Dashboard in eine lokale .env.local Datei kopieren.

Zusammenfassung

  1. Sync: Lovable → GitHub.
  2. Clone: GitHub → VS Code.
  3. Install: npm install.
  4. Dev: npm run dev.
  5. Push: VS Code → GitHub (Lovable lernt daraus).

Viel Erfolg bei der Entwicklung deiner App!

0