Storybook 컴포넌트 패키지 배포 (with Chromatic)

Chromatic을 이용한 배포가 가장 쉽고 간편하다. 심지어 CI (지속적 통합), 즉 자동 배포를 지원한다. 

그리고 채팅 응답률이 높고 신경을 많이 써주는 느낌을 받았다. (답장 안하니까 해결했는지 계속 물어보더라....)

 

 

Visual testing & review for web user interfaces

 

 

설치

npm install --save-dev chromatic

 

 

크로마틱 로그인

• 깃허브 계정 사용
• 이미 생성한 레포지토리가 있다면 선택만 하면 됨

 

아래의 명령어를 vscode 터미널에 입력하면 끝이다. 

 

정말정말 쉽지만 만약 다음과 같은 authenticate 에러가 발생한다면 보안 인증서 등 제한사항이 있지 않은지 확인해봐야 한다. 

 

// 인증서 무시하고 설치하겠다는 명령어
npm config set strict-ssl false -g

나는 혹시 모르니 그냥 집에서 개인 PC로 했다.

 

 

배포 완료

미리보기에서는 폰트가 적용되지 않은 것처럼 보이지만 실제로 배포된 사이트로 들어가면 잘 적용된 것을 확인할 수 있다.

 

여기서 View Storybook을 들어가면 배포된 스토리북 페이지를 볼 수 있다.

 

 

굿~~~