Deploy your
React app
Upload the production build from Vite, Create React App, or another React SPA and publish it with refresh-safe routes, HTTPS, edge delivery, and custom domains ready when you need them.
Upload the build output, not the source project
React source files are for development. DeployPages serves the static files produced by your production build.
Vite React
Vite's default static output is dist. If your vite.config.js changes build.outDir or base, deploy that output folder and test asset URLs after upload.
Create React App
CRA writes production files to build. If the app is served from a subpath, the homepage setting can affect generated asset URLs.
Other React SPAs
Any React setup can work when it produces index.html, JavaScript bundles, CSS, images, fonts, and assets that can be served as static files.
Why React apps break after deployment
A React SPA still starts with one document
Most React single-page apps ship one HTML entry point, then let the client-side router decide what to render after JavaScript loads.
That works locally because the dev server knows how to fall back to index.html. A basic static host may not, which is why /dashboard can work during navigation but return 404 after a refresh.
What breaks on refresh
A static file server receives GET /settings and looks for a real settings file or folder.
Your React build usually has index.html plus hashed assets, so the server returns 404 before React Router has a chance to read the URL.
How DeployPages fixes it
DeployPages applies an SPA fallback for missing document routes and serves index.html instead of a hard 404.
Once the document loads, React boots, the router reads the current URL, and the right screen renders without asking you to maintain redirect files.
Why teams use this
Upload the dist or build folder. Routing fallback, HTTPS, compression, and edge delivery are part of the deployment instead of a checklist you rebuild for every small React app.
Production checks React apps deserve
The app can compile and still fail online. Check these before sending the link.
Asset base path
If JavaScript or CSS loads from the wrong URL, the page may render blank. Vite base and CRA homepage settings are the usual places to inspect.
Client-side routes
Test direct visits and refreshes for important routes such as /login, /pricing, /dashboard, and any shared deep links.
API endpoints
A static React deployment can call external APIs, but it does not run backend code by itself. Keep server secrets and private API keys out of the frontend bundle.
Environment variables
Most React build tools bake public environment values into the bundle at build time. Changing a variable after upload usually requires a rebuild.
React deployment workflow
Build the app
Run the production build locally so React, CSS, and assets are bundled into a deployable static folder.
Verify the output
Check that the output folder contains index.html plus generated assets. For Vite this is usually dist; for Create React App it is usually build.
Upload the whole folder
Drop the entire dist folder into DeployPages. Do not upload only index.html or you will miss styles and scripts.
Test a routed page
Open a nested route, refresh the browser, and confirm the app still loads instead of returning a host-level 404.
Common React deployment problems
White screen after deploy
Open DevTools and check missing JS or CSS files first. Wrong base paths, missing assets, or uploading the wrong folder cause many blank-page failures.
Refresh returns 404 on nested routes
The static host is trying to find a real file for the route. Use an SPA fallback so missing document routes serve index.html.
Assets work locally but not online
Check absolute paths, public base settings, and whether the uploaded output folder includes the generated assets directory.
Environment variable changes do not appear
Rebuild the app with the new public variables, then upload the new output. The deployed bundle cannot read private server env values at runtime.
React deployment FAQ
Q:Why is my React app showing a white screen after deploy?
Most white-screen issues come from incorrect asset paths or missing bundles. For Vite, confirm base is correct for the deployment target. For CRA, review homepage and make sure the uploaded folder contains the generated assets.
Q:Do I need to configure nginx or redirects manually?
No. DeployPages handles the SPA fallback for missing routes at the edge so you do not need to maintain server rewrites yourself.
Q:Should I upload the project folder or the dist folder?
Upload the production output folder, not the source project. For Vite that is usually dist. For Create React App that is usually build.
Q:Can I use environment variables?
Yes, but they are resolved when you run the build locally. DeployPages hosts the final static output, so runtime server-side environment injection is not part of this flow.
Q:Can a React app call an API after deployment?
Yes. A static React app can call external APIs from the browser. Just remember that anything bundled into frontend code is visible to users, so private secrets need a backend.
Q:Can I deploy Next.js here too?
Yes, if you export it as a static site. Use output: 'export' and upload the generated out directory. Server-rendered Next.js routes need a runtime beyond static hosting.
Q:Can I attach a custom domain later?
Yes. After the site is live, add your domain in the console and follow the DNS instructions. DeployPages provisions HTTPS automatically once the record resolves.