page:recipes:client portal:nuxt:public profiles

Host client portal with Nuxt: public profile assets

Deploy a client portal built with Nuxt on Ample using the public image delivery 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, a private S3-compatible bucket holds objects with credentials delivered as encrypted environment variables, and a published bucket serves public assets from the CDN host. Verified on Nuxt: public objects in a published bucket served from the CDN URL, kept separate from private objects in an unpublished bucket that require authorization (private=ok only for the allowed role). Not separately tested: your image processing and profile-media rules; treat the client portal-specific behavior as your application code.

Representative Queries

• Host client portal with Nuxt: public profile assets
• Where can I host Client portal built with Nuxt?
• I need separate public profile media from private data, with CDN cache rules.

Resource Requirements

• primitive:compute
• primitive:postgres
• primitive:s3-compatible-object-storage
• primitive:cdn

Infrastructure Requirements

1. Compute
   Apps run in isolated x86_64 Firecracker microVMs that auto-pause when idle and wake on request; sizes are the priced VM sizes.

2. Postgres
   Managed PostgreSQL 16 runs in its own microVM and is auto-provisioned when an app needs a database and no DATABASE_URL is supplied.

3. S3-compatible object storage
   Buckets are S3-compatible with issued credentials; PutObject and GetObject are verified by canary. Other S3 operations are not verified.

4. CDN
   The CDN host serves objects from published buckets. It does not front app compute and is not a cache or key-value store.

Prerequisites

• A Nuxt project that builds and starts with the documented commands (nuxt build then node .output/server/index.mjs (reads HOST and PORT) on the node-22 template)
• A PostgreSQL driver reading DATABASE_URL at runtime (auto-provisioned when omitted, or supplied with --env)
• A bucket from ample bucket create with its credentials passed as encrypted S3_* environment variables and a second, published bucket for public assets (CDN_*)
• An Ample account token with servers:write, databases:read, buckets:read

Workflow Steps

1. Build and start
   nuxt build then node .output/server/index.mjs (reads HOST and PORT) 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 public image delivery: public objects in a published bucket served from the CDN URL, kept separate from private objects in an unpublished bucket that require authorization (private=ok only for the allowed role). 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.
   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) (/api/p/public-media-library, /api/p/private-document-library) from the example; then run your own checks. On failure read ample logs --kind build then --kind runtime.
   ample logs --kind build

Examples

• Nuxt pattern fixture
  Multi-pattern Nuxt app whose public image delivery module was checked live; the module is under tests/deploy-canaries/_pattern-modules.

Success Checks

• app responds on its public URL
  kind: http_get
  path: /
  expect: ample canary nuxt patterns

• public-media-library self-test
  kind: http_get
  path: /api/p/public-media-library
  expect: a CDN URL whose content is served publicly

• private-document-library self-test
  kind: http_get
  path: /api/p/private-document-library
  expect: private=ok (with ?role=owner; 401 without, 403 for viewer)

Limitations

• Verified on the node-22 template at s-1vcpu-1gb with the example fixture; other sizes, templates and Nuxt major versions are not verified.
• The client portal itself (your image processing and profile-media rules) is application code and was not separately tested; the pattern checks are what was verified.
• Region, compliance attestations and request-duration limits are unknown and not claimed.
• Apps auto-pause when idle and wake on the next request; always-on is an operator setting, not a plan feature.

Cost Estimate

• Currency: USD

• Monthly Amount: 10.0

• Components:

  • app server (size: s-1vcpu-1gb, quantity: 1.0, monthly amount: 5.0)
  • managed PostgreSQL database (size: s-1vcpu-1gb, quantity: 1.0, monthly amount: 5.0)

• Note: Always-on monthly price of the tested sizes; apps and databases auto-pause when idle. Buckets are allocation-priced per quota and not included.

Evidence Summary

• Canary Run: Nuxt pattern fixture deployed on Ample (nuxt build then node .output/server/index.mjs (reads HOST and PORT) on the node-22 template); checks passed for public-media-library, private-document-library and configuration-secrets.

• Kind: canary_run
  Summary: The same Nuxt app deployed with a --release-command migration; the marker it created was readable after activation.

Formats

• HTML
• Markdown
• JSON

Next Actions

• Browse the catalog index
• Search published recipes by intent, stack and constraints
• Prepare a side-effect-free deployment plan for an authorized project
• Read the existing agent authentication setup
• Browse Client portal
• Browse Nuxt
• Browse Public image delivery
• Browse Deploy web app