Updates and Continuous Integration (CI)
Once you have created your CLI settings you can keep Interplay (and Figma) up to date with changes in your repo by saving your settings files and running the CLI again, either locally against a local copy of your repo or as part of your CI process.
Running the CLI locally
To setup the CLI to import your components for the first time, please see Importing from your Repo
Once you have saved a settings file for the CLI, you can run it repeatedly to import the latest code and component configuration. You can run the build, parse and deploy in one command:
interplay
Each time you deploy a new set of component config to Interplay, the changes since the last import are calculated and a commit is created in your design system history.
Continuous Integration (CI)
By checking your interplay settings file into your code repo, you can call the Interplay CLI as part of your CI process. This is essentially the same as running the CLI locally, only the CLI is running against your repo on your build server.
For example, here is a Github Actions workflow file to automatically install and run the CLI to update components in Interplay each time there is a commit to the 'main' branch of the repo.
It makes use of the INTERPLAY_TOKEN auth key which is available in your design system settings in Interplay.
name: Interplay CLI
on:
push:
branches:
- main
jobs:
interplaycli:
runs-on: ubuntu-latest
steps:
- name: "Checkout"
uses: actions/checkout@v2
- name: "Setup Node.js"
uses: actions/setup-node@v1
with:
node-version: 16
- name: "Install deps"
run: yarn
- name: "Install CLI"
run: npm install -g @interplay/cli @interplay/cli-plugin-react
- name: "Run CLI"
run: interplay
env:
INTERPLAY_TOKEN: ${{ secrets.INTERPLAY_TOKEN }}
Deploying to multiple design systems in Interplay
Sometimes it is useful to deploy to different design system projects in Interplay, especially as part of CI. There are two ways to do this - either by setting up configuration for multiple targets or by overriding the projectId at runtime.
Configuring multiple targets
You can configure the CLI with multiple deployment targets using the targets.json file, running the CLI with the --targets option on the command line. Without this option the CLI uses the default target.
To add a new target, initialise the CLI again with a new target:
interplay init --target mytarget
This will popup the browser to initialise the new target and populate the team and project for mytargetin your targets.json file. Your existing interplay.config.js is preserved.
You can then run the other CLI commands as normal, and append --target mytarget to use your new target.
Passing teamId and projectId at runtime
As an alternative to using the targets option, you can pass in the workspace (teamId) and project (projectId) to deploy to using environment variables. You can find the relevant IDs to use in the URL of your project
<a href="https://app">https://app</a>.interplay.io/app/<teamId>/p/<projectId>/components
You can then pass these values at the command line or in your CI environment e.g.
INTERPLAY_TEAMID=ck9xzbldg000002s64r INTERPLAY_PROJECTID=sRD2olJSME interplay
You should see a message in the CLI output to say that these values are being used to override any values found in your targets.json file.