<aside> 👉 Before starting this step, install the CLI and initialize your settings files: Installing and Initializing the CLI

</aside>

The import settings file .interplay/interplay.config.js is created by the initialize step and controls the CLI import.

Saving this file in your repo will allow you to run the import repeatedly - either against your local repo, or automatically as part of a CI process.

In this section we will work through a new import in stages, adding configuration settings used by each stage.

Importing Components

<aside> 👉 Run commands in this section at the base of your repo. Paths should be entered relative to the base of the repo (e.g. in VSCode you can right click on a file and copy relative path).

</aside>

1. Specify packages to import

Update the interplay.config.js to specify the packages you want to import.

For each package, configure an index file to use as the entry point. For example, to import the @auth0/cosmos package we can add configuration as follows:

//interplay.config.js

framework: 'react',
packages: [
  {
    name: "@auth0/cosmos",                          //Name of package to import
    packagePath: "./core/components/package.json",  //Path to package.json
    src: "./core/components/index.ts",              //Entry file for component parsing
    build: "./core/components/index.ts",            //Entry file for component bundling
    ignoreExports: [],                              //Exports to ignore when parsing
  },
],
peerDependencies: {},
alias: {
  //"<alias string>": "./aliased/relative/path/"
},

framework - Framework used for your components to determine parsing/bundling plugin used by CLI. Currently 'react' is supported.

packages - An array of config objects - one for each package of components to import from your repo. Each containing:

name - The name of your repo package to import. This should match the name in your package.json

packagePath - ****Path to package.json, from the base of the repo where you are running the CLI

src - Path to index file for used as entry point for component parsing, from the base of the repo where you are running the CLI

build - Path to entry point for component bundling, from the base of the repo where you are running the CLI. Often the same path as the src if the CLI is building your code, but you can also specify a custom build here. If not specified, the srcpath is used as the build entry point too. See Building your components for more details.

ignoreExports - An array of export name strings to ignore in the index specified in src. Only needed if your src index file contains exports you don't want configured as components in Interplay.

peerDependencies - object containing package names that should be built as externals when bundling your code. (React and react-dom will automatically be treated as peerDependencies).

alias - object containing any aliases required to resolve paths in your code. These aliases are passed to webpack and also used to find the component source code to parse. Can be:

2. Build your code components

When you have entered your package settings, use the CLI to build your code. It uses webpack internally:

interplay build

The CLI will output the build(s) to the .interplay/stage/files/interplay/build folder, ready for deployment to Interplay.

You can also provide your own custom build, or customise the webpack settings used by the CLI. For more details on these options and troubleshooting builds, please see:

Building your components

3. Parse your components

The CLI uses the same package settings to parse your component source code, to generate JSON config telling Interplay about your components and their props.

To parse your components:

interplay parse