Prefer Studio dist, rewrite index.html, add vite.svg

Serve pre-built @objectstack/studio dist when available (fast/static); only spawn a Vite dev server as a fallback in dev when dist is missing. Update warnings/log messages accordingly. Add a vite.svg asset to the studio public folder. Change apps/studio vite.config to use a relative base ('./') to support sub-path mounting. In the static plugin, read and rewrite index.html asset paths (href/src starting with '/') to respect the mount path (STUDIO_PATH) and return the rewritten HTML for SPA fallback so the studio works when mounted under a sub-path.

Author: hotlong

apps/studio/public/vite.svg

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

apps/studio/vite.config.ts

@@ -229,31 +229,32 @@ export const serveCommand = new Command('serve')
       }
 
       // ── Studio UI (--ui) ────────────────────────────────────────────
+      // Strategy: always prefer pre-built dist/ if it exists (fast, no
+      // extra process). Only fall back to Vite dev server when dist is
+      // missing AND we're in dev mode.
       let viteProcess: import('child_process').ChildProcess | null = null;
 
       if (options.ui) {
         const studioPath = resolveStudioPath();
         if (!studioPath) {
           console.warn(chalk.yellow(`  ⚠ @objectstack/studio not found — skipping UI`));
+        } else if (hasStudioDist(studioPath)) {
+          // Serve pre-built static files (works in both dev & production)
+          const distPath = path.join(studioPath, 'dist');
+          await kernel.use(createStudioStaticPlugin(distPath));
+          trackPlugin('StudioUI');
         } else if (isDev) {
-          // Dev mode → spawn Vite dev server & proxy through Hono
+          // Fallback: dist not built yet → spawn Vite dev server
           try {
             const result = await spawnViteDevServer(studioPath, { serverPort: port });
             viteProcess = result.process;
             await kernel.use(createStudioProxyPlugin(result.port));
             trackPlugin('StudioUI');
           } catch (e: any) {
-            console.warn(chalk.yellow(`  ⚠ Console UI failed to start: ${e.message}`));
+            console.warn(chalk.yellow(`  ⚠ Studio UI failed to start: ${e.message}`));
           }
         } else {
-          // Production mode → serve pre-built static files
-          const distPath = path.join(studioPath, 'dist');
-          if (hasStudioDist(studioPath)) {
-            await kernel.use(createStudioStaticPlugin(distPath));
-            trackPlugin('StudioUI');
-          } else {
-            console.warn(chalk.yellow(`  ⚠ Studio dist not found — run "pnpm --filter @objectstack/studio build" first`));
-          }
+          console.warn(chalk.yellow(`  ⚠ Studio dist not found — run "pnpm --filter @objectstack/studio build" first`));
         }
       }
 

packages/cli/src/commands/serve.ts

@@ -262,6 +262,15 @@ export function createStudioStaticPlugin(distPath: string) {
         return;
       }
 
+      // Read and rewrite index.html so asset paths respect the mount path.
+      // The dist may have been built with base '/' (absolute paths like
+      // /assets/...) which won't resolve when mounted under /_studio/.
+      const rawHtml = fs.readFileSync(indexPath, 'utf-8');
+      const rewrittenHtml = rawHtml.replace(
+        /(\s(?:href|src))="\/(?!\/)/g,
+        `$1="${STUDIO_PATH}/`,
+      );
+
       // Redirect bare path
       app.get(STUDIO_PATH, (c: any) => c.redirect(`${STUDIO_PATH}/`));
 
@@ -283,9 +292,8 @@ export function createStudioStaticPlugin(distPath: string) {
           });
         }
 
-        // SPA fallback: serve index.html for non-file routes
-        const html = fs.readFileSync(indexPath);
-        return new Response(html, {
+        // SPA fallback: serve rewritten index.html for non-file routes
+        return new Response(rewrittenHtml, {
           headers: { 'content-type': 'text/html; charset=utf-8' },
         });
       });