For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /de/docs/web/ship-in-5-minutes.md (or send Accept: text/markdown).
In 5 Minuten shippen
Führen Sie die Webdemonstration auf Ihrem Computer mit genauen Windows- und macOS-Befehlen aus, ohne kostenpflichtige Anbieteranmeldeinformationen und mit einem klaren Pfad zu echten datenbankgestützten Konten.
1. Bereiten Sie Ihren Computer vor und öffnen Sie das Projekt
Zuerst abschließen Bevor Sie beginnen: Nehmen Sie die GitHub-Einladung an, installieren Sie Node.js 22 oder neuer, Git, einen Editor und Corepack, und klonen Sie dann Ihr Web-Repository oder das All Platforms-Monorepo. Öffnen Sie den Supastack-Ordner im Editor und wählen Sie Terminal → Neues Terminal. Sie sollten package.json in der Dateiliste der obersten Ebene des Editors sehen. Alle folgenden Befehle werden von diesem Repository-Stammverzeichnis aus ausgeführt.
Damit startet die lokale Demonstration ohne Konten bei AI-, Abrechnungs- oder E-Mail-Anbietern und ohne Docker. Planen Sie zusätzliche Zeit für das erstmalige Herunterladen von Abhängigkeiten ein. Befolgen Sie in den nächsten Schritten nur den Windows-Block oder nur den macOS/Linux-Block; Führen Sie nicht beides aus.
2. Konfigurationsdateien erstellen – macOS / Linux
Führen Sie in Ihrem Terminal jede Zeile unten aus. Die erste Kopie erstellt .env für spätere Migrationsbefehle. Der zweite erstellt apps/web/.env.local, den der Webserver tatsächlich liest. Beide enthalten die lokalen Einstellungen des Beispiels. Wenn eine der Zieldateien bereits vorhanden ist, behalten Sie sie und überspringen Sie den Kopierbefehl. Gespeicherte Einstellungen nicht überschreiben. Windows-Benutzer verwenden stattdessen den nächsten Abschnitt.
corepack pnpm install lädt die Bibliotheken herunter, die die App benötigt. Wenn Corepack Sie auffordert, pnpm herunterzuladen, antworten Sie mit „y“. Warten Sie, bis der Vorgang abgeschlossen ist und die Eingabeaufforderung des Terminals zurückkehrt. Eine abschließende Done-Meldung ohne Fehler bedeutet, dass Sie fortfahren können.
cp .env.example .env
cp .env.example apps/web/.env.local
corepack pnpm install2. Konfigurationsdateien erstellen – Windows PowerShell
Verwenden Sie diese Befehle in PowerShell aus dem Ordner, der package.json enthält. Wenn .env oder apps/web/.env.local bereits vorhanden ist, überspringen Sie die Kopierzeile und behalten Sie Ihre Einstellungen bei. Warten Sie, bis die Installation abgeschlossen ist, bevor Sie den Server starten. Wenn die Skriptausführung blockiert ist, verwenden Sie corepack.cmd anstelle von corepack, wie unter „Vor dem Start“ erläutert.
Copy-Item .env.example .env
Copy-Item .env.example apps/web/.env.local
corepack pnpm install3. Starten Sie den Webserver – lassen Sie dieses Terminal geöffnet
Führen Sie den folgenden Befehl im Repository-Stammverzeichnis aus. Es startet nur die Web-App und funktioniert daher sowohl im reinen Web-Repository als auch im All Platforms-Monorepo. Warten Sie, bis das Terminal Local: http://localhost:3000 und Ready anzeigt. Das Kompilieren der ersten Seite kann etwas länger dauern. Das Terminal sollte weiterlaufen; das wird erwartet.
Im All Platforms-Monorepo startet corepack pnpm dev die verfügbaren Entwicklungsarbeitsbereiche gemeinsam. Wenn apps/docs vorhanden ist, verwendet diese separate Dokumenten-App http://localhost:3001.. Die öffentlichen Handbücher, die Sie lesen, sind Teil der Web-App unter http://localhost:3000/docs.. Sie benötigen Port 3001 nicht, um diesem Tutorial zu folgen.
corepack pnpm --filter @supastack/web dev4. Öffnen Sie die App und erledigen Sie eine lokale Aufgabe
Öffnen Sie in der Adressleiste Ihres Browsers http://localhost:3000, um die Startseite anzuzeigen. Öffnen Sie dann http://localhost:3000/dashboard.. Behalten Sie den vorab ausgefüllten Namen und die E-Mail-Adresse bei oder geben Sie Ihre eigenen Testwerte ein und klicken Sie auf Start local reference flow. Dadurch wird ein In-Memory-Demonstrationsarbeitsbereich erstellt. Es wird kein dauerhaftes Konto erstellt und keine echte E-Mail gesendet.
Öffnen Sie in der Demonstration AI task in der Seitenleiste, geben Sie eine kurze Anfrage ein, z. B. „Zusammenfassen der lokalen Akzeptanzkriterien“, und klicken Sie auf Queue local task. Wenn der Status „Warteschlange“ lautet, klicken Sie auf Run local task und dann auf View result. Sie sollten eine abgeschlossene Ausgabe und einen Email queued-Status sehen. Die KI-Reaktion ist bewusst vorgetäuscht und wiederholbar. Die E-Mail in der Warteschlange ist lokal. Durch einen Neustart des Servers werden diese Demonstrationsdaten gelöscht.
Um /auth für eine echte Anmeldung zu verwenden, starten Sie zunächst Postgres und wenden Sie Migrationen mithilfe des Datenbank- und Migrationshandbuchs an. Danach können Anmelde- oder OTP-Nachrichten von EMAIL_PROVIDER=local unter http://localhost:3000/mail-preview; überprüft werden, sie erreichen keinen externen Posteingang. Bei der mobilen Anmeldung wird anstelle der Demonstrationssitzung ebenfalls diese datenbankgestützte Authentifizierung verwendet.
5. Stoppen Sie, starten Sie neu und beheben Sie häufig auftretende Probleme beim ersten Start
Erfolg bedeutet, dass die Homepage geladen wird, der lokale Arbeitsbereich geöffnet wird und eine Aufgabe in der Warteschlange abgeschlossen wird. Wenn Sie fertig sind, klicken Sie auf das Serverterminal und drücken Sie Strg + C. Um später fortzufahren, öffnen Sie erneut ein Terminal im Repository-Stammverzeichnis und wiederholen Sie den Serverbefehl ab Schritt 3; Sie installieren Abhängigkeiten nicht jedes Mal neu.
Wenn localhost:3000 nicht geöffnet wird, überprüfen Sie, ob das Serverterminal noch läuft und Ready anzeigt. Wenn Port 3000 verwendet wird, stoppen Sie den anderen Entwicklungsserver mit Strg + C und versuchen Sie es erneut. Wenn Sie nach dem Öffnen von /auth einen Datenbankfehler sehen, kehren Sie zur Demonstration zu /dashboard zurück oder lesen Sie die Datenbankanleitung durch. Wenn die lokale Demonstration fehlt, überprüfen Sie APP_ENV=local, AI_PROVIDER=fake, BILLING_PROVIDER=local, EMAIL_PROVIDER=local und JOB_PROVIDER=local in apps/web/.env.local und starten Sie dann neu.
Um den Namen und den Marketingtext anzupassen, öffnen Sie apps/web/src/marketing/site-config.ts im Editor. Folgen Sie Branding für die genauen Felder und Verifizierungsschritte. Für die Darstellungseinstellungen des echten Kontos schließen Sie zunächst die Datenbankeinrichtung ab und öffnen dann /settings/appearance. Automatisierte Annahmebefehle dauern länger als diese erste exemplarische Vorgehensweise. Sie finden sie unter „Workspace-Befehle“.
Wenn du die Einrichtung fortsetzen möchtest, lies Datenbank einrichten.