This is the command line used to preview design system components locally and push it to UXPin Merge. Once pushed, designers can use the components within the UXPin editor.
See the UXPin Docs for full documentation of Merge.
Add uxpin-merge
to your package.json:
npm install @uxpin/merge-cli --save-dev
or
yarn add @uxpin/merge-cli --dev
This tool recognizes components available in your repository of component library, analyze them and uploads results to UXPin app. See our docs for usage examples.
./node_modules/.bin/uxpin-merge --help
will print the list of options:
Usage: uxpin-merge [options] [command]
`uxpin-merge` starts up an experimentation mode for the project in the CWD. See more commands below.
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
--branch <branch> branch to use when uploading. Default: master
--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
--uxpin-domain <domain> Can be used to set a UXPin private cloud domain. Default: `uxpin.com`
--skip-browser Don't open browser on start
--disable-tunneling Turn off tunneling via ngrok
-h, --help output usage information
Commands:
init [options] Creates default config files (uxpin.config.js, uxpin.webpack.config.js, UXPinWrapper)
generate-presets [options] Generate presets for components
push [options] Upload design system repository information to UXPin
dump [options] Shows all information (in JSON) about the design system repository and NOT send to UXPin
server [options] Start local web server and display the list of design system components
summary [options] Show only design system summary without building it
Set the environment variable DEBUG=uxpin*
to get a verbose output. It can help when troubleshooting or investigating performance issues.
It uses the NPM package debug.
Example:
DEBUG=uxpin* npx uxpin-merge push --token ***