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
- It renders the component in the Workspace UI
Tracking components is done automatically if you are using
bit create to create your components.
bit create react-component ui/card
bit create react-component-js ui/card
is the same as
bit create react-component card --namespace ui
bit create react-component-js 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
the following 1 component(s) were created my-scope/ui/card location: my-scope/ui/card env: teambit.react/react
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:
If you would like to create your own component template generator then check out our guide in Extending Bit
Components not created with the
bit-create command will need to be manually added to the workspace using the
bit add ui/button --namespace ui
Namespaces also support nesting.
bit add ui/base/button --namespace ui/base
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
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.
Check for tracking issues
bit status command to check for tracking issues.
To track multiple components, set the path to the common directory and use the
bit add path/to/common/path/*
The default entry point is
index.js. To set a different entry point:
bit add <path to component> --main <entry file>
bit add components/ui/button --main main.js
bit untrack <component id>
- 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
importstatements, make sure you define Bit's custom paths resolution configuration.