Commerce Studio — standalone dev host (app building)

Run the Commerce Studio UI on its own to build apps: point it at your ../apps/ and it renders each app's cockpit.json with realistic mock data — no platform, no backend, no auth. Edit the manifest, reload, iterate.

What this is

A thin Nuxt host around the publishable @revenexx/studio-commerce module — the same manifest-driven AppRenderer the cockpit runs. The renderer is unchanged; all the "local" magic is two Nitro shims in this host that speak the cockpit's exact wire contracts:

 browser ──https──► commerce-studio.rvnxx.test  (this Nuxt host)
   useInstalledApps  →  GET /api/v1/tenants/:slug/apps   ─┐
   usePostgrest      →  /pg/{vendor}__{app}__{entity}    ─┤ served locally
                                                          ▼
   server/utils/commerce.ts:  reads ../apps/<app>/{manifest,cockpit,schema}.json
                              + an in-memory store seeded with fake rows

• Console shim (server/routes/api/v1/tenants/[slug]/apps.get.ts) assembles InstalledAppRecord[] from disk per request — so editing a cockpit.json and reloading reflects immediately.
• PostgREST shim (server/routes/pg/[entity].ts) serves list/get/create/ update/delete over an in-memory store built generically from each schema.json, seeded with plausible fake rows (column types, CHECK enums, FK references), with a Content-Range total.
• Media picker + Baseline-IO are stubbed (standalone has no Storage/IO service); everything else renders and round-trips against the mock.

Quick start

cd revenexx-cockpit
export GITHUB_TOKEN=ghp_xxx        # read:packages (for @revenexx/studio*)
docker compose -f apps/commerce-studio-dev/docker-compose.dev.yml up

Open https://commerce-studio.rvnxx.test → redirects to /commerce. The sidebar lists every app under ../apps/; open one (e.g. inventories or products) and its list/detail/form/widget views render from cockpit.json with mock rows. Create/edit persist in-memory for the session.

Host mode (no Docker):

export APPS_DIR=/absolute/path/to/playground/apps   # optional; default is ../../../apps
pnpm --filter commerce-studio-dev dev               # http://localhost:3000

The app-building loop

1. Edit your app under ../apps/<app>/:
   • cockpit.json — navigation / list / detail / form / widget views (the UI).
   • schema.json — entities + columns (drives the mock data + Data Model page).
2. Reload the studio → the manifest is re-read and re-rendered. No rebuild.
3. Iterate. When happy, the same cockpit.json renders identically in the real cockpit (this host runs the exact same module).

Config (nuxt.config.ts runtimeConfig.public)

| Key | Default | Purpose | |---|---|---| | consoleApi | '' (same-origin) | useInstalledApps → the Console shim | | postgrestApi | /pg | usePostgrest → the PostgREST shim | | devToken / devTenant | dev | Standalone platform-provider (any non-empty token unlocks the shims) | | APPS_DIR (env) | ../../../apps (host) / /apps (compose) | Where apps are read from |

Troubleshooting

| Symptom | Fix | |---|---| | Empty sidebar / no apps | APPS_DIR wrong, or apps have no cockpit.json. Container mounts ../../../apps → /apps. | | List views empty | The entity has no schema.json columns, or a CHECK/reference the generator couldn't seed — check server/utils/commerce.ts. | | A media field is inert | By design (standalone stub) — the real Storage picker is cockpit-only. | | Import/Export missing on a view | By design — Baseline-IO is stubbed standalone (useCommerceIo returns null). |

Use it from your own app repo (published: @revenexx/studio-commerce-devkit)

Once the studio packages are published to GitHub Packages, an app author works entirely inside their app repo — no cockpit checkout:

cd apps/products                              # your app repo (has cockpit.json)
pnpm add -D @revenexx/studio-commerce-devkit
pnpm commerce-studio                          # → http://localhost:3030 → /commerce

The commerce-studio bin boots this preview app (from node_modules) with APPS_DIR = your cwd, so it renders your app from cockpit.json with mock data. Preview the whole set instead: APPS_DIR=/path/to/apps pnpm commerce-studio. Requires the @revenexx registry in .npmrc (+ a read:packages token), same as any @revenexx/* install. Build output goes to .commerce-studio/ in your app (gitignore it).

Functions console (/functions)

Run your app's server-side code locally against a simulated API gateway — open /functions (nav link in the top strip). It lists your app's routes from manifest.capabilities.json; pick one, fill path params / query / a JSON body (prefilled from the request schema), and Send → you see the real response (status, JSON, timing, and the function's log() output).

How it works: each app is a single function at src/main.js (@revenexx/app-sdk/router). The gateway (/gateway/<app>/<path…>) builds an open-runtimes FnContext, require()s src/main.js, and invokes it. The function's data adapter is pointed at this host's /pg mock store (REVENEXX_DATA_ENDPOINT), so function reads/writes share the same data as the Commerce Studio views — create a market via POST /markets, then see it in the /commerce list. Requires the app's deps installed (its @revenexx/app-sdk); edits to src/main.js are picked up on the next run.

Notes

• Mock data is in-memory and regenerated on server restart; it's for seeing the UI, not persistence. A real local Postgres/PostgREST (from schema.json DDL) is a deferred option if you need real constraints/RLS.
• This same package doubles as the in-workspace dev host (the docker compose above) and the published @revenexx/studio-commerce-devkit app-dev tool.