From 660bcf56c103577e81a84c43c8524a1652e2dad7 Mon Sep 17 00:00:00 2001 From: Ivan Banov Date: Sun, 19 Jul 2026 19:07:26 +0200 Subject: [PATCH] ci(deploy): publish the React Storybook to GitHub Pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Deploy workflow was an unfilled scaffold — it built a nonexistent `website` package under a placeholder base path. Point it at the React Storybook instead: - Build via `pnpm build-storybook` and upload `packages/react/storybook-static`. - Reuse the `ci-setup` action (git, pnpm, node from .nvmrc, frozen install). - Enable Pages from the workflow (`configure-pages enablement: true`) so the first deploy needs no manual settings toggle, and feed its `base_path` to the build. - Teach `.storybook/main.ts` to honor `BASE_PATH` via Vite's `base`, so the preview's assets resolve under the project subpath (e.g. /ui/); local dev and builds leave it unset and stay at the root. Verified locally: `BASE_PATH=/ui/ pnpm build-storybook` emits iframe assets at /ui/assets/… while the manager keeps relative refs, which is what resolves correctly on a Pages project site. Co-Authored-By: Claude Opus 4.8 (1M context) --- .github/workflows/deploy.yml | 34 +++++++++++++------------------ packages/react/.storybook/main.ts | 7 +++++++ 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 96d94c5..3677358 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -21,33 +21,27 @@ jobs: steps: - uses: actions/checkout@v4 - # pnpm version comes from package.json's `packageManager` field — - # pinning it here too makes the action fail on any mismatch. - - uses: pnpm/action-setup@v4 + # git, pnpm, node (.nvmrc), and a frozen install — same as CI. + - uses: ./.github/actions/ci-setup - - uses: actions/setup-node@v4 + # `enablement: true` turns Pages on via the API the first time, so the + # deploy works without a manual toggle in repo settings. + - id: pages + uses: actions/configure-pages@v5 with: - node-version: 24 - cache: pnpm + enablement: true - - name: Install dependencies - run: pnpm install --frozen-lockfile - - - name: Build site - # base must match the path the site is served under so asset URLs - # resolve, e.g. // for GitHub Pages project sites, or the - # rewrite prefix for the dunky-dev.com multi-zone setup. + - name: Build Storybook + # The project site is served under // (e.g. /ui/), so the + # preview's assets must resolve there — main.ts feeds BASE_PATH into + # Vite's base. `base_path` comes from the Pages config above. env: - BASE_PATH: /TODO-set-base-path/ - # TODO: point this at the site package, e.g. `pnpm -C website build` - run: pnpm -C website build - - - uses: actions/configure-pages@v5 + BASE_PATH: ${{ steps.pages.outputs.base_path }} + run: pnpm build-storybook - uses: actions/upload-pages-artifact@v3 with: - # TODO: match your site's build output dir - path: website/dist + path: packages/react/storybook-static deploy: needs: build diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts index 44a6487..1068afd 100644 --- a/packages/react/.storybook/main.ts +++ b/packages/react/.storybook/main.ts @@ -10,6 +10,13 @@ const config: StorybookConfig = { features: { sidebarOnboardingChecklist: false, }, + // Served under a subpath on GitHub Pages (e.g. /ui/), so the preview's asset + // URLs must resolve there. The deploy workflow sets BASE_PATH; local dev and + // builds leave it unset and stay at the root. + viteFinal: viteConfig => { + viteConfig.base = process.env.BASE_PATH ?? '/' + return viteConfig + }, } export default config