React.js의 컴포넌트를 프로덕션 UXPin 계정으로 보내려면 Continuous Integration 서버 (Circle CI, Travis, GitHub Actions…)와의 통합 연결을 권장합니다.

통합을 시작하려면

• UXPin 계정에 액세스합니다.
• UXPin 에디터로 들어갑니다.
• 왼쪽 하단의 라이브러리 이름을 클릭하고 New library를 클릭합니다.
• Import React components를 선택합니다.
• 라이브러리의 이름을 지정하고 Create library를 클릭합니다.
• Auth token을 복사하세요. (누구와도 절대 공유하지 마시고, Git repo의 어떤 파일에도 저장하지 마십시오. 이 토큰은 계정에서 라이브러리에 직접 액세스하는 권한을 갖습니다.)

• Auth Token을 받은 후 CI 앱으로 이동하여, 디자인시스템 repo를 추적하는 프로젝트를 시작하고(아직 설정 안한 경우) 새 환경 변수 UXPIN_AUTH_TOKEN에 UXPin 계정에서 복사한 Auth token을 설정하고 추가합니다.
• CI 서버 config에서 새 단계를 추가하고 다음 명령을 실행합니다 (필요한 경우 속성을 조정하십시오).

CircleCI 설정

1. CircleCI config 파일을 만듭니다. ./.circleci/config.yml
2. 다음 YAML 콘텐츠를 config.yml에 복사합니다.

#config.yml

jobs:
  build:
    docker:
      - image: circleci/node:10.15-stretch-browsers
    working_directory: ~/project/
    steps:
      - checkout
      - run:
          name: "Install dependencies"
          command: npm install
      - run:
          name: 'Push to UXPin'
          command: ./node_modules/.bin/uxpin-merge push --webpack-config ./webpack.config.js --wrapper ./src/Wrapper/UXPinWrapper.js

1. Circle CI를 열고 새 프로젝트 추가
2. GitHub repo를 검색하고 Set Up Project를 클릭합니다. 프로젝트에 이미 config.yml 파일이 있는 경우 "Use Existing Config"를 클릭합니다.