React Monorepo Tutorial - Part 2: Project Graph

Run the command: npx nx graph. A browser should open up with the following contents:

Initial Project Graph

This is still different than the design from the start of Part 1:

Our Workspace Requirements

The Project Graph is derived from the source code of your workspace. Make the following adjustments to your existing projects, so that our Project Graph will match the design:

`common-ui`

Run the @nx/react:component generator with the command:

~/myorg❯

npx nx g @nx/react:component banner --project=common-ui --export

1
2>  NX  Generating @nx/react:component
3
4CREATE libs/common-ui/src/lib/banner/banner.module.css
5CREATE libs/common-ui/src/lib/banner/banner.spec.tsx
6CREATE libs/common-ui/src/lib/banner/banner.tsx
7UPDATE libs/common-ui/src/index.ts
8

Nx 15 and lower use @nrwl/ instead of @nx/

Then create a simple Banner component in the generated file:

libs/common-ui/src/lib/banner/banner.tsx
export interface BannerProps {
  text: string;
}

export function Banner(props: BannerProps) {
  return <header>{props.text}</header>;
}

export default Banner;

`admin`

Add the Banner component to the admin app:

apps/admin/src/app/app.tsx
import { Banner } from '@myorg/common-ui';

export function App() {
  return (
    <>
      <Banner text="Welcome to our admin app." />
      <div />
    </>
  );
}

export default App;

`products`

Export a Product TS interface and some example products:

libs/products/src/lib/products.ts
export interface Product {
  id: string;
  name: string;
  price: number;
}

export const exampleProducts: Product[] = [
  {
    id: '1',
    name: 'Product 1',
    price: 100,
  },
  {
    id: '2',
    name: 'Product 2',
    price: 200,
  },
];

`store`

Use both the Banner component from your common-ui lib, and the exampleProducts from your products lib:

apps/store/src/app/app.tsx
import { Banner } from '@myorg/common-ui';
import { exampleProducts } from '@myorg/products';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function App() {
  return (
    <>
      <Banner text="Welcome to the store!" />
      <ul>
        {exampleProducts.map((product) => (
          <li key={product.id}>
            <strong>{product.name}</strong> Price: {product.price}
          </li>
        ))}
      </ul>
    </>
  );
}

export default App;

Now run npx nx graph again:

Matching Graph

Our Workspace Requirements

Your graph now matches the original design.

The Project Graph is more than just a visualization - Nx provides tooling to optimize your task-running and even automate your CI based on this graph. This will be covered in more detail in: 4: Workspace Optimization.

What's Next

Continue to 3: Task Running