Skip to main content
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

1

Build your app

Run the build command for your React project:
npm run build
This creates a dist folder with your production files.
2

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
Take note of your Storage Zone Password from the FTP & API Access section—you’ll need this for uploads.
3

Upload your files

Open your Storage Zone and upload the contents of your build folder (typically dist) to the root of your storage zone.
For CI/CD pipelines, use the Storage API:
#!/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
4

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.

​
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.
1

Navigate to your storage zone

Log in to your Bunny dashboard, go to Storage in the left navigation, and select your storage zone.
2

Open Error handling settings

Open the Error handling page.
3

Set the 404 file path

Enter /index.html in the 404 File path field.
4

Enable 404 to 200 rewrite

Check the box for Rewrite 404 to 200 status code and click Save.
5

Test

Navigate directly to a route in your app (e.g., /dashboard) to confirm it loads correctly.
Without this configuration, refreshing or directly accessing routes like /dashboard or /users/123 will return a 404 error.

​
Add a Custom Domain

To serve your React app from your own domain, follow the 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:
bash VITE_API_URL=https://api.example.com
Environment variables are embedded at build time. Rebuild and redeploy after changing them.

​
Summary

1

Build

Run your build command to generate production files.
2

Upload

Upload your build folder contents to a Storage Zone.
3

Connect

Create a Pull Zone pointing to your Storage Zone.
4

Configure routing

Set up error handling to serve index.html for client-side routing.
Your React app is now served globally through Bunny’s CDN.