page:recipes:public directory:react router:relational content

Host public directory with React Router: Postgres-backed content

Deploy a public directory built with React Router on Ample using the relational records pattern. Compute runs the app in an isolated microVM behind a public HTTPS URL, a managed PostgreSQL 16 database is auto-provisioned and injected as DATABASE_URL, and a published bucket serves public assets from the CDN host. Verified on React Router: a workspace-scoped table, an explicit state machine (draft to review to published) that rejects invalid transitions, and a cross-workspace read that returns nothing (transitions=true isolation=true). Not separately tested: your record schema, states and access rules; treat the public directory-specific behavior as your application code.

Representative Queries

Resource Requirements

Infrastructure Requirements

Framework

Workload

Release Status

Support Status

Execution Status

Prerequisites

Input Schema

{
  "additionalProperties": false,
  "properties": {
    "env": {
      "description": "Encrypted environment variables (bucket credentials, secrets)",
      "items": {
        "pattern": "^[A-Z][A-Z0-9_]*=.*$",
        "type": "string"
      },
      "maxItems": 50,
      "type": "array"
    },
    "name": {
      "description": "App name",
      "maxLength": 63,
      "minLength": 1,
      "pattern": "^[a-z0-9-]+$",
      "type": "string"
    },
    "path": {
      "description": "Project directory or ample.toml service",
      "maxLength": 512,
      "minLength": 1,
      "type": "string"
    },
    "release_command": {
      "description": "Migration command run before activation",
      "maxLength": 512,
      "type": "string"
    }
  },
  "required": [
    "env",
    "name",
    "path"
  ],
  "type": "object"
}

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. Implement the pattern on PostgreSQL: The fixture's module implements relational records: a workspace-scoped table, an explicit state machine (draft to review to published) that rejects invalid transitions, and a cross-workspace read that returns nothing (transitions=true isolation=true). Copy the approach into your schema; keep migrations idempotent and run them with --release-command.
  3. 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.
  4. 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.
    • Command: ample deploy . --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=...
  5. Verify: Fetch the live URL and the pattern self-test route(s) (/p/relational-records) from the example; then run your own checks. On failure read ample logs --kind build then --kind runtime.
    • Command: ample logs --kind build

Example

Success Checks

Limitations

Cost Estimate

Evidence Summary

Unknowns