> ## Documentation Index
> Fetch the complete documentation index at: https://bunnynet-cb9733c2-support-migration.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploy a React App

> Deploy a React application to Bunny Storage with global CDN delivery

This guide walks through deploying a React application to Bunny Storage with a Pull Zone for global CDN delivery. This works with Vite and other React build tools.

## Deploy Your App

<Steps>
  <Step title="Build your app">
    Run the build command for your React project:

    <Tabs>
      <Tab title="Vite">
        ```bash theme={null}
        npm run build
        ```

        This creates a `dist` folder with your production files.
      </Tab>

      <Tab title="Other Build Tools">
        ```bash theme={null}
        npm run build
        ```

        Check your build tool's documentation for the output folder location.
      </Tab>
    </Tabs>
  </Step>

  <Step title="Create a Storage Zone">
    1. In the Bunny dashboard, go to **Storage** → **Add Storage Zone**
    2. Enter a name for your zone (e.g., `my-react-app`)
    3. Select a main storage region closest to your primary audience
    4. Click **Add Storage Zone**

    <Note>
      Take note of your **Storage Zone Password** from the FTP & API Access section—you'll need this for uploads.
    </Note>
  </Step>

  <Step title="Upload your files">
    Open your Storage Zone and upload the contents of your build folder (typically `dist`) to the root of your storage zone.

    <Accordion title="Automate uploads with the Storage API">
      For CI/CD pipelines, use the Storage API:

      ```bash theme={null}
      #!/bin/bash
      STORAGE_ZONE="my-react-app"
      ACCESS_KEY="YOUR_STORAGE_ZONE_PASSWORD"
      BUILD_DIR="dist"

      find $BUILD_DIR -type f | while read file; do
        remote_path="${file#$BUILD_DIR/}"
        curl -X PUT "https://storage.bunnycdn.com/$STORAGE_ZONE/$remote_path" \
          -H "AccessKey: $ACCESS_KEY" \
          --data-binary "@$file"
      done
      ```
    </Accordion>
  </Step>

  <Step title="Create a Pull Zone">
    1. Go to **CDN** → **Add Pull Zone**
    2. Enter a name for your Pull Zone
    3. Set **Origin Type** to **Storage Zone**
    4. Select the Storage Zone you created earlier
    5. Click **Add Pull Zone**

    Your app is now available at `https://your-pullzone-name.b-cdn.net`.
  </Step>
</Steps>

## Configure Client-Side Routing

React apps using React Router need all routes to serve `index.html` so the client-side router can handle navigation. Configure this using your Storage Zone's [error handling settings](/storage/settings#error-handling).

<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>

  <Step title="Test">
    Navigate directly to a route in your app (e.g., `/dashboard`) to confirm it loads correctly.
  </Step>
</Steps>

<Warning>
  Without this configuration, refreshing or directly accessing routes like
  `/dashboard` or `/users/123` will return a 404 error.
</Warning>

## Add a Custom Domain

To serve your React app from your own domain, follow the [Custom Hostname](/cdn/custom-hostname) guide.

## Environment Variables

If your React app uses environment variables for API endpoints, ensure they're set correctly for production.

Create a `.env.production` file:

<Tabs>
  <Tab title="Vite">`bash VITE_API_URL=https://api.example.com `</Tab>

  <Tab title="Other Build Tools">
    Check your build tool's documentation for environment variable
    configuration.
  </Tab>
</Tabs>

<Note>
  Environment variables are embedded at build time. Rebuild and redeploy after
  changing them.
</Note>

## Summary

<Steps>
  <Step title="Build">
    Run your build command to generate production files.
  </Step>

  <Step title="Upload">
    Upload your build folder contents to a Storage Zone.
  </Step>

  <Step title="Connect">Create a Pull Zone pointing to your Storage Zone.</Step>

  <Step title="Configure routing">
    Set up error handling to serve `index.html` for client-side routing.
  </Step>
</Steps>

Your React app is now served globally through Bunny's CDN.