{"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":"CLI Tool"},"isVisibleForRobots":"true","body":[{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

The UXPin Merge CLI tool analyzes your repository, prepares code for sending to UXPin, allows you to test your components in the Merge Dev Environment (experimental mode) and sends components to your UXPin account. 

To install Merge CLI Tool:

"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"npm i --save-dev @uxpin/merge-cli"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"yarn add @uxpin/merge-cli"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

The tool can execute the following options and commands.

Options:

`-v, --version` – Output the version number.

`--webpack-config <path>`– Path to a custom webpack config, relative to the current working directory.

`--wrapper <path>`– Path to a custom component wrapper, relative to the current working directory.

`--cwd <path>` – Working directory: path to root of the DS repository. Default: ./

`--config <path>`– Path to a config file. Default: `./uxpin.config.js`

`--port <number>` – Port number on which the local server will listen. Default: 8877

`--skip-browser` – Don't open browser on start

`--disable-tunneling`– Disable tunneling requests through ngrok

`-h, --help`– Output usage information

Commands:

`server [options]`– Start the local web server and display the list of design system components.

`push [options]`– Upload design system repository information to UXPin.

`dump [options]`– Show all information (in JSON) about the design system repository and DON'T send to UXPin.

`summary [options]`– Show only design system summary without building it.

Requests tunneling

The below error is caused by problems with connecting to the tunneling service when trying to run an experimental mode. If you come across it, try running EM with `--disable-tunneling` flag.

"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"ERROR: panic: runtime error: invalid memory address or nil pointer dereference\n\ngithub.com/inconshreveable/olive@v0.0.0-20190306191047-c0e8c527e2ad/recover.go:40\n\nreflect/value.go:447\n\nreflect/value.go:308\n\n..."}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

When you run the experimental mode on your own machine, the CLI tool starts a local web server which receives some requests from the UXPin Editor during the prototyping session. In order to make it work on all browsers and to omit installation of self-signed certificates for localhost on your machine, we need to pass those requests through a secure connection using ngrok.

If your network administrator blocks such connection, the UXPin Editor might not be working correctly. In that case, you should the run experimental mode with `--disable-tunneling` flag. Thanks to that, when you open the experimental mode, requests will go directly to your localhost web server.

"}}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Power tip","tip_title":null,"tip":{"html":"

UXPin Editor with `--disable-tunneling` option works only in Chrome

"}}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"cli-tool","meta_description":"UXPin's merge Docs, cli tool for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"CLI Tool | Merge","page_title":"CLI Tool | Merge"}}