{"data":{"prismicDocsCategory":{"data":{"pages":[{"page":{"uid":"what-is-uxpin-merge","document":[{"data":{"title":{"text":"What is UXPin Merge?"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"using-react.js-components","document":[{"data":{"title":{"text":"Using React.js Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"creating-a-library","document":[{"data":{"title":{"text":"Creating a Library"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ai-assisted-merge-integration","document":[{"data":{"title":{"text":"AI-Assisted Merge Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"start-with-a-boilerplate-repo","document":[{"data":{"title":{"text":"Start with a Boilerplate Repo"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"integrating-your-own-components","document":[{"data":{"title":{"text":"Integrating Your Own Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"config-file","document":[{"data":{"title":{"text":"Config File"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"webpack-configuration","document":[{"data":{"title":{"text":"Webpack Configuration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"wrapper-component","document":[{"data":{"title":{"text":"Wrapper Component"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"adjusting-components","document":[{"data":{"title":{"text":"Adjusting Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"configuring-the-properties-panel","document":[{"data":{"title":{"text":"Configuring the Properties Panel"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"authoring-and-managing-jsx-presets","document":[{"data":{"title":{"text":"Authoring and Managing JSX Presets"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"cli-tool","document":[{"data":{"title":{"text":"CLI Tool"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ci-servers","document":[{"data":{"title":{"text":"Connecting code to UXPin (CI & push)"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"version-control","document":[{"data":{"title":{"text":"Version Control"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"patterns","document":[{"data":{"title":{"text":"Patterns"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"tailwind-css-integration","document":[{"data":{"title":{"text":"Tailwind CSS Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-design-system-documentation","document":[{"data":{"title":{"text":"Merge Design System Documentation"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-component-manager","document":[{"data":{"title":{"text":"Merge Component Manager"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"storybook-integration","document":[{"data":{"title":{"text":"Storybook integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-faq","document":[{"data":{"title":{"text":"Frequently Asked Questions"},"visible_in_table_of_content":"true"}}]}}]}},"prismicDocsPage":{"data":{"title":{"text":"Connecting code to UXPin (CI & push)"},"isVisibleForRobots":"true","body":[{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>The recommended way to send your React.js components to your production <a target=\"_blank\" rel=\"noopener\" href=\"https://uxpin.com/\">UXPin</a> account is via integration with a Continuous Integration server (<a  href=\"https://circleci.com/\">Circle CI</a>, <a  href=\"https://travis-ci.org/\">Travis</a>, <a  href=\"https://github.com/features/actions\">GitHub Actions</a>...)</p><h3>To start the integration:</h3><ul><li>Go to your UXPin account</li><li>Enter the UXPin Editor</li><li>Click on the library name in the bottom left corner, then click New library</li><li>Select the option import React components </li><li>Name the library and click Create library</li><li>Copy the Auth token (don&#39;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.)</li></ul>"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/bbf00279-79fe-495c-8ad4-993ed73668d9_Connecting+code+to+UXPin+CI+push.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<ul><li>Once you obtained the Auth Token, go to your CI app, start a project tracking your design system repository (if you haven&#39;t yet) and add a new environment variable `UXPIN_AUTH_TOKEN` with the value set to your Auth token copied from your UXPin account</li><li>In the config of your CI server, add a new step and run the following command (adjust attributes where necessary): </li></ul>"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>CircleCI setup</p><ol><li>Create a CircleCI config file: &#39;./.circleci/config.yml&#39;</li><li>Copy the following YAML contents into the &#39;config.yml&#39;</li></ol>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"#config.yml\n\njobs:\n  build:\n    docker:\n      - image: circleci/node:10.15-stretch-browsers\n    working_directory: ~/project/\n    steps:\n      - checkout\n      - run:\n          name: \"Install dependencies\"\n          command: npm install\n      - run:\n          name: 'Push to UXPin'\n          command: ./node_modules/.bin/uxpin-merge push --webpack-config ./webpack.config.js --wrapper ./src/Wrapper/UXPinWrapper.js\n"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<ol><li>Open circle CI and add a new project</li><li>Search for the GitHub repo and click Set Up Project<br />* If project already has config.yml file click on “Use Existing Config&quot;</li><li>Click Start Building<br />* Sync will start and fail</li><li>Click on Project Settings &gt; Environmental Variables</li><li>Add a new Environmental Variable<br />Name: UXPIN_AUTH_TOKEN<br />Value: Copied UXPin Auth token</li><li>Rerun the integration</li></ol><p>GitHub Actions setup</p><ol><li>Create a GitHub Actions config file: &#39;./.github/workflows/config.yml&#39;</li><li>Copy the following YAML contents into the &#39;sync-merge.yml&#39;</li></ol>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"name: Deploy-uxpin\n\non: push\n\njobs:\n  deploy-uxpin:\n    name: UXpin update\n    runs-on: ubuntu-latest\n    if: \"github.ref == 'refs/heads/master' && !contains(github.event.head_commit.message, 'skip ci')\"\n    steps:\n      - uses: actions/checkout@master\n        with:\n          ref: refs/heads/master\n          fetch-depth: 0\n      - name: Use Node.js\n        uses: actions/setup-node@v1\n        with:\n          node-version: '12.x'\n      - name: Install\n        run: yarn\n      - name: Push To UXpin\n        run: yarn push\n        env:\n          UXPIN_AUTH_TOKEN: ${{ secrets.UXPIN_AUTH_TOKEN }}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<ol><li>Make sure &#39;package.json&#39; file has &#39;&quot;push&quot;: &quot;uxpin-merge push&quot;&#39; in the script section</li><li>In GitHub open the repository, then click on the settings tab and then click secrets</li><li>Add a new repository secret<br />Name: UXPIN_AUTH_TOKEN<br />Value: Copied UXPin Auth token</li><li>Push a new change to master, this should initiate the GitHub actions sync</li></ol>"}}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"ci-servers","meta_description":"UXPin's merge Docs, connecting code to uxpin (ci & push) for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"Connecting code to UXPin (CI & push) | Merge","page_title":"Connecting code to UXPin (CI & push) | Merge"}}