StorageObject Storage

Hosting Static Sites and SPAs on Object Storage

IBEE Object Storage can serve static websites and single-page applications (SPAs) directly from a bucket. Combined with the CDN and a custom domain, you get global delivery, automatic HTTPS, and zero-server hosting for frontends built with React, Vue, Angular, Svelte, or plain HTML.

Before you begin

  • An active IBEE Cloud project (Create a project)
  • A built static site or SPA (output folder containing index.html)
  • Access keys for programmatic upload (Access keys)
  • AWS CLI or any S3-compatible tool installed locally
1

1. Build your site

Generate the production build for your framework. The output folder is what you’ll upload.

FrameworkBuild commandOutput folder
React (CRA)npm run buildbuild/
React (Vite)npm run builddist/
Next.js (static export)next build && next exportout/
Vuenpm run builddist/
Angularng build --configuration productiondist/<project>/
Svelte / SvelteKitnpm run buildbuild/
Plain HTML—your source folder
2

2. Create a bucket

Create a bucket with Public access (Create a bucket). Use a region close to your users — e.g., HYD1 or VGA for India, IAD for North America.

Bucket name tip: match the bucket name to your domain (e.g., app.ibee.ai) for clarity. It does not affect functionality.

3

3. Configure the AWS CLI

Set up a profile pointing at IBEE Object Storage:

$aws configure --profile ibee
$# AWS Access Key ID: <your access key>
$# AWS Secret Access Key: <your secret>
$# Default region: us-east-1
$# Default output format: json
4

4. Upload your build output

Sync the build folder to your bucket. Replace <bucket>, <region>, and ./dist with your values:

$aws s3 sync ./dist s3://<bucket>/ \
>  --endpoint-url https://<region>.obj.ibee.ai \
>  --profile ibee \
>  --acl public-read \
>  --delete

The --delete flag removes files from the bucket that no longer exist locally — useful for clean redeploys.

5

5. Set correct cache headers

SPAs and static sites benefit from aggressive caching for hashed assets and no caching for index.html. Re-upload index.html with a short TTL after the sync:

$aws s3 cp ./dist/index.html s3://<bucket>/index.html \
>  --endpoint-url https://<region>.obj.ibee.ai \
>  --profile ibee \
>  --acl public-read \
>  --cache-control "no-cache, no-store, must-revalidate" \
>  --content-type "text/html"

This ensures users always get the latest index.html (which references new hashed asset filenames), while the hashed assets themselves can be cached for a year by the CDN.

6

6. Create a CDN distribution

Put a CDN in front of the bucket for HTTPS, custom domains, and global edge caching (CDN integration).

  • Origin Type: Object Storage Bucket → select your bucket
  • Cache Policy: Static Assets (1 year)

You’ll get a CDN URL like dl-abc123.cdn.ibee.ai.

7

7. Configure SPA fallback (SPAs only)

Single-page apps handle routing client-side, so a deep link like /dashboard/settings must still serve index.html (otherwise refresh / direct links return 404).

In the CDN distribution settings, configure:

SettingValue
Default root objectindex.html
404 error responseServe /index.html with status 200
403 error responseServe /index.html with status 200

Skip this step for plain static sites. Multi-page sites need real 404 pages — only enable the fallback for true SPAs (React Router, Vue Router, etc.).

8

8. Add a custom domain

Add your domain (e.g., app.ibee.ai) to the CDN distribution (Custom domains). Then create a CNAME at your DNS provider:

TypeNameValue
CNAMEappdl-abc123.cdn.ibee.ai

SSL is auto-provisioned within a few minutes of DNS propagating.

Verify

Visit your custom domain — you should see your site over HTTPS. For SPAs, refresh on a deep route (e.g., /about) to confirm the fallback works.

$curl -I https://app.ibee.ai
$# HTTP/2 200
$# content-type: text/html
$# cache-control: no-cache, no-store, must-revalidate

Redeploying

Each deploy is a fresh sync:

$npm run build
$aws s3 sync ./dist s3://<bucket>/ \
>  --endpoint-url https://<region>.obj.ibee.ai \
>  --profile ibee --acl public-read --delete
$
$aws s3 cp ./dist/index.html s3://<bucket>/index.html \
>  --endpoint-url https://<region>.obj.ibee.ai \
>  --profile ibee --acl public-read \
>  --cache-control "no-cache" --content-type "text/html"

If hashed asset filenames changed, the CDN serves the new index.html immediately (because of no-cache), which then references the new assets — no manual cache invalidation needed.

Troubleshooting

Site loads on CDN URL but not on custom domain DNS hasn’t propagated yet, or the CNAME points at the bucket instead of the CDN URL. Use dig app.ibee.ai CNAME +short to confirm it resolves to dl-*.cdn.ibee.ai.

SPA returns 404 on refresh of nested routes The 404 → index.html fallback isn’t enabled in the CDN distribution. Re-check Step 7.

Stale content after redeploy Hashed asset filenames should bust caches automatically. If you’re seeing the old index.html, confirm the Cache-Control: no-cache header is set on it (Step 5).

Mixed content / blocked HTTP requests Ensure all internal API calls and asset URLs use HTTPS. Browsers block HTTP subresources on HTTPS pages.

CORS errors when calling APIs from the site Configure CORS on the API or the bucket (CORS).