Component artifacts

Artifacts are files that are generated by a component's build tasks and stored in its snaps.

Artifacts serve a number of different purposes. They enable components to be consumed by other components (for instance, the component package and compiled files), or even, to be consumed as an independent app. Furthermore, artifacts can serve to improve component discoverability and ease-of-use (for instance, the component docs and compositions).

Run the following to list the latest artifacts of a (local) component:

bit artifacts COMPONENT_ID_PATTERN [--out-dir RELATIVE_OUTPUT_DIR_PATH] [--aspect ASPECT_ID] [--task TASK_NAME] [--files FILE_NAME_GLOB_PATTERN]
Copied

For example:

bit import teambit.base-react/buttons/button
Copied

bit artifacts teambit.base-react/buttons/button
Copied

The output lists the component's artifacts, grouped by the aspects and build tasks responsible for generating them:

teambit.base-react/buttons/button@1.95.12
  teambit.compilation/compiler
    TSCompiler
      dist/button.js
      dist/button.js.map
      dist/index.d.ts
      dist/index.js
      dist/index.js.map
      ...

  teambit.preview/preview
    GeneratePreview
      teambit_base_react_buttons_button-component.js
      teambit_base_react_buttons_button-preview.js
      static/css/teambit.base-react/buttons/button-preview.a29d123b.css

  teambit.pkg/pkg
    PackComponents
      package-tar/teambit-base-react.buttons.button-1.95.12.tgz
Copied

To extract the listed artifacts (from the component objects), run the following:

bit artifacts teambit.base-react/buttons/button --out-dir artifacts/button
Copied

The files are now available in <workspace-directory>/artifacts/button directory.

To retrieve a component's artifacts, fetch the component from the local or remote scope, and retrieve the specific artifact you're looking for, using the artifacts API.

For example:

/* get the component ID object using the component ID string */
const componentId = await this.scope.resolveComponentId(id);

/* get the component model from the local scope */
const component = await this.scope.get(componentId);

/* get artifacts files (vinyls) generated by the compiler aspect */
const artifactVinyl: ArtifactVinyl[] =
  await this.builder.getArtifactsVinylByExtension(
    component,
    'teambit.compilation/compiler'
  );

/* get artifacts metadata generated by the compiler aspect */
const artifactsMetadata = await this.builder.getArtifactsByExtension(
  component,
  'teambit.compilation/compiler'
);
Copied

Run the following to fork a demo Aspect that implements the snippet shown above:

learnbit.extending-bit/artifacts/retrieve-artifacts
Copied

Run the following to make that aspect loadable by your workspace:

bit use learnbit.extending-bit/artifacts/retrieve-artifacts
Copied

Test this aspect by running its custom command on a (versioned) component in your workspace:

bit get-compiler-artifacts COMPONENT_ID
Copied

Head over to Build artifacts API to explore the artifacts API.

bit fork learnbit.extending-bit/artifacts/retrieve-remote-artifacts
Copied

Artifacts are generated by build tasks. To add artifacts to a component version register a build task that generates the artifacts and stores them in the component version.

For example:

async execute(context: BuildContext): Promise<BuiltTaskResult> {
    const capsules = context.capsuleNetwork.seedersCapsules;
    capsules.forEach((capsule) => {
      const componentName = capsule.component.id.name;
      fs.writeFileSync(
        path.join(capsule.path, 'output.my-artifact.txt'),
        `The component name is ${componentName}`
      );
    });

    return {
      artifacts: [
        {
          generatedBy: this.aspectId,
          name: this.name,
          // The glob pattern for artifacts to include in the component version
          globPatterns: ['**/*.my-artifact.txt'],
        },
      ],
      // ...
    };
  }
}
Copied

Run the following to fork a demo build task that implements the above code snippet:

bit fork learnbit.extending-bit/build-tasks/basic-task
Copied

Run the following to import a demo aspect that registers the above build task:

bit fork learnbit.extending-bit/artifacts/add-build-task
Copied

Run the following to use the above aspect in your workspace:

bit use learnbit.extending-bit/artifacts/add-build-task
Copied

Run bit snap or bit tag to run this build task and generate the artifacts. Retrieve the generated artifact using the build task name bit artifacts COMPONENT_ID --task BasicTask.

To learn more about build tasks and build pipelines, see Builder overview.