Skip to content

feat(turborepo-rspack-mf): swap Router layout for Zephyr splash + MF live demo#173

Open
billwatson017 wants to merge 2 commits intomainfrom
feat/turbo-splash-page
Open

feat(turborepo-rspack-mf): swap Router layout for Zephyr splash + MF live demo#173
billwatson017 wants to merge 2 commits intomainfrom
feat/turbo-splash-page

Conversation

@billwatson017
Copy link
Copy Markdown
Contributor

Summary

Applies the same splash-page + Federation Demo pattern from #172 (nx-rspack-mf) to the Turborepo example. Replaces the React-Router boundary-toggle layout in build-systems/turborepo-rspack-mf with the canonical ZephyrWelcome splash, and adds a live Module Federation demo rendered between the quick-start and pipeline blocks.

What changed

  • Host splashApp.tsx now renders ZephyrWelcome with Turborepo + Rspack + MF metadata. No more BrowserRouter, Routes, or the showBoundaries toggle button.
  • New ZephyrWelcome.tsx + FederationDemo.tsx in apps/host/src/ — copied from the nx refactor, adapted for turbo remote names (turbo_home, turbo_settings). Two accent-colored boundary cards with toggle pills that mount/unmount each remote live.
  • Dead files removedAppLayout.tsx, Header.tsx, useLocalStorage.ts deleted; no longer referenced.
  • Home remote — rewritten as "Catalog Team" product listing (amber theme, inline styles).
  • Settings remote — rewritten as "Activity Team" feed (violet theme).

Live demo

https://bill-watson-eh3huzb2he-629-turbo-host-zephyr-exam-1f5174193-ze.zephyrcloud.app

Test plan

  • pnpm install && pnpm build in build-systems/turborepo-rspack-mf/ deploys all 3 apps
  • Splash loads with Turborepo + Rspack + Zephyr logos and the correct pnpm dlx degit command
  • "Get your own copy in seconds" appears directly below the hero
  • Module Federation — Live section renders below the quick-start
  • Both toggle pills default to visible; clicking unmounts/remounts the respective remote
  • Amber boundary card shows Catalog Team (turbo_home); violet shows Activity Team (turbo_settings)
  • Pipeline, features, CTA, cards, footer render below the MF section

Related

Note on concurrency

Turbo's default parallel build can race Zephyr's registry update: on a first-time pnpm build, the host may resolve old CI remote URLs. Running the host build a second time picks up the fresh branch remotes. Not a regression — the Nx example had the same behavior before it forced --parallel=1. Worth a follow-up to set up a turbo task dependency between host and remotes.

…live demo

Replace the React-Router boundary-toggle layout with the canonical
ZephyrWelcome splash, and showcase Module Federation with a live
in-page demo rendered between the quick-start and pipeline blocks —
mirroring the pattern in build-systems/nx-rspack-mf.

Changes:

- host: App.tsx now renders ZephyrWelcome with turbo-specific metadata
  (title, logos, pills). No more BrowserRouter, Routes, or the
  showBoundaries toggle button.
- host: new ZephyrWelcome.tsx (fork supporting `mid` prop) and
  FederationDemo.tsx — two accent-colored boundary cards with toggle
  pills for turbo_home and turbo_settings. Mount/unmount each remote
  live.
- host: delete AppLayout.tsx, Header.tsx, useLocalStorage.ts — no
  longer referenced.
- home: rewrite RemoteEntry.tsx as "Catalog Team" product listing
  (amber theme, inline styles so it works standalone and embedded).
- settings: rewrite RemoteEntry.tsx as "Activity Team" feed (violet
  theme).

Verified: turbo build deploys all three apps; host resolves to fresh
branch-specific remote URLs; splash + toggleable federated remotes +
pipeline explainer render correctly.
@billwatson017 billwatson017 marked this pull request as ready for review April 20, 2026 23:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant