Merge pull request #1166 from objectstack-ai/claude/deploy-studio-to-vercel

Deploy Studio to /_studio path in Vercel deployments

Author: hotlong

apps/server/scripts/build-vercel.sh

@@ -13,7 +13,7 @@ set -euo pipefail
 # Steps:
 #   1. Build the project with turbo (includes studio)
 #   2. Bundle the API serverless function (→ api/_handler.js)
-#   3. Copy studio dist files to public/ for UI serving
+#   3. Copy studio dist files to public/_studio/ for UI serving at /_studio path
 #   4. Install external deps in api/node_modules/ (resolve pnpm symlinks)
 
 echo "[build-vercel] Starting server build..."
@@ -27,13 +27,13 @@ cd apps/server
 # 2. Bundle API serverless function
 node scripts/bundle-api.mjs
 
-# 3. Copy studio dist files to public/ for UI serving
-echo "[build-vercel] Copying studio dist to public/..."
+# 3. Copy studio dist files to public/_studio/ for UI serving at /_studio path
+echo "[build-vercel] Copying studio dist to public/_studio/..."
 rm -rf public
-mkdir -p public
+mkdir -p public/_studio
 if [ -d "../studio/dist" ]; then
-  cp -r ../studio/dist/* public/
-  echo "[build-vercel]   ✓ Copied studio dist to public/"
+  cp -r ../studio/dist/* public/_studio/
+  echo "[build-vercel]   ✓ Copied studio dist to public/_studio/"
 else
   echo "[build-vercel]   ⚠ Studio dist not found (skipped)"
 fi
@@ -60,4 +60,4 @@ rm package.json
 cd ..
 echo "[build-vercel]   ✓ External dependencies installed in api/node_modules/"
 
-echo "[build-vercel] Done. Static files in public/, serverless function in api/[[...route]].js → api/_handler.js"
+echo "[build-vercel] Done. Static files in public/_studio/, serverless function in api/[[...route]].js → api/_handler.js"

apps/server/vercel.json

@@ -6,7 +6,8 @@
   "build": {
     "env": {
       "VITE_RUNTIME_MODE": "server",
-      "VITE_SERVER_URL": ""
+      "VITE_SERVER_URL": "",
+      "VERCEL": "true"
     }
   },
   "functions": {
@@ -17,14 +18,18 @@
   },
   "headers": [
     {
-      "source": "/assets/(.*)",
+      "source": "/_studio/assets/(.*)",
       "headers": [
         { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
       ]
     }
   ],
+  "redirects": [
+    { "source": "/", "destination": "/_studio", "permanent": false }
+  ],
   "rewrites": [
     { "source": "/api/:path*", "destination": "/api/[[...route]]" },
-    { "source": "/((?!api/).*)", "destination": "/index.html" }
+    { "source": "/_studio/(.*)", "destination": "/_studio/$1" },
+    { "source": "/_studio", "destination": "/_studio/index.html" }
   ]
 }

apps/studio/vite.config.ts

@@ -9,7 +9,7 @@ const hmrConfig = process.env.VITE_HMR_PORT
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: process.env.VITE_BASE || './',  // Relative base for sub-path mounting (e.g. /_studio/)
+  base: process.env.VITE_BASE || (process.env.VERCEL ? '/_studio/' : './'),  // Use /_studio/ for Vercel, relative base for other sub-path mounting
   resolve: {
     dedupe: ['react', 'react-dom'],
     alias: {