# React hosting for static builds

> Deploy React apps after building them into static assets with Vite, Create React App, or another static build pipeline.

Canonical: https://staticx.site/react-hosting

## Host the compiled React app

StaticX serves the Vite, Create React App, or static React output after the project has been built into browser files.

## Handle client routes deliberately

React Router history URLs need a fallback so direct visits to nested paths still load the app shell.

## Track release performance

Each React publish can be measured by views, leads, source, device, and rollback history.

## Deploy a React static build

Build React into static assets, include a fallback, then publish the output root as a StaticX version.

1. **Run the React build** — Use Vite, Create React App, or your build tool to create dist or build.
2. **Check route fallback** — Add 404.html or SPA fallback behavior so refreshed client-side routes do not break.
3. **Publish the build contents** — Upload the contents of the output folder, not the parent folder, and verify index.html is at the top level.

## React hosting on StaticX is for browser-rendered builds.

A React app that runs fully in the browser is a strong fit for static hosting. The important step is producing the compiled files visitors request.

If the React project depends on server-side rendering, private server actions, or runtime APIs, keep that backend separate and let StaticX host the public frontend.

## React deployment checks

- **Vite base path** — Set the base/public path correctly when assets otherwise load from the wrong URL.
- **Environment variables** — React environment values are baked in at build time and should not include secrets.
- **Form integration** — StaticX can collect leads from forms rendered by React when the submitted markup targets StaticX forms correctly.

## FAQ

### Can StaticX host a Vite React app?

Yes. Run the Vite build and upload the contents of dist with index.html at the top level.

### How do React Router pages work on refresh?

Use a fallback page or static routing strategy so direct visits to nested client routes load the React app.

### Can React call external APIs from StaticX?

Yes. The frontend can call external APIs from the browser, but StaticX does not host private API routes.

### Do React deploys get analytics?

Yes. Published StaticX pages can collect page views and lead conversion data for the active deployment.

[View on staticx.site](https://staticx.site/react-hosting)