Blinkin Legacy Docs Docs
Porting · porting/2026-05-05-picasso-fe-local-build-runtime.md Docs Home

Picasso FE Local Build And Runtime Slice

Date: 2026-05-05

Objective

Make the imported legacy picasso-fe monorepo reproducible locally for the three frontend surfaces:

  • apps/houston: public/published app runtime.
  • apps/picasso-editor: visual Studio editor.
  • apps/widget: legacy Picasso widget package.

This slice proves install, production builds, and basic local dev server health. It does not yet prove authenticated end-to-end product behavior.

What Was Added

  • configs/local/picasso-houston.env.example Local-only Houston values for Studio API, Auth0 placeholders, PostHog placeholders, media bucket URL, Zweistein URL, and dev port.
  • configs/local/picasso-editor.env.example Local-only Picasso Editor values for Studio API, Houston, Zweistein, Auth0 placeholders, Google placeholders, feature flags, media bucket URL, router basename, and dev port.
  • configs/local/picasso-widget.env.example Local-only widget port and shared placeholder values.
  • scripts/picasso-fe-local.mjs Small helper for install, Houston build, Picasso Editor build, widget build, artifact checks, dev servers, and health checks.
  • package.json scripts:
    • picasso-fe:install
    • picasso-fe:build:houston
    • picasso-fe:build:editor
    • picasso-fe:build:widget
    • picasso-fe:artifact
    • picasso-houston:dev
    • picasso-houston:health
    • picasso-editor:dev
    • picasso-editor:health
    • picasso-widget:dev
    • picasso-widget:health
  • legacy-src/picasso-fe/apps/houston/vite.config.ts Local dev now only enables vite-plugin-mkcert when VITE_ENABLE_MKCERT=true; local proxy targets can use env values.
  • legacy-src/picasso-fe/apps/picasso-editor/vite.config.ts Local dev now only enables vite-plugin-mkcert when VITE_ENABLE_MKCERT=true; the Zweistein proxy can use VITE_ZWEISTEIN_URL.

Local Commands

Install the Picasso FE monorepo:

npm run picasso-fe:install

Build Houston:

npm run picasso-fe:build:houston

Build Picasso Editor:

npm run picasso-fe:build:editor

Build Picasso widget:

npm run picasso-fe:build:widget

Check build artifacts:

npm run picasso-fe:artifact

Expected artifacts:

legacy-src/picasso-fe/apps/houston/dist/index.html
legacy-src/picasso-fe/apps/picasso-editor/dist/studio/index.html
legacy-src/picasso-fe/apps/widget/dist/index.html

Run local dev servers:

npm run picasso-houston:dev
npm run picasso-editor:dev
npm run picasso-widget:dev

Check local dev routes:

npm run picasso-houston:health
npm run picasso-editor:health
npm run picasso-widget:health

Expected routes:

http://127.0.0.1:5175/
http://127.0.0.1:5174/studio/
http://127.0.0.1:5178/

Verification Evidence

  • HUSKY=0 npm ci in legacy-src/picasso-fe completed.
  • npm run picasso-fe:artifact found Houston, Picasso Editor, and widget build artifacts.
  • npm run picasso-fe:build:houston passed through the root helper.
  • npm run picasso-fe:build:editor passed through the root helper.
  • npm run picasso-fe:build:widget passed through the root helper.
  • npm run picasso-houston:dev launched Vite on http://127.0.0.1:5175/.
  • npm run picasso-houston:health returned HTTP 200.
  • npm run picasso-editor:dev launched Vite on http://127.0.0.1:5174/studio/.
  • npm run picasso-editor:health returned HTTP 200.
  • npm run picasso-widget:dev launched Vite on http://127.0.0.1:5178/.
  • npm run picasso-widget:health returned HTTP 200.

Important Findings

The imported Picasso FE monorepo has a few legacy assumptions that matter for the Hetzner rebuild:

  • The README says the repo uses npm, but Turbo invokes package builds through Yarn 1.
  • .npmrc references ${PQINA_NPM_TOKEN}. No active @pqina/* dependency was found in the current package and lock files, but Yarn still requires the environment variable to be set when it reads .npmrc.
  • The Dockerfiles install turbo@1.13.3 globally. The imported root package.json contains turborepo@0.0.1, which does not provide the turbo binary. The local helper uses npx turbo@1.13.3 to stay close to the Dockerfile without global installs.
  • Turbo warns that it cannot fully resolve workspaces because the root workspace list includes docs, but that folder is not present in the imported Picasso snapshot.
  • Houston and Picasso Editor both had mandatory vite-plugin-mkcert configuration. Local dev now disables mkcert by default through VITE_ENABLE_MKCERT=false.

Build Warnings To Track Later

  • npm ci reported 84 dependency vulnerabilities: 9 low, 16 moderate, 54 high, and 5 critical.
  • Houston and Picasso Editor bundles are very large and trigger Vite chunk-size warnings.
  • Browserslist data is stale.
  • Picasso Editor warns that packages/tailwind-config/tailwind.config.ts has module syntax without "type": "module".
  • Picasso Editor build warns about eval usage in bluebird.
  • Picasso Editor build writes a vite-profile-0.cpuprofile file because the legacy package build uses vite build --profile.

No dependency upgrades or broad cleanup were applied in this slice.

Not Yet Done

  • Real Auth0 login was not exercised.
  • Houston was not connected to a real local published flow.
  • Picasso Editor was not walked through visual flow editing in the browser.
  • Picasso Editor was not connected end to end to Studio API, Zweistein server, and Houston at runtime.
  • The generated widget from apps/widget was not attached to a published Houston page.
  • The future Hetzner routing shape for /studio, Houston, and widget assets is not decided yet.