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.

Next: Dynamically passing tokens to code components