React.jsのコンポーネントをプロダクションUXPinアカウントへ送るため、Continuous Integrationサーバー（Circle CI, Travis, GitHub Actions…）との統合接続をおすすめします。

統合を開始するには

• UXPinアカウントにアクセスします。
• UXPinエディタに入ります。
• 左下のライブラリ名をクリックし、New library New libraryをクリックします。
• Import React components（Reactコンポーネントをインポートする）を選択します。
• ライブラリに名前を付け、 Create libraryをクリックします。
• Auth tokenをコピーしてください。 (こちらは誰とも共有せず、Git repoのどのファイルにも保存しないでください。このトークンはアカウントからライブラリに直接アクセスする権限を持ちます。)

• Auth Tokenを受け取った後、CIアプリに移動して、デザインシステムrepoを追跡するプロジェクトを開始し(まだ設定していない場合)、新しい環境変数UXPIN_AUTH_TOKENにUXPinアカウントからコピーしたAuth tokenを設定して追加します。
• CIサーバー設定で新しいステップを追加し、次のコマンドを実行します。（必要に応じてプロパティを調整してください）

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"をクリックします。

3. Start Buildingをクリック *Syncが開始されますが、すぐに失敗します。

4. Project Settings > Environmental Variablesをクリックします。 5.新しい環境変数を追加して名前を入力します。 名前: UXPIN_AUTH_TOKEN

   値: コピーしたUXPin Auth token

6.統合を再実行します。