Extending an Env

Envs in Bit are designed to be extendable and composable. When you want to define your workflow you don't need to start from scratch. Take any existing env and use it's programmatic APIs to tune it to your needs. The scope of changes and complexity is up to you: adding a single lint rule, changing the build pipeline or even adding a completely new workflow, and anything is between is possible.
The env you extended will become a dependency for your setup, so you can keep get updates from it.

Envs provide templates to get started quickly with composing on top of them. To see list of available templates:

bit templates
Copied

Let's create a basic env that composes one of the base envs:

bit create react-env envs/my-env
Copied

The template generates the following component:

scope/my-env
├── index.ts
├── jest
│   └── jest.config.js
├── my-env.aspect.ts
├── my-env.docs.mdx
├── my-env.main.runtime.ts
├── my-env.preview.runtime.ts
├── typescript
│   └── tsconfig.json
└── webpack
    └── webpack-transformers.ts
Copied

All env-templates define the generated envs with configuration for "being" a Component Development Environment. Validate by running show for the component.

bit show company.scope/envs/my-env
Copied

Look for the teambit.envs/env setting.

┌───────┬───────────────────────────┐
│ id    │ company.scope/envs/my-env │
├───────┼───────────────────────────┤
│ ...   │ ...                       │
├───────┼───────────────────────────┤
│ env   │ teambit.envs/env          │
└───────┴───────────────────────────┘
Copied

Get started with optimizing your flow by editing *.main.ts:

import { MainRuntime } from '@teambit/cli';
import { ReactAspect, ReactMain } from '@teambit/react'; // Set a dependency on the env to extend
import { EnvsAspect, EnvsMain } from '@teambit/envs';
import { MyReactAspect } from './my-react.aspect';

export class MyReactMain {
  static slots = [];
  static dependencies = [ReactAspect, EnvsAspect];
  static runtime = MainRuntime;

  static async provider([react, envs]: [ReactMain, EnvsMain]) {
    const templatesReactEnv = envs.compose(react.reactEnv, [
      react.useTypescript( ),     // an API from the base env to change the functionality of the typescript compiler
      react.useEslint( ),         // an API from the base env to change the functionality of the eslint linter
    ]);
    envs.registerEnv(templatesReactEnv); // register the composed env
    return new MyReactMain();
  }
}

MyReactAspect.addRuntime(MyReactMain);
Copied

Once you apply any change, you can tag the first version of your component and export it.

bit tag company.scope/envs/my-env --message "first version"
bit export
Copied

Using custom envs is done just the same as pre-built envs, with the bit env set command:

bit env set acme.demo/welcome company.scope/envs/my-env      # define the component a custom env.
Copied

The ability to extend a custom env is determined by the developer of the custom env, and if they added any API to customize their envs.