Publiceer uw
React-app
Upload de productiebuild van Vite, Create React App of een andere React-SPA en publiceer deze met routes die een refresh overleven, HTTPS, wereldwijde levering en eigen domeinen.
Upload de build-uitvoer, niet het bronproject
React-bronbestanden zijn bedoeld voor ontwikkeling. DeployPages bedient de statische bestanden die door uw productie-build worden geproduceerd.
Vite + React
De standaard statische uitvoer van Vite is dist. Als uw vite.config.js build.outDir of base wijzigt, publiceert u die uitvoermap en test u asset-URL's na het uploaden.
Create React App
CRA schrijft productiebestanden naar build. Als de app wordt aangeboden vanuit een subpad, kan de homepage-instelling invloed hebben op de gegenereerde asset-URL's.
Andere React SPA's
Elke React-setup kan werken als die index.html, JavaScript-bundels, CSS, afbeeldingen, fonts en assets produceert die als statische bestanden kunnen worden geserveerd.
Waarom React-apps kapot gaan na publicatie
Een React SPA begint nog steeds met één document
De meeste React-apps met één pagina leveren één HTML-entrypoint en laten de client-side router beslissen wat er wordt weergegeven nadat JavaScript is geladen.
Dat werkt lokaal omdat de dev-server weet terug te vallen op index.html. Een standaard statische host doet dat mogelijk niet. Daarom kan /dashboard tijdens navigatie werken, maar na een refresh 404 teruggeven.
Wat kapot gaat bij refresh
Een statische bestandsserver ontvangt GET /settings en zoekt naar een echt instellingenbestand of map.
Uw React build heeft meestal index.html plus gehashte assets, dus de server retourneert 404 voordat de React-router de kans krijgt om de URL te lezen.
Hoe DeployPages het probleem oplost
DeployPages past een SPA-fallback toe voor ontbrekende documentroutes en bedient index.html in plaats van een harde 404.
Zodra het document is geladen, start React op, leest de router de huidige URL en verschijnt het juiste scherm zonder dat u redirectbestanden hoeft te onderhouden.
Waarom teams dit gebruiken
Upload de map dist of build. Routingfallback, HTTPS, compressie en wereldwijde levering maken deel uit van de publicatie in plaats van een checklist die u opnieuw opbouwt voor elke kleine React-app.
Productiecontroles die React-apps verdienen
De app kan lokaal compileren en online toch mislukken. Controleer dit voordat u de link deelt.
Basispad voor assets
Als JavaScript of CSS wordt geladen vanaf de verkeerde URL, wordt de pagina mogelijk leeg weergegeven. Vite-basis- en CRA-startpagina-instellingen zijn de gebruikelijke plaatsen om te inspecteren.
Client-side routes
Test directe bezoeken en refreshes voor belangrijke routes zoals /login, /pricing, /dashboard en gedeelde deep links.
API-eindpunten
Een statische React-publicatie kan externe API's aanroepen, maar voert zelf geen backend-code uit. Houd servergeheimen en privé-API-sleutels buiten de frontendbundel.
Omgevingsvariabelen
De meeste React-buildtools plaatsen openbare omgevingswaarden tijdens de build in de bundel. Het wijzigen van een variabele na het uploaden vereist meestal een nieuwe build.
React-publicatieflow
Bouw de app
Voer de productiebuild lokaal uit, zodat React, CSS en assets worden gebundeld in een publiceerbare statische map.
Controleer de uitvoer
Controleer of de uitvoermap index.html plus gegenereerde assets bevat. Voor Vite is dit meestal dist; voor Create React App is dit meestal build.
Upload de hele map
Zet de volledige map dist neer in DeployPages. Upload niet alleen index.html, anders mist u stijlen en scripts.
Test een gerouteerde pagina
Open een geneste route, refresh de browser en controleer of de app nog steeds laadt in plaats van een 404 op hostniveau terug te geven.
Veelvoorkomende React-publicatieproblemen
Wit scherm na publicatie
Open DevTools en controleer eerst ontbrekende JS- of CSS-bestanden. Verkeerde basispaden, ontbrekende assets of het uploaden van de verkeerde map veroorzaken veel lege pagina's.
Refresh geeft 404 op geneste routes
De statische host probeert een echt bestand voor de route te vinden. Gebruik een SPA-fallback zodat ontbrekende documentroutes index.html serveren.
Assets werken lokaal, maar niet online
Controleer de absolute paden, de publieke basisinstellingen en of de geüploade uitvoermap de gegenereerde assets-map bevat.
Veranderingen in omgevingsvariabelen verschijnen niet
Bouw de app opnieuw met de nieuwe publieke variabelen en upload vervolgens de nieuwe uitvoer. De gepubliceerde bundel kan tijdens runtime geen privé-env-waarden van de server lezen.
Veelgestelde vragen over de publicatie van React
Q:Waarom toont mijn React-app een wit scherm na publicatie?
De meeste problemen met het witte scherm worden veroorzaakt door onjuiste assetpaden of ontbrekende bundels. Voor Vite controleert u of base klopt voor het publicatiedoel. Voor CRA controleert u homepage en zorgt u ervoor dat de geüploade map de gegenereerde assets bevat.
Q:Moet ik nginx of omleidingen handmatig configureren?
Nee. DeployPages verwerkt de SPA-fallback voor ontbrekende routes op het publicatiepad, zodat u zelf geen serverrewrites hoeft te beheren.
Q:Moet ik de projectmap of de map dist uploaden?
Upload de productie-uitvoermap, niet het bronproject. Voor Vite is dat meestal dist. Voor Create React App is dat meestal build.
Q:Kan ik omgevingsvariabelen gebruiken?
Ja, maar deze worden opgelost wanneer u de build lokaal uitvoert. DeployPages host de uiteindelijke statische uitvoer, dus server-side runtime-injectie van omgevingsvariabelen maakt geen deel uit van deze flow.
Q:Kan een React-app na de publicatie een API aanroepen?
Ja. Een statische React-app kan externe API's vanuit de browser aanroepen. Houd er rekening mee dat alles wat in de frontendcode is gebundeld zichtbaar is voor gebruikers, dus privégeheimen hebben een backend nodig.
Q:Kan ik Next.js hier ook publiceren?
Ja, als u de app exporteert als een statische website. Gebruik output: 'export' en upload de gegenereerde out-directory. Servergerenderde Next.js-routes hebben een runtime nodig die verder gaat dan statische hosting.
Q:Kan ik later een eigen domein koppelen?
Ja. Nadat de website live is, voegt u uw domein toe aan de console en volgt u de DNS-instructies. DeployPages voorziet HTTPS automatisch zodra het record is opgelost.