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'

      - image: circleci/node:10.15-stretch-browsers
    working_directory: ~/project/
      - 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
    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

    name: UXpin update
    runs-on: ubuntu-latest
    if: "github.ref == 'refs/heads/master' && !contains(github.event.head_commit.message, 'skip ci')"
      - uses: actions/checkout@master
          ref: refs/heads/master
          fetch-depth: 0
      - name: Use Node.js
        uses: actions/setup-node@v1
          node-version: '12.x'
      - name: Install
        run: yarn
      - name: Push To UXpin
        run: yarn push
          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
    Value: Copied UXPin Auth token
  4. Push a new change to master, this should initiate the GitHub actions sync