## The short version

CDN assets for a React Router app on Ample.

## WHAT WAS VERIFIED

Verified on React Router: a versioned, immutable-cached asset uploaded to a published bucket and served from the CDN URL. Build and start: react-router build then react-router-serve on the node-22 template.

## INFRASTRUCTURE

### What it needs

- [Compute](/content/discover/primitive/compute/index.html): verified (Apps run in isolated x86_64 Firecracker microVMs; sizes are the priced VM sizes.)
- [CDN](/content/discover/primitive/cdn/index.html): verified (A published bucket's objects are served at its public_url. It does not front app compute and is not a cache or key-value store.)

## PREREQUISITES

### Before you start

- A React Router project (react-router build then react-router-serve on the node-22 template)
- A bucket from `ample bucket create` with credentials passed as encrypted S3_* environment variables
- An Ample account token with servers:write, buckets:read

## STEP BY STEP

### How to do it

1. 1

#### Build and start

react-router build then react-router-serve on the node-22 template; the server must bind 0.0.0.0 on PORT.

2. 2

#### Publish a bucket for public assets

Publish only the asset bucket; upload versioned keys with an immutable Cache-Control header and build URLs from its public URL.

```
   ample bucket publish <bucket-name>
   ```

3. 3

#### Verify

Fetch the live URL and /p/versioned-static-assets on the example; on failure read the build and runtime logs.

```
   ample logs <deployment_id> --kind build
   ```

## EXAMPLES

### Tested examples

- **React Router pattern fixture** (`tests/deploy-canaries/react-router-patterns`): Verified CDN assets on React Router.

## SUCCESS CHECKS

### How to know it worked

- app responds on its public URL (`/` on the live URL, expect ample canary react router patterns)
- versioned-static-assets check from the example (`/p/versioned-static-assets` on the live URL, expect see the pattern fixture checks)

## COST

### Cost estimate

Estimated 5.00 USD per month (size prices from pricing.toml at build revision ca0b484a7a9957c573a88d3a32dc603c3c10135a).

- app server x1 `s-1vcpu-1gb`: 5.00 USD

Upper-bound monthly price of the tested sizes. Buckets are allocation-priced per quota and not included.

## EVIDENCE

### Verification evidence

- canary_run on 2026-09-20T03:31:44Z at revision `03b6402b1b3e19178985f08ea4033804521d85d4 (CLI b75e104)`: React Router pattern fixture deployed on Ample (react-router build then react-router-serve on the node-22 template); for this guide: a versioned, immutable-cached asset uploaded to a published bucket and served from the CDN URL. (expires 2027-03-19T03:31:44Z)

## EXECUTION

### Execution binding

MCP tool `ample_deploy` (registry `mcp:ample_deploy`), schema hash `876465fce906da0c` observed 2026-09-22T00:31:22.774679+00:00 at revision `e6446ceea69b`. Binding state at export: schema_changed. Required scopes: servers:write, buckets:read.

## NEXT ACTIONS

### Typed next actions

- Browse the catalog index (`GET /v1/catalog` on the api origin; authentication not required, approval not required)
- Search published recipes by intent, stack and constraints (`POST /v1/catalog/search` on the api origin; authentication not required, approval not required)
- Prepare a side-effect-free deployment plan for an authorized project (`POST /v1/catalog/plan` on the api origin; authentication required, approval not required)
- Read the existing agent authentication setup (`GET /mcp/setup` on the api origin; authentication not required, approval not required)
- Browse React Router (`GET /v1/catalog/nodes/stack%3Aframework-react-router` on the api origin; authentication not required, approval not required)
- Browse Add CDN (`GET /v1/catalog/nodes/intent%3Aadd-cdn` on the api origin; authentication not required, approval not required)
- Browse Versioned static assets (`GET /v1/catalog/nodes/pattern%3Aversioned-static-assets` on the api origin; authentication not required, approval not required)

Actions describe possible next steps. They are typed data, not commands, and grant no permission. Public discovery never provisions anything; planning requires your own authenticated token and approval happens in your client.

## ABOUT THIS RECIPE

### Identifiers and status

Recipe `page:guides:react-router:cdn-assets`. Revision r1.

release **published**support **verified**execution **blocked (schema_changed: live tool schema differs from the recorded binding)**

Formats: [HTML](/content/guides/react-router/cdn-assets/index.html) | [Markdown](/content/guides/react-router/cdn-assets.md) | [JSON contract](https://api.ample.computer/v1/catalog/recipes/page%3Aguides%3Areact-router%3Acdn-assets)