Static Assets SPA

Serve a static SPA from Workers Static Assets while /api/* routes run on the Worker first via run_worker_first. Uses the ASSETS binding for programmatic asset fetches.

FeaturesCopy Anchor Link

• Static files from ./public with SPA not_found_handling
• run_worker_first: ["/api/*"] so API hits the Worker before assets
• GET /api/hello and GET /api/info JSON endpoints
• Catch-all can proxy to env.ASSETS.fetch when the Worker handles non-API paths

API ReferenceCopy Anchor Link

GET /api/helloCopy Anchor Link

Returns a hello payload from Worker code.

Example RequestCopy Anchor Link

curl "https://your-worker.workers.dev/api/hello"

Success ResponseCopy Anchor Link

{
  "message": "Hello from the Worker",
  "servedBy": "worker"
}

GET /api/infoCopy Anchor Link

App metadata including whether the ASSETS binding is present.

{
  "name": "static-assets-spa",
  "description": "Workers Static Assets SPA with ASSETS binding and run_worker_first for API routes",
  "assetsBinding": true
}

GET /Copy Anchor Link

In unit tests (no assets runtime), returns JSON app info. In production, / is typically served as public/index.html because only /api/* uses run_worker_first.

Use CasesCopy Anchor Link

• Ship a small SPA + JSON API as one Worker
• Authenticate or rewrite API routes while keeping static files edge-cached
• Learn ASSETS binding and run_worker_first routing

LimitationsCopy Anchor Link

• Only one assets directory per Worker
• Smoke tests call the Worker fetch handler directly (JSON /), which differs from production asset-first /
• SPA client must call same-origin /api/* routes

DeploymentCopy Anchor Link

curl "https://your-worker.workers.dev/api/hello"

Local DevelopmentCopy Anchor Link

cd apps/experiments/static-assets-spa
npm install
npm run dev

Open the local URL to load the SPA; it fetches /api/hello.

ConfigurationCopy Anchor Link

"assets": {
  "directory": "./public",
  "binding": "ASSETS",
  "not_found_handling": "single-page-application",
  "run_worker_first": ["/api/*"]
}

Cloudflare Features UsedCopy Anchor Link

• Workers - Edge compute runtime
• Static Assets - Globally cached frontend files
• Assets binding - env.ASSETS.fetch and run_worker_first