## The short version

Connect a React Router app to PostgreSQL on Ample. Read `DATABASE_URL` at runtime with pg: when you supply one with `--env` it is delivered encrypted and takes precedence; when you supply none and the app needs PostgreSQL, Ample auto-provisions a managed PostgreSQL 16 database and injects its connection string.

## 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.)  
- [Postgres](/content/discover/primitive/postgres/index.html): verified (Managed PostgreSQL 16 runs in its own microVM and is auto-provisioned when an app needs a database and no `DATABASE_URL` is supplied.)

## Before you start

- pg reading the `DATABASE_URL` environment variable at runtime  
- Either a production `DATABASE_URL` to pass with `--env`, or nothing (auto-provision)  
- An Ample account token with `servers:write` and `databases:read`

## How to do it

1. **Read the URL at runtime**

Open connections from the `DATABASE_URL` environment variable inside the app; never commit credentials and never connect at build time.

2. **Choose the source of the database**

Pass `--env DATABASE_URL=...` for an existing database, or omit it to let Ample provision a managed one on first deploy and reuse it on redeploys.
   
   ```
   ample deploy . --name <app-name> --public
   ```

3. **Test the connection through the app**

Expose a route (`/db`) that runs a trivial query and returns `postgres=ok`.

4. **Verify**

Fetch the live URL and run the success checks below. On failure read the build log, then the runtime log, fix the cause and deploy again; do not blind-retry.
   
   ```
   ample logs <deployment_id> --kind build
   ```

## Tested examples

- **React Router + PostgreSQL canary** (`tests/deploy-canaries/react-router-postgres-app`): Auto-provisioned managed database with a real query.

## How to know it worked

- database route reports a live connection (`/db` on the live URL, expect `postgres=ok`)

## Cost estimate

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

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

Upper-bound monthly price of the tested sizes. Plan quotas and budgets apply.

## Verification evidence

- canary_run on 2026-09-20T01:42:25Z at revision `199ff1dfd52683832ae75d3f98b53a7a4bff7f96 (CLI e3181f5)`: React Router 7 resource routes using pg with an auto-provisioned managed PostgreSQL database: `/db` reported `postgres=ok` and `/config` confirmed the encrypted secret. (expires 2027-03-19T01:42:25Z)
- canary_run on 2026-09-19T23:55:33Z at revision `1764076-tls-account-903d345`: Node app needing PostgreSQL with no `DATABASE_URL`: a managed database was auto-provisioned and `/db` reported `postgres=ok`. (expires 2027-03-18T23:55:33Z)

## Execution binding

MCP tool `ample_deploy` (registry `mcp:ample_deploy`), schema hash `876465fce906da0c` observed 2026-09-20T01:55:48.667900+00:00 at revision `199ff1dfd526`. Binding state at export: `schema_changed`. Required scopes: `servers:write`, `databases:read`.

## 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 Connect app to database (`GET /v1/catalog/nodes/intent%3Aconnect-app-to-database` on the api origin; authentication not required, approval not required)
- Browse Relational records (`GET /v1/catalog/nodes/pattern%3Arelational-records` 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.

## Identifiers and status

Recipe `page:guides:react-router:database-connection`. Revision r1.

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

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