Preparing to import

This article outlines the steps required to prepare to import design tokens or code components from your repo. First you create a local copy of your repo if you don't already have one, then install the CLI and initialise its settings file. 

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.

In this article

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) Initialise your CLI Settings file

👉 Please run the CLI at the base of your repo so that the CLI is aware of all the packages in your repo. Enter all settings paths relative to the base of your repo

The first step in using the CLI is to initialise your config by registering a new project to contain your code. 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.

Next: CLI settings files