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
Copiedcopy
See command synopsis

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

$bit
Copiedcopy
See command synopsis

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

$bit
Copiedcopy
See command synopsis

Review a component's pipelines

Run the following to review a component's pipelines:

$bit
Copiedcopy

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.

Environment: my-org.my-scope/envs/my-react-env-env
teambit.pipelines/builder

build pipe
total 9 tasks are configured to be executed in the following order
1. teambit.harmony/aspect:CoreExporter
2. teambit.compilation/compiler:TypescriptCompile
3. teambit.defender/tester:JestTest
4. teambit.defender/linter:EsLintLint
...
10. teambit.preview/preview:GeneratePreview

snap pipe
total 6 tasks are configured to be executed in the following order
...

tag pipe
total 6 tasks are configured to be executed in the following order
...
Build artifacts

Most build tasks generate artifacts. Learn how to retrieve and handle the generated artifacts in Build artifacts.

Env services vs build tasks

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.

Typescript env service
Typescript task
// @filename: my-react-env-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();
CopiedCopy
Preview service

An exception to the service/build-task pattern above is the 'preview' service. 'Preview' is part of Bit's core build tasks. It runs for every component, when it is built or snapped. To learn more see

Component previews().

Modify a pipeline

Replace a task

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

// @filename: my-react-env-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();
CopiedCopy

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

Add a task

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.
Build pipeline
Build pipeline - add and replace
Snap pipeline
Tag pipeline

The following code snippet adds a task to React-env's default build pipeline.

import { ReactEnv } 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-env';

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

export default new MyReactEnv();
CopiedCopy

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

Remove a 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-env.bit-env.ts
// ...

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

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

export default new MyReactEnv();
CopiedCopy