원문: https://github.com/facebook/astryx/wiki/Testing-Example-Apps · 번역 기준: 2026-09-03

example app(apps/example-vite, apps/example-nextjs)은 Astryx 모노레포 안에 살지만, npm에서 @astryxdesign/core를 설치한 외부 소비자가 경험하는 것을 대표하도록 의도되었습니다. 모노레포 workspace의 동작 방식 때문에, example app은 실제 소비자가 겪는 문제를 조용히 우회할 수 있습니다 — workspace symlink는 node_modules 바깥에서 해석되고, Vite는 workspace 패키지에 대해 pre-bundling을 건너뛰며, 공유된 node_modules hoisting이 누락된 의존성을 가릴 수 있습니다.

example app에 대한 모든 변경은 모노레포 안에서만이 아니라 외부 소비자로서 테스트해야 합니다.

pnpm이 필요합니다. 설치하거나(npm i -g pnpm) 모든 pnpm 명령 앞에 npx를 붙이세요.

외부 소비자로서 테스트하는 방법

1. 레포 루트에서 빌드하고 pack하기

pnpm install
pnpm build

pnpm -F @astryxdesign/core          pack --out "/tmp/%s.tgz"
pnpm -F @astryxdesign/theme-neutral pack --out "/tmp/%s.tgz"
pnpm -F @astryxdesign/build         pack --out "/tmp/%s.tgz"

2. 독립적인 테스트 디렉토리 만들기

mkdir ~/astryx-test-app
cd ~/astryx-test-app

3. example app 파일 복사하기

node_modules(용량이 크고 symlink 순환을 포함)를 건너뛰기 위해 rsync를 사용하세요:

# Vite:
rsync -a --exclude node_modules --exclude dist /path/to/astryx/apps/example-vite/ .
# Next.js:
rsync -a --exclude node_modules --exclude .next /path/to/astryx/apps/example-nextjs/ .

4. tarball을 사용하도록 package.json 수정하기

{
  "dependencies": {
    "@astryxdesign/core": "file:/tmp/astryxdesign-core.tgz",
    "@astryxdesign/theme-neutral": "file:/tmp/astryxdesign-theme-neutral.tgz"
  }
}

Vite 예제의 경우 build도 필요합니다:

{
  "devDependencies": {
    "@astryxdesign/build": "file:/tmp/astryxdesign-build.tgz"
  }
}

5. 설치하고 실행하기

npm install
# Vite:
npx vite build && npx vite preview
# Next.js:
npx next build && npx next start

6. 검증할 것