Skip to content

feat(app-host): serve Studio UI on homepage #1131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hotlong merged 2 commits into from
Apr 14, 2026
+27 −8
Merged

feat(app-host): serve Studio UI on homepage #1131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d31a72
feat(app-host): load studio UI on homepage
Claude Apr 14, 2026
452c718
fix(app-host): remove .npmrc to fix Vercel pnpm install conflict
Claude Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions examples/app-host/.npmrc
View file
Open in desktop

This file was deleted.

21 changes: 17 additions & 4 deletions examples/app-host/scripts/build-vercel.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,33 @@ set -euo pipefail
# - api/[[...route]].js is committed to the repo (Vercel detects it pre-build)
# - esbuild bundles server/index.ts → api/_handler.js (self-contained bundle)
# - The committed .js wrapper re-exports from _handler.js at runtime
# - Studio SPA is built and copied to public/ for serving the UI
#
# Steps:
# 1. Build the project with turbo
# 1. Build the project with turbo (includes studio)
# 2. Bundle the API serverless function (→ api/_handler.js)
# 3. Copy native/external modules into local node_modules for Vercel packaging
# 3. Copy studio dist files to public/ for UI serving

echo "[build-vercel] Starting app-host build..."

# 1. Build the project with turbo (from monorepo root)
# This builds both app-host and studio
cd ../..
pnpm turbo run build --filter=@example/app-host
pnpm turbo run build --filter=@example/app-host --filter=@objectstack/studio
cd examples/app-host
Comment on lines +20 to 23
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When Studio is built from app-host, no Vite env vars are set. Studio defaults to mode: 'msw' (and serverUrl: 'http://localhost:3000') unless VITE_RUNTIME_MODE=server and VITE_SERVER_URL are provided or it’s served under /_studio. For a deployed homepage, this likely means the UI won’t connect to the app-host API by default. Consider exporting VITE_RUNTIME_MODE=server and setting VITE_SERVER_URL to empty string (same-origin) for the Studio build in this script.

Copilot uses AI. Check for mistakes.

# 2. Bundle API serverless function
node scripts/bundle-api.mjs

echo "[build-vercel] Done. Serverless function in api/[[...route]].js → api/_handler.js"
# 3. Copy studio dist files to public/ for UI serving
echo "[build-vercel] Copying studio dist to public/..."
rm -rf public
mkdir -p public
if [ -d "../../apps/studio/dist" ]; then
cp -r ../../apps/studio/dist/* public/
echo "[build-vercel] ✓ Copied studio dist to public/"
else
echo "[build-vercel] ⚠ Studio dist not found (skipped)"
fi

Comment on lines +30 to +38
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This removes public/ before verifying that ../../apps/studio/dist exists. If the Studio build output path changes or the build is skipped, the deploy will end up without any index.html (and the SPA rewrite will then serve a 404). Safer options are to only delete/replace public/ after confirming dist/ exists, or to fail the build when dist/ is missing since the UI is now required.

Suggested change
rm -rf public
mkdir -p public
if [ -d "../../apps/studio/dist" ]; then
cp -r ../../apps/studio/dist/* public/
echo "[build-vercel] ✓ Copied studio dist to public/"
else
echo "[build-vercel] ⚠ Studio dist not found (skipped)"
fi
STUDIO_DIST="../../apps/studio/dist"
PUBLIC_DIR="public"
if [ ! -d "$STUDIO_DIST" ]; then
echo "[build-vercel] ✗ Studio dist not found at $STUDIO_DIST"
echo "[build-vercel] ✗ Failing build because the Studio UI bundle is required for deployment"
exit 1
fi
rm -rf "$PUBLIC_DIR"
mkdir -p "$PUBLIC_DIR"
cp -r "$STUDIO_DIST"/. "$PUBLIC_DIR"/
echo "[build-vercel] ✓ Copied studio dist to public/"

Copilot uses AI. Check for mistakes.
echo "[build-vercel] Done. Static files in public/, serverless function in api/[[...route]].js → api/_handler.js"
11 changes: 10 additions & 1 deletion examples/app-host/vercel.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,16 @@
"maxDuration": 60
}
},
"headers": [
{
"source": "/assets/(.*)",
"headers": [
{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
]
}
],
"rewrites": [
{ "source": "/api/:path*", "destination": "/api/[[...route]]" }
{ "source": "/api/:path*", "destination": "/api/[[...route]]" },
{ "source": "/((?!api/).*)", "destination": "/index.html" }
]
}
Loading