fix: follow hotcrm Vercel deployment pattern for API function detection

Adapts the studio's Vercel deployment to match the proven hotcrm pattern:

1. Created committed `api/[[...route]].ts` catch-all route so Vercel can
   detect it as a serverless function during pre-build phase.

2. Changed esbuild output format from CJS to ESM — the studio's package.json
   has "type": "module", which causes Node.js to parse .js files as ESM.
   The previous CJS output (require/module.exports) would fail to parse.

3. Changed esbuild output path from `api/index.js` to `api/[[...route]].js`
   matching the catch-all naming convention used by hotcrm.

4. Updated vercel.json rewrites from `/api/(.*)` → `/api` to
   `/api/:path*` → `/api/[[...route]]` matching the hotcrm pattern.

5. Removed `outputDirectory: "public"` — Vercel's default for framework:null
   already serves static from public/ and functions from api/ at project root.

6. Reverted build-vercel.sh to original (no copy-to-public/api step).

Reference: https://github.com/objectstack-ai/hotcrm/blob/main/vercel.json

Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/15dce836-8636-4011-9192-87275ec8c7ce

Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com>

Author: Copilot

CHANGELOG.md

@@ -8,17 +8,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Fixed
-- **Studio Vercel API routes returning HTML instead of JSON** — Updated
-  `apps/studio/scripts/build-vercel.sh` to copy the bundled serverless function
-  (`api/index.js`) into the output directory (`public/api/`).  Vercel's
-  `framework: null` defaults `outputDirectory` to `public/` when that directory
-  exists, and only detects serverless functions **inside** the output directory.
-  Previously `api/index.js` was generated at the project root (outside `public/`)
-  and Vercel never recognised it, causing all `/api/*` routes to fall through to
-  the SPA catch-all rewrite.  Also set `outputDirectory: "public"` explicitly in
-  `vercel.json` for clarity, and removed the `functions` block (the in-code
-  `export const config` already configures memory/maxDuration without pre-build
-  file-pattern validation errors).
+- **Studio Vercel API routes returning HTML instead of JSON** — Adopted the
+  same Vercel deployment pattern used by `hotcrm`: committed
+  `api/[[...route]].ts` catch-all route so Vercel detects it pre-build,
+  switched esbuild output from CJS to ESM (fixes `"type": "module"` conflict),
+  and changed the output path from `api/index.js` to `api/[[...route]].js`.
+  Updated rewrites to match: `/api/:path*` → `/api/[[...route]]`.
 - **Studio CORS error on Vercel temporary/preview domains** — Changed
   `VITE_SERVER_URL` from hardcoded `https://play.objectstack.ai` to `""`
   (empty string / same-origin) in `vercel.json` so each deployment — including

apps/studio/.gitignore

@@ -5,7 +5,8 @@ pnpm-lock.yaml
 # Build outputs
 dist
 build
-api
+api/*.js
+api/*.js.map
 *.tsbuildinfo
 
 # Development

apps/studio/api/[[...route]].ts

@@ -0,0 +1,21 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * Vercel Serverless Function — Catch-all API route.
+ *
+ * This file MUST be committed to the repository so Vercel can detect it
+ * as a serverless function during the pre-build phase.
+ *
+ * During the Vercel build step, `scripts/bundle-api.mjs` uses esbuild to
+ * bundle `server/index.ts` (with all workspace dependencies inlined) and
+ * outputs the result as `api/[[...route]].js`, which replaces this file
+ * at deploy time.  The esbuild bundle is used instead of Vercel's native
+ * TypeScript compilation because pnpm strict mode (no shamefully-hoist)
+ * prevents @vercel/node from resolving workspace:* packages correctly.
+ *
+ * @see {@link ../server/index.ts} — the actual server entrypoint
+ * @see {@link ../scripts/bundle-api.mjs} — the esbuild bundler
+ * @see {@link https://github.com/objectstack-ai/hotcrm/blob/main/vercel.json} — reference deployment
+ */
+
+export { default, config } from '../server/index';

