# Configure S3-compatible access for React Router

## Summary
Object storage client for a React Router app on Ample. Verified on React Router: bucket credentials delivered as encrypted S3_* environment variables and a validated PutObject/GetObject round-trip linked to a database row (upload=ok linked=ok). Build and start: react-router build then react-router-serve on the node-22 template.

## Representative Queries
- Configure S3-compatible access for React Router
- Where can I host Configure S3-compatible access built with React Router?
- I need exact S3 endpoint, credentials, operation requirements and an upload/download verification.

## Prerequisites
- 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

## Tested Configuration
- **Template:** node-22
- **Runtime:** node
- **Size:** s-1vcpu-1gb
- **Install:** npm install
- **Build:** npm run build --if-present
- **Start:** npm run start

## Workflow Steps
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. **Create the bucket and pass its credentials**  
   Create it once with `ample bucket create`, then pass endpoint, region, bucket and keys with --env; use path-style addressing.  
   **Command:**  
   ample deploy . --name  --public --env S3_ENDPOINT=... --env S3_REGION=... --env S3_BUCKET=... --env S3_ACCESS_KEY_ID=... --env S3_SECRET_ACCESS_KEY=...

3. **Verify**  
   Fetch the live URL and /p/browser-file-uploads on the example; on failure read the build and runtime logs.  
   **Command:**  
   ample logs  --kind build

## Limitations
- Verified on the node-22 template at s-1vcpu-1gb; other sizes and React Router major versions are not verified.
- Region, compliance attestations and request-duration limits are unknown and not claimed.
- PutObject and GetObject with path-style addressing are verified; other S3 operations are not.

## Cost Estimate
- **Currency:** USD  
- **Monthly Amount:** 5.0  
- **Basis:** size prices from pricing.toml (loaded by the API)
- **Components:**  
  - **Name:** app server  
    - **Size:** s-1vcpu-1gb  
    - **Quantity:** 1.0  
    - **Monthly Amount:** 5.0  
- **Note:** Always-on monthly price of the tested sizes; apps auto-pause when idle. Buckets are allocation-priced per quota and not included.

## Examples
- **React Router pattern fixture**  
  Verified object storage client on React Router.  
  **Source Ref:** tests/deploy-canaries/react-router-patterns

## Success Checks
1. **App responds on its public URL**  
   - **Kind:** http_get  
   - **Path:** /  
   - **Expect:** ample canary react router patterns

2. **Browser-file-uploads check from the example**  
   - **Kind:** http_get  
   - **Path:** /p/browser-file-uploads  
   - **Expect:** see the pattern fixture checks.

## Evidence Summary
- **Kind:** canary_run  
- **Summary:** React Router pattern fixture deployed on Ample (react-router build then react-router-serve on the node-22 template); for this guide: bucket credentials delivered as encrypted S3_* environment variables and a validated PutObject/GetObject round-trip linked to a database row (upload=ok linked=ok).  
- **Observed At:** 2026-09-20T03:31:44Z  
- **Expires At:** 2027-03-19T03:31:44Z

## Next Actions
- **Browse the catalog index**  
  - **Action ID:** browse-catalog  
  - **Operation ID:** catalog_index  
  - **Method:** GET  
  - **Relative Path:** /v1/catalog
  - **Requires Authentication:** false

- **Search published recipes by intent, stack and constraints**  
  - **Action ID:** search-recipes  
  - **Operation ID:** search_recipes  
  - **Method:** POST  
  - **Relative Path:** /v1/catalog/search  
  - **Parameters:**  
    - **Body:**  
      - **Limit:** 5  
      - **Query:** Configure S3-compatible access for React Router  
  - **Requires Authentication:** false