Creating a new React Monorepo

다음 명령어를 사용해 새로운 모노레포 프로젝트를 생성합니다 :

npx create-nx-workspace@latest react-monorepo --preset=react-monorepo

명령어 입력후 설정 관련하여 선택하는 질문 내용들이 출력됩니다.:

NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Application name · react-store
✔ Which bundler would you like to use? · vite
✔ Test runner to use for end to end (E2E) tests · cypress
✔ Default stylesheet format · css
✔ Do you want Nx Cloud to make your CI fast? · Yes

모노레포속 프로젝트 이름은 react-store라 정의하였습니다.
Vite를 번들러로 Cypress를 E2E테스트, CSS 스타일 사용 하는것으로 설정하였습니다.

└─ react-monorepo
   ├─ ...
   ├─ apps
   │  ├─ react-store
   │  │  ├─ public
   │  │  │  └─ ...
   │  │  ├─ src
   │  │  │  ├─ app
   │  │  │  │  ├─ app.module.css
   │  │  │  │  ├─ app.spec.tsx
   │  │  │  │  ├─ app.tsx
   │  │  │  │  └─ nx-welcome.tsx
   │  │  │  ├─ assets
   │  │  │  ├─ main.tsx
   │  │  │  └─ styles.css
   │  │  ├─ index.html
   │  │  ├─ project.json
   │  │  ├─ tsconfig.app.json
   │  │  ├─ tsconfig.json
   │  │  ├─ tsconfig.spec.json
   │  │  └─ vite.config.ts
   │  └─ react-store-e2e
   │     └─ ...
   ├─ nx.json
   ├─ tsconfig.base.json
   └─ package.json

로컬 라이브러리 생성

모노레포 내에서 로컬 라이브러리를 생성하려면 Nx CLI를 사용할 수 있습니다. 예를 들어, 공유 UI 라이브러리를 생성하려면 다음 명령어를 실행합니다:

nx generate @nx/react:library shared-ui --directory=libs/shared/ui

이 명령어는 다음과 같은 구조의 라이브러리를 생성합니다:

└─ libs
   └─ shared
      └─ ui
         ├─ src
         │  ├─ lib
         │  │  └─ shared-ui.tsx
         │  └─ index.ts
         ├─ project.json
         ├─ README.md
         ├─ tsconfig.json
         └─ tsconfig.lib.json

이 라이브러리는 모노레포 내의 React 애플리케이션에서 import하여 사용할 수 있습니다.