Add shop microfrontend demo (bedroom-furniture theme)#1
Open
Add shop microfrontend demo (bedroom-furniture theme)#1
Conversation
Adds an 8-app Next.js 16 microfrontend storefront alongside the existing host/remote lab demo. Demonstrates vertical MFEs (one app per route) and horizontal remotes (header/footer composed via remote-components) under a single edge proxy. - shell (default), header + footer (horizontal), home, beds, mattresses, pdp, checkout, sale (vertical) - Shared @shop/ui, @shop/api-client, @shop/tsconfig packages - Product imagery rendered as CSS gradients (no external image hosts) - Root scripts split into dev:lab / dev:shop; lab demo unchanged Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
- Add 13 product/hero JPGs to shop-shell's public/products/. Other zones
reference them as /products/*.jpg — the microfrontends edge routes
unrouted paths to shop-shell (the default app), so a single copy of
the assets serves every zone.
- Switch product cards from next/image to plain <img> so the request
goes through the proxy instead of each zone's own image optimizer.
- Route remote-component fetches through the proxy: apps/beds/app/layout
now uses relative `/components/header` (was `${HEADER_URL}/...`).
- Refactor CartSummary's server-side /api/cart fetch to derive the
absolute URL from the current request via headers(), so the request
rides the proxy regardless of which zone rendered it. Drops the
NEXT_PUBLIC_SHELL_URL dependency on the server path.
- Mark the six host layouts as `force-dynamic` so the cloud build skips
prerendering pages that would otherwise try to fetch unreachable
remote components at build time.
- Track .vercel-link .gitignore files added by `vercel link`.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
On wide monitors the PDP main-image area was stretching to ~2000px because the [1fr 400px] grid had no max-width on its container. Cap the page width at 1280px on PDP, BedsPage, MattressesPage, SalePage, and CheckoutPage so the image grid and PDP gallery render at a sensible size. HomePage hero stays full-bleed. Also add `block` to the <Link> wrappers in ProductGrid and SalePage cards — the Link's anchor element renders inline by default, which let the cards' aspect-square boxes blow out of their grid cells. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Checkout: clicking Checkout now switches to a generated "Order placed" success view with a fake order number. Button is disabled while the cart is empty. - PDP: drop the placeholder "Choose Your Size" button and the Finish swatch picker — both were inherited from the jewelry demo and made no sense for furniture, neither was wired to anything. Removes the unused FINISH_OPTIONS constant and selectedFinish state. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
0.3.7 didn't rewrite TURBOPACK_CHUNK_LISTS to a per-scope global, so remote chunks pushed into the host's registry and Next 16's dev-backend-dom registerChunk crashed with "chunkListsToRegister.forEach is not a function". Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
localStorage-backed store in api-client/cart.ts with subscribe events. Header CartBadge shows live count, PDP Add to Bag actually adds, MiniCart and CheckoutPage read/write the shared store, cart clears on order placed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Move the eight shop microfrontend apps under apps/shop/ and the two React-host lab apps (Vite host + Next remote) under apps/react-host/. Update pnpm-workspace.yaml to apps/*/*, fix codeLinks paths in the host examples, and refresh the README workspace tree. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The skeleton used a half-width 50/50 grid with no max-width, while the loaded page is capped at 1280px and uses a 1fr/400px split with a 72px thumbnail rail. On wide viewports the image collapsed by ~230px and shifted horizontally when the product loaded. Mirror the loaded shape (container, grid, thumbnails, info rows) so the layout stays put. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Move api-client, ui, and tsconfig from the root packages/ into apps/shop/packages/ — they're consumed only by shop apps, so keeping them next to those apps gives better locality (rm -rf apps/shop drops the whole demo). Update pnpm-workspace.yaml globs and the README tree. Also delete the design-reference/ folder of mockup PNGs (~5.5MB) that's no longer needed now that the demo is built. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The Vercel Blob upload helper was a one-off used to populate the product image manifest; not needed in the repo anymore. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The shop apps used plain <img> tags so the browser fetched images straight through the microfrontends proxy from shell's public/. Switching to next/image breaks that — each app's _next/image optimizer fetches the source from its own origin to optimize, but the files only existed in shell. Convert the seven uses (home heroes, sale/beds/pdp/checkout cards, PDP main + thumbnail rail, MiniCart and CheckoutPage line items) to next/image with appropriate fill/sizes/priority props, and copy the needed product images into each consuming app's public/ so the optimizer can resolve them. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
remote-components/dist/config/nextjs.js gates its Turbopack code path on process.env.TURBOPACK. next dev --turbo propagates that env var, but next build (which uses Turbopack as the bundler in Next 16) never sets it. Without it, the config falls through to the webpack branch, the #remote-components/remote/defaults/app alias is never registered, the dynamic import in app-client.js fails inside its try/catch, and no TURBOPACK_REMOTE_SHARED marker ends up in the remote bundle. The host then can't dedupe shared modules, so the remote ships its own copy of React and useContext crashes the page. Set TURBOPACK=1 in each shop app's build script so the marker is emitted. Also bump to 0.4.3 (latest) — only chunk hashes changed, but worth staying current. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The shell-prefix form `TURBOPACK=1 next build` in package.json scripts doesn't reliably propagate through Vercel's build runner, so the env var is now also set as a Vercel project env var. Declare it in turbo.json's build.env so cache keys reflect it and globalPassThroughEnv so it reaches the task process. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
host/remotelab demo (lab demo unchanged).shell,home,beds,pdp,checkout,sale) and horizontal remotes (header,footer) composed viaremote-componentsunder a single edge proxy on port3025.Layout
Plus shared packages:
@shop/ui,@shop/api-client,@shop/tsconfig.Root scripts
pnpm dev→dev:shop(the new 8-app demo, proxy at:3025)pnpm dev:lab→ existing host + remote demo (proxy at:3024, unchanged)pnpm typecheck:lab/pnpm typecheck:shopTest plan
pnpm installsucceedspnpm dev:shopboots all 8 apps + proxy/,/beds,/beds/:subcategory,/mattresses,/mattresses/:subcategory,/sale,/sale/:category,/product/:id,/checkoutall return 200/api/productsand/api/cartreturn JSONpnpm dev:labstill boots the original host/remote unchangedpnpm typecheck:labandpnpm typecheck:shoppass🤖 Generated with Claude Code