Note: The planet UI design system is an extension of the bootstrap framework. Please also referer to the bootstrap documentation for best pratices while using the framework.

Connecting to the planet payment private NPM feed

Installation process

Connect your applications npm to the following devops feed to allow you to check out private npm packages https://pkgs.dev.azure.com/planetdevops/_packaging/planetpayment-npm-feed%40Release/npm/registry/

1) Point your app at the planetpayment npm feed (only for packages in the @planetpayment scope)

Place the following config properties in a file named .npmrc in the same directory as your applications package.json file.

@weareplanet:registry=https://pkgs.dev.azure.com/planetdevops/_packaging/planetpayment-npm-feed%40Release/npm/registry/   
@weareplanet:always-auth=true

2) Configure your credentials for the private feed

Create an access token for your user account in devops and Base64 encode it. (note the base64 encoding is important and the credentials wil not work without doing this)

Place this access token in a user level .npmrc file in your user directory C:\users\\{{myusername}}\.npmrc as follows

; begin auth token
//pkgs.dev.azure.com/planetdevops/_packaging/planetpayment-npm-feed/npm/registry/:username=planetdevops
//pkgs.dev.azure.com/planetdevops/_packaging/planetpayment-npm-feed/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/planetdevops/_packaging/planetpayment-npm-feed/npm/registry/:email=npm requires email to be set but doesn't use the value
//pkgs.dev.azure.com/planetdevops/_packaging/planetpayment-npm-feed/npm/:username=planetdevops
//pkgs.dev.azure.com/planetdevops/_packaging/planetpayment-npm-feed/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/planetdevops/_packaging/planetpayment-npm-feed/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

Alternatively they can be defined as environment variables named npm_config_username, npm_config__password and npm_config_email which is useful for things like docker builds where you may need to hand off the environment vars to a container at runtime. **NOTE: The usage of env vars worked well in the node V14LTS release but as of the node 16LTS release being published the unscoped credentials no longer work when defined as environment variables. It is advised to use a user level .npmrc file with the credentials in the format described above.

3) Install the package

Install the design system package using the node package manager npm install @weareplanet/ui-design-system