WeWeb + Supabase Tutorial: Web-App ohne Code bauen

Schritt 1: Supabase-Projekt erstellen

Gehe zu supabase.com und erstelle ein neues Projekt. Wähle die Region "Frankfurt (EU Central 1)" für DSGVO-Konformität, deine Daten bleiben in Deutschland und der EU.

Gib deinem Projekt einen aussagekräftigen Namen (z.B. "mein-saas-produkt") und wähle ein sicheres Datenbankpasswort. Bewahre das Passwort sicher auf, du benötigst es für Direktverbindungen.

Nach der Erstellung findest du in den Projekteinstellungen deine Project URL und den anon key. Diese beiden Werte brauchst du für die WeWeb-Verbindung. Die Project URL sieht so aus: https://[deine-id].supabase.co.

Schritt 2: Datenbanktabellen anlegen

In Supabase öffnest du den Table Editor und erstellst deine erste Tabelle. Für ein einfaches Task-Management-System: Tabelle "tasks" mit Spalten: id (int8, primary key, auto-increment), title (text, not null), description (text), status (text, default "pending"), user_id (uuid, foreign key zu auth.users), created_at (timestamptz, default now()).

Aktiviere Row Level Security: ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

Erstelle eine Policy, die Nutzer nur ihre eigenen Tasks sehen lässt: CREATE POLICY "Users see own tasks" ON tasks USING (user_id = auth.uid());

Das sind die einzigen SQL-Befehle, die du ausführen musst. Alles andere passiert visuell in WeWeb.

Schritt 3: WeWeb mit Supabase verbinden

In WeWeb öffnest du die Plugin-Sektion und fügst die Supabase-Integration hinzu. Füge deine Project URL und den anon key ein, WeWeb erkennt automatisch alle deine Tabellen und Spalten.

In der Sektion "Data Sources" erstellst du eine neue Collection namens "tasks". WeWeb generiert automatisch alle CRUD-Operationen: fetchAll, fetchById, create, update, delete. Du musst keine API-Aufrufe manuell konfigurieren.

Für Auth: Aktiviere das Supabase Auth-Plugin in WeWeb. Dadurch werden automatisch Registrierungs- und Login-Seiten verfügbar, und alle nachfolgenden API-Aufrufe werden mit dem Nutzer-Token authentifiziert.

Schritt 4: CRUD-UI bauen

Erstelle eine Seite "Dashboard" mit einer Liste aller Tasks. Ziehe eine "Repeater"-Komponente auf die Seite und binde sie an die "tasks"-Collection. Konfiguriere jedes Element der Liste so, dass es title und status des Tasks anzeigt.

Füge einen "Neuer Task"-Button hinzu, der ein Modal öffnet. Im Modal: ein Textfeld für den Titel, ein Textarea für die Beschreibung und ein "Speichern"-Button. Beim Klick auf Speichern wird die "create"-Aktion der tasks-Collection mit den Formularwerten aufgerufen.

Für Statusänderungen: Füge ein Dropdown zu jedem Task-Element hinzu mit den Optionen "pending", "in_progress", "done". Beim Ändern wird automatisch die "update"-Aktion aufgerufen. Keine Zeile Code.

Schritt 5: Authentifizierung implementieren

WeWebs Supabase Auth-Plugin übernimmt den gesamten Auth-Flow. Erstelle Seiten für Login und Registrierung, WeWeb hat vorgefertigte Auth-Seitenvorlagen, die du in Minuten anpassen kannst.

Für die Weiterleitung: Konfiguriere in WeWeb, dass nicht-authentifizierte Nutzer zur Login-Seite weitergeleitet werden. Das passiert über die "Page Access" Einstellungen in jedem Seitenmenü, kein Code erforderlich.

Nach dem Login ist der Nutzer-Token automatisch in allen Supabase-Anfragen vorhanden. Deine RLS-Policy (user_id = auth.uid()) filtert automatisch alle Datenbankabfragen für den eingeloggten Nutzer. Jeder Nutzer sieht nur seine eigenen Tasks, aus der Box heraus.

Schritt 6: Deployment und Domain

In WeWeb klicke auf "Publish". WeWeb deployed deine App auf ihr CDN. Für eine benutzerdefinierte Domain: Gehe zu WeWeb-Einstellungen, füge deine Domain hinzu, und konfiguriere den CNAME-Eintrag bei deinem Domain-Registrar.

Für deutsche Nutzer: Registriere eine .de-Domain bei DENIC-Registraren wie IONOS, Strato oder 1&1. Eine .de-Domain kostet ca. 12 EUR/Jahr und signalisiert Vertrauen bei deutschen Nutzern.

Nach dem Deployment ist deine App unter deiner benutzerdefinierten Domain erreichbar, SSL ist automatisch konfiguriert, und die App wird weltweit über Cloudflares CDN schnell ausgeliefert. Die gesamte Infrastruktur, WeWeb CDN + Supabase Frankfurt, ist DSGVO-konform. Mehr über die <a href="/tools/weweb">Möglichkeiten von WeWeb.</a>

Echtzeit-Updates

Aktiviere Supabase Realtime in deinen Projekteinstellungen. Füge in WeWeb eine Realtime-Subscription zu deiner tasks-Collection hinzu. Wenn sich jetzt ein Task ändert (von einem beliebigen Gerät oder Tab), aktualisiert sich deine WeWeb-Oberfläche automatisch.

Das ist mächtig für kollaborative Tools, du bekommst Live-Kollaboration ohne eigenen WebSocket-Code.

RLS Schritt für Schritt einrichten

