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
Copiedcopy

Change the default env for React components

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

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

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"]
  }
}
CopiedCopy

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.

Change your starter configuration

  • 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
Copiedcopy

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();
CopiedCopy

Extend or customize your starter

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

$bit
Copiedcopy

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();
CopiedCopy