Build Pipelines

A build pipeline is a sequence of tasks that are executed when a component is built or snapped.

Your env sets its components with a series of build tasks. These tasks are then included into a series of core build tasks, that are common to all components.

Run the following to execute the build pipeline:

$bit build

Copied

Run the following to execute the snap pipeline (which includes the build pipeline):

$bit snap

Copied

Run the following to execute the tag pipeline (which includes the build pipeline):

$bit tag

Copied

Run the following to review a component's pipelines:

$bit envs get ui/text --services teambit.pipelines/builder

Copied

The output will be similar to the following. Note that this list of tasks include core tasks like CoreExporter, and tasks that were registered by the env, such as TypescriptCompiler.

Env services, such as 'compiler', 'tester', 'linter', and so on, run in the workspace, when a component is being developed. They can be executed manually by using the corresponding commands (e.g, bit compile), or automatically when running Bit's development server (bit start).

Build tasks, on the other hand, run in a capsule, a directory isolated from the workspace. They are executed when a component is built or snapped (bit build, bit snap or bit tag).

Most development tools provide an env service and a corresponding build task. For example, 'Typescript' provides the compiler env service and the typescript build task.

// @filename: my-react-env.bit-env.ts
// ...
import { Compiler } from '@teambit/compiler';
import { TypescriptCompiler } from '@teambit/typescript.typescript-compiler';
import typescript from 'typescript';

export class MyReactEnv extends ReactEnv {
  compiler(): EnvHandler<Compiler> {
    return TypescriptCompiler.from({
      tsconfig: require.resolve('./config/tsconfig.json'),
      types: resolveTypes(__dirname, ['./types']),
      typescript,
    });
  }
}

export default new MyReactEnv();
Copied

The following example replaces the default TypescriptCompiler task with the same task, but with a different configuration.

// @filename: my-react-env.bit-env.ts
// ...
import {
  resolveTypes,
  TypescriptTask,
} from '@teambit/typescript.typescript-compiler';
import typescript from 'typescript';

export class MyReactEnv extends ReactEnv {
  build() {
    /* replace the default TypescriptCompiler task with a new one, that uses a different config */
    return super.build().replace([
      TypescriptTask.from({
        typescript,
        tsconfig: require.resolve('./config/new-tsconfig.json'),
        types: resolveTypes(__dirname, ['./types']),
      }),
    ]);
  }
}

export default new MyReactEnv();
Copied

Verify your pipelines were modified properly by reviewing the component's pipelines.

By default, the React env only registers tasks to the build pipeline. However, you can register your own tasks to a new snap and tag pipelines, as well.

import { ReactEnv } from '@teambit/react.react-env';
import type { ReactEnvInterface } from '@teambit/react.react-env';
/* import the task you want to add */
import { ComponentNameTask } from '@learnbit/extending-bit.build-tasks.component-name';

export class MyReactEnv extends ReactEnv {
  name = 'my-react-env';

  build() {
    /* add your task to the build pipeline */
    return super.build().add([ComponentNameTask.from({})]);
  }
}

export default new MyReactEnv();
Copied

To learn how to create a custom task, see Create a build task.

To remove a task from a pipeline, use the remove() method in the relevant pipeline ('build', 'snap' or 'tag'). Get the task name from the component's list of build tasks.

// @filename: my-react-env.bit-env.ts
// ...
export class MyReactEnv extends ReactEnv {
  name = 'my-react-env';

  build() {
    return super.build().remove('JestTask');
  }
}

export default new MyReactEnv();
Copied