Workspace Starters

Workspace starters are pre-configured workspace templates that you can use to create a new workspace. The generated workspace includes workspace-level configuration, configuration files for your IDE, and a customizable React env for your React component development.

Run the following to create a new React workspace (set your own default scope name):

$bit new react my-workspace --env teambit.react/react-env --default-scope my-org.my-scope

Copied

Your workspace starter includes a default env for your React component development. To remove the env included by this starter, run the following:

$bit remove envs/my-react-env --force

Copied

To set a different env as the default env for React components, set it in the generator property of the workspace.jsonc file. For example, the following sets the basic react-env as the default env for React components, instead of the custom env that was previously removed:

/* @filename workspace.jsonc */
{
  "teambit.generator/generator": {
    "envs": ["teambit.react/react-env"]
  }
}
Copied

Note that an env can be used whether it's available locally or not. If the env is not available locally, Bit will install it from the remote scope.

• name: the generator's name
• description: the generators description
• hidden: display the generator only when running bit templates --show-all
• env: set the generated components with this env (component id)

Install the component that provides the generators to customize its properties:

$bit install @teambit/react.generator.react-templates

Copied

Implement the `starter`` env handler in your env, and provide the starters with the properties to override:

/* @filename: my-react-env.ts */

import { ReactEnv } from '@teambit/react.react-env';

import { StarterList } from '@teambit/generator';
import { ReactWorkspaceStarter } from '@teambit/react.generator.react-starters';

export class MyReactEnv extends ReactEnv {
  name = 'my-custom-react';

  starters() {
    return StarterList.from([
      ReactWorkspaceStarter.from({
        name: 'my-custom-name',
        description: 'My custom starter description',
      }),
    ]);
  }
}

export default new MyReactEnv();
Copied

Fork the default starter to customize it and add it to your env:

$bit fork teambit.react/generator/react-starters generators/my-react-starter

Copied

Set the custom starter instead of the default one:

/* @filename: my-react-env.ts */

import { ReactEnv } from '@teambit/react.react-env';

import { StarterList } from '@teambit/generator';

/* a custom starter */
import { ReactWorkspaceStarter } from '@my-org/my-scope.templates.my-custom-starter';

export class MyReactEnv extends ReactEnv {
  name = 'my-custom-react';

  starters() {
    return StarterList.from([ReactWorkspaceStarter.from({})]);
  }
}

export default new MyReactEnv();
Copied