Use Envs

For a component to be independently maintained, it must have a development environment configured directly on it.

A development environment (Env) is a collection of tools, procedures and configurations, used for the development of components. This includes component documentation, compilation, testing, building and more.

An env is a single component (of type 'aspect'). You can collaborate on it, reuse it, and even extend it in your own custom env composition.

Envs are set directly on components (not on the entire workspace). Create a component to set it with its own env:

$bit create react apps/to-do --scope my-org.tasks-scope

Copied

The output confirms that a new component was created. This component is already set (by its template) to use Bit's React env:

You can also set a component with a different env, after it have been created. For example, the following sets the component with a custom env:

$bit envs set apps/to-do my-org.my-scope/my-react

Copied

The output confirms that the new component is set with the custom env:

Overriding the default env set by a template

To override the default env set by the component template use the --env option. For example:

$bit create react apps/to-do --env my-org.my-scope/my-react

Copied

Bit offers various out-of-the-box envs that you can use directly or as part of your own custom env composition. Create a custom env to replace dev tools, to change configuration, or to extend the env with additional env services. Your custom env can then be used by others in your team, to collaborate on components using the same set of tools and configurations.

For example, run the following to create an env that extends Bit's React env:

$bit create react-env envs/my-react --scope my-org.my-scope

Copied

my-scope/envs

my-react

new

react/

react

latest

The output confirms that a new component was created. And, since that component is an env, it uses an env designed for envs.

Head over to your env's my-react.main.ts file to change React's default config using its extension API. For example, set Prettier (React's default formatter) to use a tab-width of 4 instead of 2:

react.usePrettier({
  transformers: [
    (config) => {
      config.setKey('tabWidth', 4);
      return config;
    },
  ],
});
Copied

Run the following to compile the new env and install its dependencies:

$bit install

Copied

$bit compile

Copied

Recompile after modifying your env's compiler (first compilation compiles your env, the second compilation compiles your components using the env's new compiled code).

Re-install dependencies after modifying your env's dependency policy.

Head over to the 'Using an env' section, to learn how to use your custom env.

Much like monolithic applications, components are created, maintained, and built, using development tools. Env services simplify component development by operating these tools via a standardized interface (API, CLI, and UI).

For example, the following runs the compiler service on all components in the workspace, regardless of the specific compiler set by their envs (Typescript, Babel, etc.):

$bit compile

Copied

The output lists all components affected by the compilation. Notice how the custom env (a component itself) and the component that uses it, were both compiled, even though each of them uses a different env (and possibly, a different compiler):

Test components in the workspace. See Testing to learn more.

$bit test

Copied

Compile components in the workspace. See Compiling to learn more.

$bit compile

Copied

Note that bit start and bit watch automatically re-compile modified components.

Run the build pipeline of components in the workspace (usually, before snapping changes). See Build pipeline to learn more.

$bit build

Copied

Simulate components in different contexts and variations to test and visualize them, as well as to promote their discoverability. See Compositions to learn more (see Preview to learn how component previews are bundled).

Run the workspace/scope UI to explore the components' compositions:

$bit start

Copied

Document components in the workspace. See Docs to learn more (see Preview to learn how component previews are bundled).

Run the workspace/scope UI to explore the components' documentation:

$bit start

Copied

Lint components in the workspace. See Linting to learn more.

$bit lint

Copied

Format components' code to pre-defined styles. See Formatting to learn more.

$bit format

Copied

Create a new component using a pre-defined template. See Scaffolder to learn more.

$bit create react apps/to-do

Copied

Create a new workspace using a pre-defined template. See Starters to learn more.

$bit new react my-workspace

Copied