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 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"] } }
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 namedescription
: the generators descriptionhidden
: display the generator only when runningbit 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.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();
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.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();