← All Guides
Frameworks8 min read

Deploy Static Sites

Deploy static sites and SPAs (React, Vue, Svelte, Astro) with edge caching, custom headers, and SPA fallback.

1.Build Output Configuration

Configure your static site generator output for Oxaploy.

  1. Next.js: output: 'export' in next.config.js → outputs to out/
  2. Vite: build.outDir: 'dist' in vite.config.js
  3. Astro: output: 'static' in astro.config.mjs
  4. React/Vue: npm run build outputs to build/ or dist/
  5. Set build command to output static files to a known directory

2.SPA Routing Fallback

Configure single-page application routing for client-side routing.

  1. Enable SPA Fallback in app settings
  2. Oxaploy serves index.html for all non-file routes
  3. Client-side router handles navigation (React Router, Vue Router, etc.)
  4. API routes should be prefixed (e.g., /api/*) to avoid conflicts

3.Custom Headers and Caching

Optimize delivery with custom headers and cache control.

  1. Static assets: Cache-Control: public, max-age=31536000, immutable
  2. HTML: Cache-Control: no-cache, must-revalidate
  3. Security headers: CSP, HSTS, X-Frame-Options via Oxaploy settings
  4. Custom headers: configure in app settings → Headers tab

4.Edge Optimization

Leverage edge caching for global performance.

  1. Oxaploy serves static assets from edge locations
  2. Configure Cache-Control for optimal edge caching
  3. Use stale-while-revalidate for seamless updates
  4. Purge cache on new deployments automatically