feat(app-host): serve Studio UI on homepage#1131
Conversation
- Build studio alongside app-host in build-vercel.sh - Copy studio dist files to app-host public/ directory - Add SPA routing to serve studio UI for non-API routes - Add cache headers for static assets Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/13b58dad-d5c4-4665-b3dd-b92c8b773190 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@claude[agent] ERR_PNPM_EEXIST EEXIST: file already exists, rename '/vercel/path0/node_modules/npm/node_modules' -> '/vercel/path0/node_modules/npm_tmp_608_2/node_modules' |
The app-host/.npmrc with node-linker=hoisted was causing pnpm install conflicts on Vercel (ERR_PNPM_EEXIST). Studio doesn't have a local .npmrc and works fine, so removing it to match that pattern. Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/9f2af2b5-3ebb-470a-944d-918293a36a82 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Fixed in 452c718. Removed the app-host/.npmrc file - it was causing a conflict during |
There was a problem hiding this comment.
Pull request overview
This PR updates the examples/app-host Vercel deployment to serve the compiled Studio SPA from the homepage (instead of the placeholder renderer), while keeping /api/* routed to the serverless API handler.
Changes:
- Add long-term caching headers for Vite-built static assets and SPA rewrites to
vercel.json. - Update the Vercel build script to build Studio alongside app-host and copy
apps/studio/distintoexamples/app-host/public. - Remove the app-local pnpm configuration file (
.npmrc) from app-host.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| examples/app-host/vercel.json | Adds cache headers for /assets/* and SPA rewrites so non-API routes serve index.html. |
| examples/app-host/scripts/build-vercel.sh | Builds Studio in the Vercel build step and replaces public/ with Studio’s dist/ output. |
| examples/app-host/.npmrc | Removes per-app pnpm config from app-host. |
| # 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 |
There was a problem hiding this comment.
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.
| 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 | ||
|
|
There was a problem hiding this comment.
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.
| 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/" |
The deployed app-host was showing "Fetching Protocol & Data..." instead of the Studio UI. This configures app-host to build and serve the compiled Studio React application.
Changes
scripts/build-vercel.sh): Build Studio alongside app-host and copy itsdist/output topublic/vercel.json): Add SPA routing to serve Studio UI for non-API routes, plus cache headers for static assetsResult
The homepage now loads the full Studio React UI. API routes continue to work via
/api/*, and client-side routing works correctly for the SPA.