$ show nrwl/nx-examples
This repository is an official Nx example showcasing a micro-frontend architecture with two frontends: an Angular application for product browsing and a React application for a shopping cart, backed by a .NET minimal API. The code demonstrates cross-framework component reuse via custom elements (Web Components), multi-framework state management (NgRx for Angular, useReducer/Context for React), and Nx's monorepo capabilities including code generation, dependency graph, and CI/CD integration. Data is entirely static, with the .NET API used only for OpenAPI codegen; there is no runtime API consumption. The architecture is clean and modular, emphasizing Nx best practices for large monorepos.
The LLM identified 4 files worth highlighting for reuse:
Exports a `JSXify<T>` type that maps an HTMLElement interface to acceptable JSX props for React, stripping children and converting attributes to React-compatible types. This enables type-safe usage of custom elements in JSX without additional overhead.
A Web Component (custom element) that renders a shared header with a title and GitHub link. It uses observedAttributes for reactivity and is used across both the Angular and React apps. The pattern demonstrates how to build cross-framework UI components with vanilla DOM APIs.
Re-exports the cart state logic (actions, reducer, selectors) from the NgRx-centric Angular module as plain exports for React. This allows the same state management code to be shared across frameworks while each framework uses its own runtime (NgRx vs useReducer).
Configures a `codegen` script that uses @hey-api/openapi-ts to generate TypeScript types from the .NET API's OpenAPI document. Integrated with Nx task dependencies, it automatically regenerates types after the API builds. This pattern demonstrates a clean contract-first approach with minimal manual synchronization.