Prepare to import

Prepare to import by cloning your repo and installing the CLI

Last updated on August 26, 2022

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.

 

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.

CLI Settings files

The CLI is controlled by two settings files. Templates for these files are generated during the init step when you run the CLI:

  • targets.json - This controls the target workspace and project where the CLI will deploy any build files and config created.
  • interplay.config.js - This 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

 
Did this answer your question?
😞
😐
🤩