Skip to main content

Source: ocean/docs/assets-blob-storage.md | ✏️ Edit on GitHub

Public Assets on Blob Storage

This project is configured to automatically upload public assets to Vercel Blob Storage for better performance and CDN distribution.

How It Works​

  1. Local Development: Assets are served from the /public folder
  2. Production: Assets are uploaded to Vercel Blob Storage and served from CDN

Asset Upload Process​

Automatic Upload on Deploy​

The assets:upload script runs automatically during the build process when you use:

pnpm run build:with-assets

Manual Upload​

To manually upload assets to blob storage:

pnpm run assets:upload

Configured Assets​

The following folders are automatically synced to blob storage:

  • /public/Cover Image/ - Cover images for pages
  • /public/Logomark/ - Logo mark variations
  • /public/Primary Logo/ - Full logo variations

The following files remain local for performance:

  • favicon.ico
  • logo192.png
  • logo512.png
  • manifest.json
  • robots.txt

Asset Service​

The getAssetUrl() function automatically handles asset URLs:

import { getAssetUrl } from '@/services/asset-service'

// In development: returns "/Cover Image/ocean-beach.jpg"
// In production: returns blob storage URL if available
const imageUrl = getAssetUrl('/Cover Image/ocean-beach.jpg')

Adding New Assets​

  1. Add the asset to the appropriate folder in /public
  2. Run pnpm run assets:upload to upload to blob storage
  3. Use getAssetUrl() to reference the asset in your code

Benefits​

  • Better Performance: Assets served from Vercel's global CDN
  • Reduced Bundle Size: Static assets don't bloat your JavaScript bundle
  • Automatic Optimization: Vercel optimizes delivery based on user location
  • Version Control: Large binary files don't bloat your Git repository

Environment Setup​

The BLOB_READ_WRITE_TOKEN is automatically available in Vercel deployments. For local testing of the upload script, add it to your .env file:

BLOB_READ_WRITE_TOKEN=vercel_blob_your_token_here

Troubleshooting​

Assets not uploading​

  1. Check that BLOB_READ_WRITE_TOKEN is set
  2. Verify the asset is in one of the configured folders
  3. Check the console output for specific errors

Assets not loading in production​

  1. Ensure the upload script ran during build
  2. Check that getAssetUrl() is used instead of hardcoded paths
  3. Verify the asset was successfully uploaded to blob storage