apps/studio/scripts/build-vercel.sh

@@ -3,15 +3,19 @@ set -euo pipefail
 
 # Build script for Vercel deployment of @objectstack/studio.
 #
-# Vercel uses outputDirectory (vercel.json → "public") for BOTH static files
-# and serverless function detection.  The api/ subdirectory MUST be inside
-# the output directory — files at the project root are ignored.
+# Follows the same Vercel deployment pattern as hotcrm:
+#   - api/[[...route]].ts is committed to the repo (Vercel detects it pre-build)
+#   - esbuild bundles server/index.ts → api/[[...route]].js (replaces TS at deploy)
+#   - Vite SPA output is copied to public/ for CDN serving
+#
+# Vercel routing (framework: null, no outputDirectory):
+#   - Static files:        served from public/
+#   - Serverless functions: detected from api/ at project root
 #
 # Steps:
 #   1. Turbo build (Vite SPA → dist/)
-#   2. Bundle the API serverless function (→ api/index.js)
+#   2. Bundle the API serverless function (→ api/[[...route]].js)
 #   3. Copy Vite output to public/ for Vercel CDN serving
-#   4. Copy API function into public/api/ so Vercel detects it
 
 echo "[build-vercel] Starting studio build..."
 
@@ -28,11 +32,4 @@ rm -rf public
 mkdir -p public
 cp -r dist/* public/
 
-# 4. Copy API function into output directory for Vercel detection
-#    Vercel only looks for serverless functions inside outputDirectory.
-#    Without this step, api/index.js at the project root is invisible.
-mkdir -p public/api
-cp api/index.js public/api/
-cp api/index.js.map public/api/ 2>/dev/null || true
-
-echo "[build-vercel] Done. Static files + API function in public/"
+echo "[build-vercel] Done. Static files in public/, serverless function in api/[[...route]].js"

apps/studio/scripts/bundle-api.mjs

@@ -35,13 +35,17 @@ await build({
   entryPoints: ['server/index.ts'],
   bundle: true,
   platform: 'node',
-  format: 'cjs',
+  format: 'esm',
   target: 'es2020',
-  outfile: 'api/index.js',
+  outfile: 'api/[[...route]].js',
   sourcemap: true,
   external: EXTERNAL,
   // Silence warnings about optional/unused require() calls in knex drivers
   logOverride: { 'require-resolve-not-external': 'silent' },
+  // Vercel resolves ESM .js files correctly when "type": "module" is set.
+  // CJS format would conflict with the project's "type": "module" setting,
+  // causing Node.js to fail parsing require()/module.exports as ESM syntax.
+  banner: { js: '// Bundled by esbuild — see scripts/bundle-api.mjs' },
 });
 
-console.log('[bundle-api] Bundled server/index.ts → api/index.js');
+console.log('[bundle-api] Bundled server/index.ts → api/[[...route]].js');

apps/studio/server/index.ts

@@ -295,7 +295,7 @@ export default handle(app);
 /**
  * Vercel per-function configuration.
  *
- * Picked up by the @vercel/node runtime from the deployed api/index.js bundle.
+ * Picked up by the @vercel/node runtime from the deployed api/[[...route]].js bundle.
  * Replaces the top-level "functions" key in vercel.json so there is no
  * pre-build file-pattern validation against a not-yet-bundled artifact.
  */

apps/studio/vercel.json

@@ -3,7 +3,6 @@
   "framework": null,
   "installCommand": "cd ../.. && pnpm install",
   "buildCommand": "bash scripts/build-vercel.sh",
-  "outputDirectory": "public",
   "build": {
     "env": {
       "VITE_RUNTIME_MODE": "server",
@@ -19,7 +18,7 @@
     }
   ],
   "rewrites": [
-    { "source": "/api/(.*)", "destination": "/api" },
+    { "source": "/api/:path*", "destination": "/api/[[...route]]" },
     { "source": "/((?!api/).*)", "destination": "/index.html" }
   ]
 }