Skip to main content

Tracking Components

The tracking process translates sets of files into a single component that is semantically understood by Bit. It is the first step in a component's journey to complete independency.

When a component gets tracked, Bit does the following:

  • It determines which files should be be included in that component (see the result in the .bitmap file)
  • It determines the component ID
  • It determines the component entry point and its dependency graph
  • It creates a package in the workspace node_modules directory
  • It renders the component in the Workspace UI

Using Bit Create#

Tracking components is done automatically if you are using bit create to create your components.

bit create react-component ui/card

is the same as

bit create react-component card --namespace ui

The following message will appear in the terminal and your component will be created at the location specified and using the env that has been set in your workspace.jsonc.

the following 1 component(s) were created
my-scope/ui/card    location: my-scope/ui/card    env:      teambit.react/react
tip

Use bit create --help or bit create -h to get a list of available options for this command.

To see a list of component templates available:

bit templates

If you would like to create your own component template generator then check out our guide in Extending Bit

Pre-existing Components#

Components not created with the bit-create command will need to be manually added to the workspace using the bit-add command.

Track a single component#

bit add ui/button --namespace ui

Namespaces also support nesting.

bit add ui/base/button --namespace ui/base

Namespaces#

Namespaces serve as folders that organize components in the Workspace or inside a scope on bit.dev. You can use namespaces inside a scope to group related components.

To namespace a component use the --namespace or -n option.

Specifying a namespace helps you organize your components and lets you perform actions on multiple components at once. Namespaces are also useful in specifying overriding rules for all components under a specific namespace.

A tracked component should appear in the Workspace UI navigation bar with an "N" to its right, to signify that it is a new component.

new component

Check for tracking issues

Use the bit status command to check for tracking issues.

Track multiple components#

To track multiple components, set the path to the common directory and use the * wildcard.

For example:

bit add path/to/common/path/*

Set an entry point for a component#

The default entry point is index.ts/index.js. To set a different entry point:

bit add <path to component> --main <entry file>

For example

bit add components/ui/button --main main.js

Untracking components#

bit untrack <component id>

Best Practices#

  • Start tracking components bottom-up, so all components that are shared by other components are tracked first.
  • Plan and arrange components in namespaces according to their functionality, similar to the way you would arrange them in folders in a project.
  • Review the package.json in your original projects to ensure proper definition of dependencies.
  • If you are using path aliases in your import statements, make sure you define Bit's custom paths resolution configuration.