## The short version

Deploy a public directory built with React Router on Ample using the public web service pattern. Compute runs the app in an isolated microVM behind a public HTTPS URL, and a published bucket serves public assets from the CDN host.

## WHAT WAS VERIFIED

Verified on React Router: a versioned, immutable-cached asset uploaded to a published bucket and served from the CDN URL alongside the app's own public HTTPS URL.

## 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 that builds and starts with the documented commands (react-router build then react-router-serve on the node-22 template)
- A bucket from `ample bucket create` with its 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

### Wire object storage

Create the bucket(s), then pass endpoint, region, bucket and keys as --env values. Use path-style addressing. Keep private data in an unpublished bucket. Publish only the bucket that serves public assets and reference its CDN URL.

3. 3

### Deploy

Run the synchronous deploy once and read the result (exit 0 live, 1 failed, 2 blocked). Re-running with no change is a no-op.

```
ample deploy . --name <app-name> --public --env S3_ENDPOINT=... --env S3_REGION=... --env S3_BUCKET=... --env S3_ACCESS_KEY_ID=... --env S3_SECRET_ACCESS_KEY=... --env CDN_PUBLIC_URL=...
```

4. 4

### Verify

Fetch the live URL and the pattern self-test route(s) (/p/versioned-static-assets) from the example; then run your own checks. On failure read `ample logs <deployment_id> --kind build` then `--kind runtime`.

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

## EXAMPLES

## Tested examples

- **React Router pattern fixture** (`tests/deploy-canaries/react-router-patterns`): Multi-pattern React Router app whose public web service module was checked live; the module is under tests/deploy-canaries/_pattern-modules.

## 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 self-test (`/p/versioned-static-assets` on the live URL, expect a CDN URL whose content is served publicly)

## 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); checks passed for versioned-static-assets and configuration-secrets. Pattern proof: a versioned, immutable-cached asset uploaded to a published bucket and served from the CDN URL alongside the app's own public HTTPS URL. (expires 2027-03-19T03:31:44Z)
- canary_run on 2026-09-20T02:16:51Z at revision `199ff1dfd52683832ae75d3f98b53a7a4bff7f96 (CLI e3181f5)`: The same React Router app deployed with a --release-command migration; the marker it created was readable after activation. (expires 2027-03-19T02:16:51Z)

## 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 Public directory (`GET /v1/catalog/nodes/workload%3Apublic-directory` 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 Public web service (`GET /v1/catalog/nodes/pattern%3Apublic-web-service` on the api origin; authentication not required, approval not required)
- Browse Deploy web app (`GET /v1/catalog/nodes/intent%3Adeploy-web-app` on the api origin; authentication not required, approval not required)

## ABOUT THIS RECIPE

## Identifiers and status

Recipe `page:recipes:public-directory:react-router:public-site`. Revision r1.

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

Formats: [HTML](/content/recipes/public-directory/react-router/public-site/index.html) \| [Markdown](/content/recipes/public-directory/react-router/public-site.md) \| [JSON contract](https://api.ample.computer/v1/catalog/recipes/page%3Arecipes%3Apublic-directory%3Areact-router%3Apublic-site)