Hoe lang duurt het om een fullstack WeWeb + Supabase-app vanaf nul te bouwen?

Met de stappen beschreven in de tutorial kun je een werkende app hebben met auth, realtime data en CRUD-bewerkingen op een aangepast domein binnen een dag. Een ervaren bouwer besteedt een paar uur aan de Supabase-configuratie en de WeWeb-bindingen. Een complete productie-app met complexer datamodel en bedrijfslogica duurt typisch 2–8 weken afhankelijk van de scope.

Moet je servers en infrastructuur beheren voor een WeWeb + Supabase-app?

Nee. WeWeb publiceert je frontend naar een globaal CDN zonder serverbeheer. Supabase is een beheerde PostgreSQL-dienst — jij beheert je schema en beleidsregels, Supabase beheert servers, back-ups en schaling. Je hoeft geen enkele server of VPS te configureren. De hele stack draait op beheerde infrastructuur.

Hoe voeg je DigiD-authenticatie toe aan een WeWeb + Supabase-app?

DigiD wordt geïntegreerd via een Xano-tussenlaag die communiceert met een DigiD-API-aanbieder die voor jou gecertificeerd is. De flow is: gebruiker logt in met e-mail/wachtwoord in WeWeb, initieert dan DigiD-verificatie via een Xano-API-aanroep, en de WeWeb-app ontvangt de bevestiging via een callback. Het is een extra stap in je WeWeb-authenticatieflow.

Wat betekent AVG-naleving voor een WeWeb + Supabase-app die Nederlandse klanten beheert?

Kies EU West als Supabase-regio bij het aanmaken van het project — dit garandeert dat alle data in Europa wordt opgeslagen conform Schrems II. Activeer RLS op alle tabellen met gebruikersdata. Documenteer je datastromen in een verwerkingsregister. De cookies en localStorage-data van de WeWeb-app moeten worden gedeclareerd in je privacybeleid. Deze stappen dekken de basisvereisten voor de meeste Nederlandse B2B-apps.

WeWeb + Supabase Tutorial: Web-app bouwen zonder code

Stap 1: Stel je Supabase-project in

Ga naar supabase.com en maak een nieuw project aan. Kies een regio dicht bij je gebruikers (EU West voor Europese apps — belangrijk voor AVG-naleving, US East voor Amerikaanse apps).

Maak je eerste tabel aan in de Supabase Table Editor. Voor een taakbeheer-app: CREATE TABLE tasks ( id bigserial PRIMARY KEY, title text NOT NULL, status text DEFAULT 'todo', user_id uuid REFERENCES auth.users(id), created_at timestamptz DEFAULT now() );

Activeer Row-Level Security: ALTER TABLE tasks ENABLE ROW LEVEL SECURITY; CREATE POLICY "Users can only see their own tasks" ON tasks FOR ALL USING (auth.uid() = user_id);

Met de EU-regio geselecteerd is je data opgeslagen in Europa en voldoet het aan de vereisten van de AVG en Schrems II — een basisvereiste voor de meeste Nederlandse en Europese B2B-klanten.

Stap 2: Verbind Supabase met WeWeb

In WeWeb ga je naar Plugins → Data Sources → Supabase. Voer je Supabase URL en anon-sleutel in (beide te vinden in je Supabase-projectinstellingen → API).

WeWeb identificeert automatisch je tabellen en genereert getypte databronnen. Je ziet een "tasks"-collectie in je WeWeb datapaneel — klaar om te binden aan UI-componenten.

Dit is een van de meest indrukwekkende momenten met WeWeb + Supabase: je gaat van "lege database" naar "volledig getypte databronnen beschikbaar in de frontend-builder" in minder dan 5 minuten, zonder een regel code te schrijven.

Stap 3: Bouw de authenticatieflow

In WeWeb maak je een inlogpagina met een e-mail- en wachtwoordinvoerveld, gekoppeld aan WeWeb's Supabase Auth-plugin. Gebruik de actie "Inloggen met e-mail/wachtwoord" op de inlogknop.

Beveilig je apppagina's met WeWeb's paginatoegangsvoorwaarden: "Doorsturen naar /login als gebruiker niet is geverifieerd." Deze clientcontrole + Supabase RLS geeft je verdediging in de diepte.

Voor Nederlandse apps die DigiD vereisen: je kunt DigiD toevoegen als extra verificatiestap na e-mail/wachtwoord-inloggen via een Xano-tussenlaag die integreert met een DigiD-API-aanbieder. Dit is een vereiste voor veel Nederlandse overheids- en zorgtoepassingen.

Stap 4: Bind data aan UI-componenten

Maak een lijstcomponent in WeWeb en bind deze aan je tasks-collectie. Stel het collectiefilter in om automatisch de JWT van de huidige gebruiker te sturen — WeWeb's Supabase-plugin verwerkt dit automatisch.

Voor elk lijstitem, bind de taaknaam aan een tekstelement en de status aan een badge met conditionele kleurstijl: groen voor "voltooid", blauw voor "bezig", grijs voor "te doen".

WeWeb's databinding is visueel en onmiddellijk bijgewerkt — wijzig een waarde in Supabase en zie het weerspiegeld in je WeWeb-preview in realtime. Dit maakt debuggen en itereren dramatisch sneller vergeleken met traditionele webontwikkeling.

Stap 5: Aanmaken, bijwerken en verwijderen

WeWeb's Supabase-plugin exposeert invoegen-, bijwerken- en verwijderacties. Koppel ze aan: - Een "Nieuwe taak"-knop die een modaal formulier opent, roept invoegen aan bij verzenden - Een inline statusdropdown die bijwerken aanroept bij wijziging - Een verwijderknop die verwijderen aanroept na een bevestigingsdialoog

Alle bewerkingen respecteren RLS — gebruikers kunnen alleen hun eigen rijen wijzigen. Probeer foutafhandeling rechtstreeks in WeWeb's actieflow te koppelen: bij een Supabase-fout, toon een notificatiebanner met een vriendelijke foutmelding in het Nederlands.

Stap 6: Realtime updates

Activeer Supabase Realtime in je projectinstellingen. In WeWeb voeg je een Realtime-subscription toe aan je tasks-collectie. Nu wanneer een taak wordt gewijzigd (van welk apparaat of tabblad dan ook) wordt je WeWeb-UI automatisch bijgewerkt.

Dit is krachtig voor samenwerkingstools — je krijgt live samenwerking zonder een enkele regel aangepaste WebSocket-code. Voor Nederlandse B2B-apps met teamfunctionaliteit is realtime een verkoopargument: klanten verwachten dat gedeelde werkruimten onmiddellijk worden bijgewerkt.

Stap 7: Deployen naar productie

In WeWeb klik je op "Publiceren" → voer je aangepast domein in. WeWeb deployt je app naar een globaal CDN met HTTPS. Update de DNS-records van je domein om te wijzen naar WeWeb's CDN-edge.

Je Supabase-database is al productiegereed gehost. Je hebt nu een complete, schaalbare fullstack-app — met een aangepast domein, auth, realtime data en nul serverbeheer.

Voor Nederlandse bedrijven: registreer een .nl-domein via een Nederlandse registrar (bijv. TransIP of Antagonist) en configureer DMARC/DKIM voor e-mail als je transactionele e-mails verstuurt vanuit je app. Dit neemt 30 minuten en maakt een professionele indruk op Nederlandse klanten die gewend zijn aan .nl-domeinen. Bekijk onze /tools/weweb pagina voor meer WeWeb-resources of ga naar /contact voor een gesprek.