Host your React app without a deploy pipeline

Configuration

Vite’s defaults work as-is. If your app lives at the root of the domain, keep base at /:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  base: "/",           // site root on StaticHero
  build: { outDir: "dist" },
});

React Router and deep links

Client-side routers handle URLs like /settings/profile in the browser. When someone refreshes that page, the server has no such file — which is why many hosts return a 404. Turn on SPA mode in your site’s settings and StaticHero serves index.html for any route without a file extension, letting React Router take over.

Prefer config in code? Add a _redirects file with /* /index.html 200 to your public/ folder and it will be copied into dist/ on every build.

Environment variables

Variables prefixed with VITE_ are baked into your JavaScript at build time and are visible to anyone. Never put secret API keys in a React app — use services with publishable keys, or call your own API.

React apps from AI tools

Got a single React component from Claude, v0 or ChatGPT rather than a full project? Use Paste code — StaticHero wraps the component with React, Tailwind and common libraries and publishes it as a working page. See Claude artifacts hosting.