cloudflare-static-assetslisted

# Cloudflare Static Assets ## Overview This skill provides a robust solution for handling static assets in React Router applications deployed to Cloudflare Workers. It addresses the common issue where files in the `public` directory work in development (Vite) but fail with 404 errors in production due to differences in how assets are served. ## Problem Context **Development vs Production Mismatch:** - **Development (Vite)**: Files in `public/` are automatically served at the root path - **Production (Cloudflare Workers)**: Static files need to be configured separately as Static Assets This causes code like `fetch('/data/config.json')` to work locally but fail with 404 in production. ## Solution: Configuration + Utility Functions ### Step 1: Configure `wrangler.jsonc` Enable Static Assets by adding the `assets` configuration: ```jsonc { "compatibility_date": "2024-11-18", "assets": { "directory": "./public", "binding": "ASSETS" } } ``` ### Step 2: Create Utility Functions Create `app/lib/utils/static-assets.ts` (or similar path) with the following implementation: ```typescript /** * Static Assets Utility * * Provides unified access to static files across different environments: * - Development (Vite): Uses standard fetch() * - Production (Cloudflare Workers): Uses ASSETS binding * - Build time (Node.js): Falls back to file system access */ interface CloudflareContext { cloudflare?: { env: Env; }; } /** * Determines if we have access