DocumentationMumbai
Quickstart
Fast-Path CDN< 1s Promotion

Deploying React, Vite & Static Sites

Single Page Applications (SPAs) and static site generators—including Vite, React, Vue, Svelte, Astro, and HTML5—are served directly from Exovon's global Anycast Edge CDN. Enjoy zero server maintenance, zero cold starts, and sub-30ms time-to-first-byte (TTFB) worldwide.

Fast-Path Promotion

Static sites bypass container compilation. Assets sync to edge buckets and promote to live traffic in under 1 second.

Automated SPA Fallback

Unmatched routes rewrite automatically to index.html, preventing 404 errors on React Router page refreshes.

Immutable Edge Caching

Hashed CSS/JS bundles are cached with immutable headers for lightning-fast repeat visits.

1. Configure Your Build Scripts

Ensure your package.json contains a valid build script that compiles your application into an output directory (typically dist or build):

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}
Output Directory Reference: Vite defaults to dist, Create React App to build, Astro to dist, and Next.js static exports to out.

2. Client Environment Variables

Because static applications execute in the user's web browser rather than on a server, environment variables must be embedded at build time. Prefix your variables according to your framework:

FrameworkRequired PrefixCode Access Example
Vite (React / Vue)VITE_*import.meta.env.VITE_API_URL
Create React AppREACT_APP_*process.env.REACT_APP_API_URL
AstroPUBLIC_*import.meta.env.PUBLIC_API_URL

3. Deploy via CLI (`npx exovon deploy --static`)

Deploy your pre-built static directory or trigger an instant Fast-Path edge deployment:

# Link project once:
npx exovon link --project "my-vite-app"
# Build locally and deploy the output directory directly to Edge CDN:
npm run build
npx exovon deploy --static --output-dir dist
# Or let Exovon build the project on our Mumbai runner:
npx exovon deploy --framework vite

4. How SPA Rewrite Routing Works

In traditional static hosting, requesting /users/profile returns an HTTP 404 because no physical file named profile.html exists. Exovon automatically enables SPA rewrite fallback:

When a visitor navigates directly to any deep link or refreshes the page, the Exovon Edge Router checks for physical assets first. If no file matches, it serves index.html with an HTTP 200 status, allowing React Router or TanStack Router to hydrate and render the client route seamlessly.

Frequently Asked Questions

How do I invalidate the edge CDN cache after a new deployment?

Exovon purges the Anycast edge cache automatically during deployment promotion. Because static asset files contain content hashes in their filenames, users receive updated files instantly without stale browser caching.

Are there bandwidth limits on static site hosting?

Static edge asset caching is unmetered across Cloudflare's global edge network. Origin bandwidth limits apply to container origin fetches: Hobby (Free) includes 1 GB origin bandwidth/mo, Starter includes 10 GB, Pro includes 40 GB, and Heavy includes 1,000 GB (1 TB).

Was this documentation page helpful?