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):

Your workspace starter includes a default env for your React component development.

To remove the env included by this starter, run the following:

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-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 (i.e. being developed in the local workspace) 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:

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

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

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

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

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

  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:

Set the custom starter instead of the default one:

/* @filename: my-react-env-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-env';

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

export default new MyReactEnv();
Copied