Row Level Security ist das Feature, das Supabase sicher für Multi-User-Apps macht. Ohne es könnte ein Bug in deinem Frontend die Daten jedes Nutzers für jeden anderen Nutzer offenlegen. Aktiviere es auf jeder Tabelle, bevor du sie mit WeWeb verbindest.

Der Prozess: Öffne das Supabase-Dashboard → Database → Tables → klicke auf deine Tabelle → aktiviere RLS. Klicke dann auf Policies → New Policy. Wähle eine Vorlage ("Allow users to read their own data" ist ein guter Ausgangspunkt) und passe die USING-Klausel an. Der USING-Ausdruck wird für jede Zeile ausgewertet, nur Zeilen, für die der Ausdruck wahr zurückgibt, werden an den Client zurückgegeben.

Für eine tasks-Tabelle mit einer user_id-Spalte: Der USING-Ausdruck der SELECT-Policy ist auth.uid() = user_id. Für INSERT verwende den WITH-CHECK-Ausdruck: auth.uid() = user_id. Das stellt sicher, dass Nutzer nur Zeilen einfügen können, deren user_id ihnen gehört, sie können sich nicht als anderer Nutzer ausgeben, selbst wenn sie die Anfrage-Payload manipulieren.

WeWeb mit Supabase verbinden: Deep Dive

Das Supabase-Plugin in WeWeb tut mehr, als man bei der ersten Einrichtung erwarten würde. Einmal verbunden, macht es drei Arten von Dateninteraktionen zugänglich: Collections (beim Seitenladen oder bei Bedarf abgerufen), Actions (Insert, Update, Delete, Upsert, ausgelöst durch Nutzerereignisse) und Realtime-Subscriptions (Live-Änderungsströme aus deiner Datenbank).

Konfiguriere für Collections die Fetch-Einstellungen sorgfältig: Setze die Spaltenauswahl so, dass nur die tatsächlich benötigten Spalten abgerufen werden (vermeide SELECT * auf breiten Tabellen), füge Filter hinzu, um die Abfrage einzugrenzen (z.B. status gleich 'active'), und setze Sortierung und Limit, um große Datensätze zu paginieren. Ein häufiger Fehler ist, 1.000 Zeilen beim Seitenladen abzurufen, wenn nur 20 angezeigt werden, das verlangsamt deine App und verschwendet Datenbankverbindungen.

Für Authentifizierung speichert WeWebs Supabase-Auth-Plugin die Nutzer-Session in localStorage und aktualisiert automatisch das JWT vor Ablauf. Alle über das Supabase-Plugin erstellten Collections und Actions enthalten automatisch das JWT des aktuellen Nutzers im Authorization-Header. Deine RLS-Policies erhalten dieses JWT über die auth.uid()-Funktion, die gesamte Auth-Kette funktioniert ohne manuelle Token-Verwaltung.

Dynamisches Daten-Binding in WeWeb

WeWebs Binding-System lässt dich jede UI-Eigenschaft mit jeder Variable, jedem Collection-Item oder jeder Formel verbinden. Das Muster für dynamische Listen: Erstelle eine Collection (z.B. tasks), ziehe eine Repeater-Komponente auf die Canvas und binde die items-Eigenschaft des Repeaters an tasks.data. Jedes Kindelement innerhalb des Repeaters hat über die Loop-Variable Zugriff auf das aktuelle Item.

Für bedingte Anzeige, ein Badge nur zeigen, wenn status gleich 'overdue' ist, einen Button verstecken, wenn der Nutzer kein Admin ist, nutze WeWebs Bindings für bedingte Sichtbarkeit. Die Bedingung kann jede Variable referenzieren, einschließlich der Rolle des aktuellen Nutzers aus deiner Supabase-Profiltabelle.

Formeln in WeWeb verwenden JavaScript-Syntax. Um ein formatiertes Datum anzuzeigen, binde den Text an: new Date(item.created_at).toLocaleDateString('de-DE'). Um einen abgeleiteten Wert aus mehreren Feldern zu berechnen, schreibe die Formel direkt im Binding-Panel. Das hält deine UI-Logik dort, wo sie hingehört, in der UI-Schicht, statt deine Datenbank oder API mit Präsentationsbelangen zu belasten.

Formularübermittlungen und Validierung

Formulare in WeWeb zu bauen folgt einem konsistenten Muster: Erstelle Eingabekomponenten, binde jede Eingabe an eine lokale Variable (nutze dafür WeWebs Seitenvariablen), füge Validierungsbedingungen zum Submit-Button hinzu, und löse die Supabase-Insert- oder Update-Action bei erfolgreicher Übermittlung aus.

Nutze für clientseitige Validierung WeWebs Action-Flow-Bedingungen: Prüfe vor dem Aufruf der Supabase-Insert-Action, dass Pflichtfelder nicht leer sind, dass E-Mail-Eingaben einem E-Mail-Format entsprechen, und dass numerische Eingaben im erwarteten Bereich liegen. Zeige Fehlermeldungen an, indem du die Sichtbarkeit eines Textelements an eine Validierungsfehler-Variable bindest.

Nutze für serverseitige Validierung Xano als deine API-Schicht, statt Supabase direkt von WeWeb aus aufzurufen. Das erlaubt dir, Geschäftsregeln hinzuzufügen (z.B. Abonnement-Limits prüfen, Eindeutigkeitsbeschränkungen verifizieren, Preisberechnungen durchführen), bevor die Daten die Datenbank erreichen. Für Formulare mit komplexen Validierungsanforderungen ist die Kette WeWeb → Xano → Supabase immer robuster als WeWeb → Supabase direkt.