Prepare repo import

This article outlines the steps required to prepare to import design tokens or code components from your repo.

1. Prepare a local copy of your code repo

a) Clone your code repo

We'll run the CLI against a local copy of our code repo. If you don't already have a local copy or your code, clone the repo using your usual source control.

For example, using git:

git clone https://github.com/auth0/cosmos.git

b) Install your package dependencies

The CLI will bundle your code for deployment, so we need to install your package dependencies. Usually this is done using npm or yarn, but use whatever your normal approach is to install the npm dependencies for your repo.

For example, using yarn:

yarn

2. Install the Interplay CLI

The Interplay CLI can help you import design tokens and code components from your repo.

It is usually easiest to install the Interplay CLI and its React plugin globally using npm:

npm install -g @interplay/cli @interplay/cli-plugin-react

3. Initialize the Interplay CLI

a) Check your Interplay account

In your browser, navigate to https://app.interplay.io/ and check you can login to your workspace before running the import.

b) Initialize your CLI Settings files

The first step in using the CLI is to initialise your settings files. The settings file will contain the information the CLI needs to repeatedly import, so you can run it again locally or as part of your CI process as your repo changes over time

💡

Run CLI commands at the base of your repo. Paths should be entered relative to the base of the repo. (If you use VS Code you can usually just right click on a file and ‘copy relative path’).

In the root folder of your repo:

interplay init

Running this command will popup a browser for you to specify the project to import to:

Set the project name you would like to use and click Continue.

Two settings files will be created in a new .interplay folder in your repo. These files control the CLI import.

targets.json - controls the target workspace and design system in Interplay where the CLI will deploy any build files and config created.

interplay.config.js - controls all the other settings for the CLI.

The settings required in these files will depend on whether you are importing tokens or components - or both. You can import either design tokens or code components first and then add the settings to import the other.

To import design tokens from JSON files, see Importing Design Tokens from your repo

To import code components, see Importing Code Components from your repo