An env (component development environment) provides your components with the proper tooling, configurations and runtime environment.
A React env is an env that extends Bit's base React env.
Run the following to create a new workspace that contains a custom React env component. Replace the default-scope
with your own scope name.
Alternatively, run the following to create a custom React env in an existing workspace:
Your env looks similar to the following:
Your React env extends Bit's base react-env. You can update your env with the latest changes from the base env.
Run the following to review the current version used by your env:
The output should list the base env as a dependency:
Run the following to install the latest version of react env:
Your env should now resolve to the latest version of the base env. Verify this by running the following:
Components can be created using pre-configured generators (templates). These generators include the source files for the component as well as its configuration.
Before your create a component using a generator, make sure your custom env is set properly in your workspace.jsonc
.
Setting your env in the generator config ensures all (relevant) components will be configured to use that env, when they are generated.
/* @filename: workspace.jsonc */ { "teambit.generator/generator": { "envs": ["my-org.my-scope/envs/my-react-env"] } }
Run the following to list all available templates:
The output is similar to the following:
react (my-org.my-scope/envs/my-react-env)
react
react-hook
react-context
react-app
Generate a component using one of these templates:
Run the following to verify your component uses the proper env:
The output should be similar to the following:
│ component │ env │
├───────────────────────────────────┼────────────────────────────────────┤
│ my-org.my-scope/envs/my-react-env │ teambit.envs/env │
├───────────────────────────────────┼────────────────────────────────────┤
│ my-org.my-scope/pages/welcome │ my-org.my-scope/envs/my-react-env │
└───────────────────────────────────┴────────────────────────────────────┘
You can set an existing component to use a different env at any time:
This component's next snap will include a change to its configuration, the new env.
Learn more about setting components with envs in Use envs.