Connecting code to UXPin (CI & push)

The recommended way to send your React.js components to your production UXPin account is via integration with a Continuous Integration server (Circle CI, Travis, GitHub Actions...)

To start the integration:

• Go to your UXPin account
• Enter the UXPin Editor
• Click on the library name in the bottom left corner, then click New library
• Select the option import React components 
• Name the library and click Create library
• Copy the Auth token (don't share it with anyone and do not place it in any files checked into the git repository. This token provides direct access to the library on your account.)

• Once you obtained the Auth Token, go to your CI app, start a project tracking your design system repository (if you haven't yet) and add a new environment variable UXPIN_AUTH_TOKEN with the value set to your Auth token copied from your UXPin account
• In the config of your CI server, add a new step and run the following command (adjust attributes where necessary): 

CircleCI setup

1. Create a CircleCI config file: './.circleci/config.yml'
2. Copy the following YAML contents into the '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. Open circle CI and add a new project
2. Search for the GitHub repo and click Set Up Project
   * If project already has config.yml file click on “Use Existing Config"
3. Click Start Building
   * Sync will start and fail
4. Click on Project Settings > Environmental Variables
5. Add a new Environmental Variable
   Name: UXPIN_AUTH_TOKEN
   Value: Copied UXPin Auth token
6. Rerun the integration

GitHub Actions setup

1. Create a GitHub Actions config file: './.github/workflows/config.yml'
2. Copy the following YAML contents into the 'sync-merge.yml'

name: Deploy-uxpin

on: push

jobs:
  deploy-uxpin:
    name: UXpin update
    runs-on: ubuntu-latest
    if: "github.ref == 'refs/heads/master' && !contains(github.event.head_commit.message, 'skip ci')"
    steps:
      - uses: actions/checkout@master
        with:
          ref: refs/heads/master
          fetch-depth: 0
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - name: Install
        run: yarn
      - name: Push To UXpin
        run: yarn push
        env:
          UXPIN_AUTH_TOKEN: ${{ secrets.UXPIN_AUTH_TOKEN }}

1. Make sure 'package.json' file has ' "Push" : "Uxpin-merge push" ' in the script section
2. In GitHub open the repository, then click on the settings tab and then click secrets
3. Add a new repository secret
   Name: UXPIN_AUTH_TOKEN
   Value: Copied UXPin Auth token
4. Push a new change to master, this should initiate the GitHub actions sync