React of Vite website hosten zonder Node-server

Je React-site werkt prima in de AI-tool of op je eigen computer. Je zet hem op hosting en krijgt een wit scherm, of een 404 zodra je een subpagina ververst. Dat komt bijna altijd door één ontbrekende regel, geen defect in je code. Hieronder staat waarom, en wat je doet.

Een gebouwde React-site is statisch

Je project bevat broncode: bestanden met JSX, TypeScript en imports. Die kan een browser niet rechtstreeks lezen. Met npm run build zet Vite de code om naar gewone bestanden in de map dist: een index.html, JavaScript, CSS en je afbeeldingen. Meer is het niet. De browser van je bezoeker voert het JavaScript uit en toont de pagina.

Dat betekent dat je geen Node-server nodig hebt om de site te draaien. Node heb je nodig om te bouwen, op je eigen computer of in de AI-tool. Op de hosting staat alleen het resultaat. Dat is precies het soort site dat wij hosten, achter Cloudflare, met SSL en dagelijkse back-ups. Of je project statisch is, zie je in Website van AI online zetten.

Een uitzondering: sommige projecten hebben servercode. Lovable-projecten van na 13 mei 2026 gebruiken bijvoorbeeld TanStack Start, en dat heeft een Node-server nodig. Oudere Lovable-projecten met React en Vite bouwen wel naar een statische dist. Hoe dat zit, staat in Lovable-website verhuizen naar je eigen domein.

Van project naar dist

Je kunt dit zelf doen, of je AI vragen het te doen.

1. Open een terminal in de projectmap en draai npm install.
2. Draai npm run build. Vite maakt de map dist.
3. Draai npm run preview en open het adres dat in de terminal staat. Klik door de site en ververs een subpagina.
4. Haal de SFTP-gegevens op in het portaal onder Bestanden. Met een gratis programma als FileZilla of Cyberduck log je in.
5. Upload de inhoud van dist naar de webroot. Dus index.html en de map assets komen direct in de webroot, niet in een submap dist.

Heb je geen terminal of weet je niet welke map het is? Stuur ons de zip of GitHub-link, dan zetten wij het online als onderdeel van de gratis verhuizing. Hoe je die zip maakt, lees je in AI-website exporteren naar zip of GitHub.

Het witte scherm of de 404 bij verversen

Dit is het probleem dat de meeste mensen tegenkomen. Je opent de homepage, klikt door naar /diensten en alles werkt. Je ververst, of je deelt de link met iemand, en je krijgt een foutpagina.

Dat komt door de manier waarop zo’n app werkt. Een single page application heeft één echt bestand: index.html. Het JavaScript daarin kijkt naar het adres en toont de juiste pagina. Gaat de bezoeker via een klik, dan klopt dat. Opent iemand /diensten rechtstreeks, dan zoekt de server een bestand of map met die naam. Die bestaat niet, en je krijgt een 404.

De oplossing is de server te vertellen: bestaat het gevraagde bestand niet, geef dan index.html terug. Dan start de app en pakt zijn eigen routering het adres op. Op Apache doe je dat met een .htaccess in de webroot:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ /index.html [L]

Wat deze regels doen:

• RewriteEngine On zet het herschrijven aan.
• De twee RewriteCond-regels zorgen dat bestaande bestanden en mappen met rust blijven. Je JavaScript, CSS en afbeeldingen komen dus gewoon uit hun eigen bestand.
• RewriteRule stuurt al het andere naar index.html.

Dit is de aanpak die de Apache-documentatie beschrijft voor een front controller, hier met index.html in plaats van index.php.

Een paar tips:

• Een bestand dat met een punt begint, zoals .htaccess, is vaak verborgen. Zet in je SFTP-programma de optie aan om verborgen bestanden te tonen.
• Upload .htaccess met SFTP of in je zip. Via de MCP-koppeling van je AI kan dit bestand niet worden geschreven.
• Zet de .htaccess in de map public van je project. Vite kopieert alles uit public naar de root van dist, zodat het bestand bij elke build vanzelf meekomt.
• Deze regel geeft ook voor onbekende adressen de startpagina terug. Laat je app daarom zelf een “pagina niet gevonden” tonen voor adressen die niet bestaan.
• Een site met echte losse HTML-pagina’s per adres heeft deze regel niet nodig.

Heb je je site via zip of GitHub bij ons online laten zetten, dan kunnen wij op verzoek ook de instelling voor single page apps aanzetten. Die doet hetzelfde als deze regels, zonder eigen bestand. Je eigen .htaccess blijft daarnaast gewoon werken. Liever dat wij het instellen? Stuur ons een appje met je domein.

Paden en de base

Als je site wel start maar zonder opmaak of afbeeldingen, kijk dan naar de paden.

• De base in vite.config. De standaardwaarde / is goed voor een eigen domein. Zet je de site in een submap, zoals jouwdomein.nl/winkel/, dan moet base daar bij passen. Weet je het pad niet, dan werkt base: './' vaak ook.
• Absolute paden. Een verwijzing als /afbeeldingen/logo.png begint bij de root van het domein. Staat de site in een submap, dan wijst die naar de verkeerde plek. Plaats afbeeldingen in public of importeer ze in je code, dan past Vite het pad zelf aan.
• Hoofdletters. Een bestand Logo.PNG en een verwijzing naar logo.png werkt op je eigen computer soms wel en op de server niet. Houd bestandsnamen kleine letters.

De Vite-documentatie over statisch deployen beschrijft de base-instelling.

VITE_-variabelen zijn openbaar

In een Vite-project bepaalt het voorvoegsel VITE_ welke variabelen de browser mag zien. Het gevolg: de waarde wordt tijdens het bouwen in je JavaScript gezet, en elke bezoeker kan hem lezen via de ontwikkelaarstools. De Vite-documentatie zegt hierover dat VITE_-variabelen geen gevoelige informatie mogen bevatten. Zie de uitleg over omgevingsvariabelen.

Wat dat betekent in de praktijk:

• Een publieke sleutel, zoals een kaart-ID dat je per domein kunt beperken, mag erin.
• Een geheime sleutel, voor betalingen, e-mail of een AI-dienst, hoort er niet in.
• Heeft je AI zo’n sleutel toch in de code gezet, haal hem dan weg en maak de sleutel bij de leverancier ongeldig.

Bij een upload via zip, GitHub of de MCP-koppeling controleren we je bestanden op per ongeluk meegestuurde sleutels voordat ze online komen. Meer over MCP staat in Je website beheren met je eigen AI via MCP.

Wat een server nodig heeft

Een gebouwde React-site is de voorkant. Zodra je iets nodig hebt dat op een server moet draaien, ligt de situatie anders:

• een eigen API of Node-server;
• een database met gebruikers of bestellingen;
• het versturen van mail vanuit je app zonder dat je sleutels in de browser zetten;
• Next.js met servergedeelte, of een Lovable-project met TanStack Start.

Hiervoor maken we een aanbod op maat. Stuur ons een appje met wat je hebt gebouwd, dan denken we mee. Voor een contactformulier is een eigen server vaak niet nodig, zie Een contactformulier op je AI-website.

Het Website-pakket kost € 9 per maand, exclusief btw, en staat met de andere plannen op de prijzenpagina. Je start via het bestelformulier. Per tool vind je meer op de pagina’s van Lovable, Bolt en Cursor.