> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bunny.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend Deployment Guides

> Deploy static sites and single-page applications to Bunny Storage with global CDN delivery

Deploy your frontend applications to Bunny Storage and serve them globally through a Pull Zone. This guide covers the essentials for static sites and single-page applications (SPAs).

## How It Works

Bunny Storage combined with a Pull Zone provides a simple, fast way to host static frontends:

1. **Build** your application locally
2. **Upload** the build output to a Storage Zone
3. **Connect** a Pull Zone for global CDN delivery
4. **Configure** error handling for SPA routing (if needed)

## Single-Page Application Routing

Single-page applications (React, Vue, Angular, etc.) handle routing client-side. When a user navigates directly to a route like `/dashboard` or refreshes the page, the server needs to serve `index.html` instead of returning a 404.

<Accordion title="Why SPAs need special configuration">
  When your SPA loads, the JavaScript router takes over navigation. But if a
  user: - Bookmarks a deep link like `/products/123` - Refreshes the page on
  `/settings` - Shares a URL like `/about` The browser requests that exact path
  from the server. Since no file exists at that path (only `index.html` and your
  assets exist), the server returns a 404. The solution is to configure your
  Storage Zone's error handling to serve `index.html` for missing paths,
  allowing your client-side router to handle the URL.
</Accordion>

### Configure SPA Fallback

To enable client-side routing, configure the error handling settings on your Storage Zone:

<Steps>
  <Step title="Navigate to your storage zone">
    Log in to your Bunny dashboard, go to **Storage** in the left navigation,
    and select your storage zone.
  </Step>

  <Step title="Open Error handling settings">
    Open the **Error handling** page.
  </Step>

  <Step title="Set the 404 file path">
    Enter `/index.html` in the **404 File path** field.
  </Step>

  <Step title="Enable 404 to 200 rewrite">
    Check the box for **Rewrite 404 to 200 status code** and click **Save**.
  </Step>
</Steps>

This serves your `index.html` for all missing paths, and your client-side router will handle the URL. Requests for files with extensions (like `.js`, `.css`, or images) that don't exist will still return a 404.

<Info>
  See the [Storage Zone Settings](/storage/settings) page for more details on
  error handling configuration.
</Info>

## Framework Guides

<CardGroup cols={2}>
  <Card title="Vite" icon="bolt" href="/storage/static-site-hosting/vite">
    Deploy a Vite-built static site with optimal configuration.
  </Card>

  <Card title="React" icon="react" href="/storage/static-site-hosting/react">
    Deploy Create React App and other React builds.
  </Card>

  <Card title="Vue" icon="vuejs" href="/storage/static-site-hosting/vue">
    Deploy Vue CLI and Vite-based Vue applications.
  </Card>
</CardGroup>

## Common Configuration

### Custom Domains

Add your own domain to any frontend deployment:

1. In your Pull Zone, go to **Hostnames**
2. Click **Add Hostname** and enter your domain
3. Add a CNAME record pointing to `your-pullzone.b-cdn.net`
4. Enable **Free SSL** for automatic HTTPS

### Cache Configuration

Static frontends benefit from aggressive caching. Consider these settings in your Pull Zone:

| File Type       | Recommended Cache Time              |
| --------------- | ----------------------------------- |
| HTML            | Short (1 hour) or use cache busting |
| JS/CSS (hashed) | Long (1 year)                       |
| Images          | Long (1 month+)                     |
| Fonts           | Long (1 year)                       |

<Note>
  Modern build tools like Vite add content hashes to filenames (e.g.,
  `main.a1b2c3.js`), making it safe to cache these files indefinitely.
</Note>