Curated Skills
by lstudlo

cloudflare

references/static-assets/configuration.md

.md 187 lines
Content
## Configuration

### Basic Setup

Minimal configuration requires only `assets.directory`:

```jsonc
{
  "name": "my-worker",
  "compatibility_date": "2025-01-01",  // Use current date for new projects
  "assets": {
    "directory": "./dist"
  }
}
```

### Full Configuration Options

```jsonc
{
  "name": "my-worker",
  "main": "src/index.ts",
  "compatibility_date": "2025-01-01",
  "assets": {
    "directory": "./dist",
    "binding": "ASSETS",
    "not_found_handling": "single-page-application",
    "html_handling": "auto-trailing-slash",
    "run_worker_first": ["/api/*", "!/api/docs/*"]
  }
}
```

**Configuration keys:**

- `directory` (string, required): Path to assets folder (e.g. `./dist`, `./public`, `./build`)
- `binding` (string, optional): Name to access assets in Worker code (e.g. `env.ASSETS`). Default: `"ASSETS"`
- `not_found_handling` (string, optional): Behavior when asset not found
  - `"single-page-application"`: Serve `/index.html` for non-asset paths (default for SPAs)
  - `"404-page"`: Serve `/404.html` if present, otherwise 404
  - `"none"`: Return 404 for missing assets
- `html_handling` (string, optional): URL trailing slash behavior
- `run_worker_first` (boolean | string[], optional): Routes that invoke Worker before checking assets

### not_found_handling Modes

| Mode | Behavior | Use Case |
|------|----------|----------|
| `"single-page-application"` | Serve `/index.html` for non-asset requests | React, Vue, Angular SPAs |
| `"404-page"` | Serve `/404.html` if exists, else 404 | Static sites with custom error page |
| `"none"` | Return 404 for missing assets | API-first or custom routing |

### html_handling Modes

Controls trailing slash behavior for HTML files:

| Mode | `/page` | `/page/` | Use Case |
|------|---------|----------|----------|
| `"auto-trailing-slash"` | Redirect to `/page/` if `/page/index.html` exists | Serve `/page/index.html` | Default, SEO-friendly |
| `"force-trailing-slash"` | Always redirect to `/page/` | Serve if exists | Consistent trailing slashes |
| `"drop-trailing-slash"` | Serve if exists | Redirect to `/page` | Cleaner URLs |
| `"none"` | No modification | No modification | Custom routing logic |

**Default:** `"auto-trailing-slash"`

### run_worker_first Configuration

Controls which requests invoke Worker before checking assets.

**Boolean syntax:**

```jsonc
{
  "assets": {
    "run_worker_first": true  // ALL requests invoke Worker
  }
}
```

**Array syntax (recommended):**

```jsonc
{
  "assets": {
    "run_worker_first": [
      "/api/*",           // Positive pattern: match API routes
      "/admin/*",         // Match admin routes
      "!/admin/assets/*"  // Negative pattern: exclude admin assets
    ]
  }
}
```

**Pattern rules:**

- Glob patterns: `*` (any chars), `**` (any path segments)
- Negative patterns: Prefix with `!` to exclude
- Precedence: Negative patterns override positive patterns
- Default: `false` (assets served directly)

**Decision guidance:**

- Use `true` for API-first apps (few static assets)
- Use array patterns for hybrid apps (APIs + static assets)
- Use `false` for static-first sites (minimal dynamic routes)

### .assetsignore File

Exclude files from upload using `.assetsignore` (same syntax as `.gitignore`):

```
# .assetsignore
_worker.js
*.map
*.md
node_modules/
.git/
```

**Common patterns:**

- `_worker.js` - Exclude Worker code from assets
- `*.map` - Exclude source maps
- `*.md` - Exclude markdown files
- Development artifacts

### Vite Plugin Integration

For Vite-based projects, use `@cloudflare/vite-plugin`:

```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import { cloudflare } from '@cloudflare/vite-plugin';

export default defineConfig({
  plugins: [
    cloudflare({
      assets: {
        directory: './dist',
        binding: 'ASSETS'
      }
    })
  ]
});
```

**Features:**

- Automatic asset detection during dev
- Hot module replacement for assets
- Production build integration
- Requires: Wrangler 4.0.0+, `@cloudflare/vite-plugin` 1.0.0+

### Key Compatibility Dates

| Date | Feature | Impact |
|------|---------|--------|
| `2025-04-01` | Navigation request optimization | SPAs skip Worker for navigation, reducing costs |

Use current date for new projects. See [Compatibility Dates](https://developers.cloudflare.com/workers/configuration/compatibility-dates/) for full list.

### Environment-Specific Configuration

Use `wrangler.jsonc` environments for different configs:

```jsonc
{
  "name": "my-worker",
  "assets": { "directory": "./dist" },
  "env": {
    "staging": {
      "assets": {
        "not_found_handling": "404-page"
      }
    },
    "production": {
      "assets": {
        "not_found_handling": "single-page-application"
      }
    }
  }
}
```

Deploy with: `wrangler deploy --env staging`