Prepare to import
Prepare to import by cloning your repo and installing the CLI
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:
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 file
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:
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- 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