Getting Started DE

Erste Schritte

🌐 English · Deutsch

Diese Seite führt vom frischen Clone bis zum ersten Login im Browser. Die PDC Redbot Webapp ist ein SvelteKit-Dashboard (Frontend + BFF), das über den Companion-Cog pdc_webdashboard mit deinem Red-DiscordBot spricht. Du brauchst drei Dinge: eine Discord-OAuth2-Anwendung, den geladenen Cog auf dem Bot und eine ausgefüllte .env. Das lokale Setup dauert wenige Minuten.

Voraussetzungen

Komponente	Anforderung
Node.js	≥ 18 (LTS empfohlen)
npm	Mit Node.js gebündelt
Red-DiscordBot	Läuft, mit geladenem pdc_webdashboard-Cog
Discord-Anwendung	Eine OAuth2-App im Discord Developer Portal

Bot und Web-App sind zwei getrennte Prozesse. Bei lokaler Entwicklung laufen sie meist auf derselben Maschine, das Gateway ist dann unter http://127.0.0.1:6970 erreichbar.

1. Clonen und installieren

git clone https://github.com/pd-codes/PDC_Redbot_Webapp.git
cd PDC_Redbot_Webapp
npm install

2. .env anlegen

cp .env.example .env

Öffne .env in einem Editor und trage die Werte aus den nächsten Schritten ein. Die vollständige Referenz aller Variablen steht auf Konfiguration.

3. Discord-OAuth2-Anwendung erstellen

1. Im Discord Developer Portal New Application anklicken.
2. Im Bereich OAuth2 die Client ID und das Client Secret in die .env kopieren:

   DISCORD_CLIENT_ID=deine-client-id
   DISCORD_CLIENT_SECRET=dein-client-secret

3. Unter OAuth2 → Redirects die exakte Redirect-URI hinterlegen, die die App nutzt. Lokal ist das:

   http://localhost:5173/auth/callback
   

   Sie muss zeichengenau mit DISCORD_REDIRECT_URI in der .env übereinstimmen (Schema, Host, Port, Pfad), sonst lehnt Discord den Login ab.

   DISCORD_REDIRECT_URI=http://localhost:5173/auth/callback

Die App fordert die Scopes identify und guilds an – genug, um zu wissen, wer du bist und auf welchen Servern. Wie der Login funktioniert, steht unter Authentifizierung.

4. Gateway-Token vom Bot holen

Web-App und Cog teilen ein Geheimnis (Token), damit nur dein Dashboard mit dem Bot reden kann. Auf dem Bot ausführen ([p] durch deinen Prefix ersetzen):

[p]pdcdashboard token

Den Wert in die .env kopieren:

GATEWAY_URL=http://127.0.0.1:6970
GATEWAY_TOKEN=das-token-vom-bot

GATEWAY_URL ist standardmäßig http://127.0.0.1:6970. Ändere es nur, wenn das Gateway auf einem anderen Host/Port lauscht (z. B. in Docker, siehe Deployment).

5. Session-Secret erzeugen

Sessions werden per HMAC mit SESSION_SECRET signiert. Erzeuge einen langen Zufallswert:

openssl rand -hex 32

In die .env einfügen:

SESSION_SECRET=der-erzeugte-zufalls-hex-string

In Produktion startet die App nicht, wenn SESSION_SECRET fehlt oder auf dem Default steht. Setze immer einen eigenen Wert.

6. Dev-Server starten

npm run dev

Das Dashboard ist jetzt unter http://localhost:5173 erreichbar.

7. Erster Login

http://localhost:5173 öffnen, Mit Discord anmelden klicken, dem Consent-Screen zustimmen – du wirst zurück ins Dashboard geleitet. Du siehst die Server, die du mit dem Bot teilst, sowie Cog-Widgets/-Panels, für die du berechtigt bist. Als Bot-Owner erhältst du zusätzlich Cog-Verwaltung, Einstellungen und System.

Die öffentliche Landing-Seite und die Befehlsliste sind ohne Login erreichbar.

Fehlerbehebung

Symptom	Wahrscheinliche Ursache
„Invalid redirect URI" von Discord	DISCORD_REDIRECT_URI passt nicht exakt zum Portal-Eintrag
Login klappt, aber keine Server/Daten	Falsches/leeres GATEWAY_TOKEN, oder Bot/Cog läuft nicht
„Connection refused" zum Gateway	GATEWAY_URL falsch oder pdc_webdashboard-Cog nicht geladen
App startet in Produktion nicht	SESSION_SECRET fehlt oder steht auf dem Default

Nächste Schritte

• Konfiguration – jede .env-Variable erklärt
• Authentifizierung – OAuth2-Flow, Sessions und Berechtigungsstufen
• Web-UI – Tour durch alle Seiten
• Deployment – Betrieb in Produktion