Private NPM registry

Install Saas UI Pro components from a private NPM registry.

In the next steps we'll show you how to install @saas-ui-pro/react in new or existing projects. You'll need a valid license to install Pro, you can order one here.

Before continuing follow these steps to set up @saas-ui/react and @chakra-ui/react in your project, if you haven't done so already.

Configuration#

All pro packages can be installed from our private NPM registry at https://npm.saas-ui.dev. After redeeming your license, an account will be automatically created.

Your NPM account is a combination of the Github username (in lower case) you used to redeem your license and the license code (username:license-key).

NPM Auth token

Configuration is slightly different for each package manager, so it's important to follow the steps for the package manager you are using in your project.

NPM#

In your project root folder you can run this and enter your Github username as user and license key as password.

npm login --registry=https://npm.saas-ui.dev/ --scope=@saas-ui-pro

Now run npm i @saas-ui-pro/react to install the Pro components.

Manual & CI configuration.#

The following steps are required to deploy your project or run it on CI.

NPM expects auth to be base64 encoded, so make sure SAAS_UI_TOKEN is encoded.

echo -n 'GithubUsername:licenseKey' | base64

Add your auth token to shell profile ~/.bash_profile and add it to environment variables of your deployment or CI.

export SAAS_UI_TOKEN="base64 encoded token"

If you configure this on your local machine, make sure the restart your terminal or run source ~/.bash_profile, to make sure the token is loaded.

If you're having troubles generating a working base64 encoded string, try this website.

Then edit .npmrc in the root of your project and add the following lines.

@saas-ui-pro:registry=https://npm.saas-ui.dev
//npm.saas-ui.dev/:_auth="${SAAS_UI_TOKEN}"
//npm.saas-ui.dev/:always-auth=true

Now run npm i @saas-ui-pro/react to check if the configuration was succesful.

Was this helpful?