You can onboard an existing set of components to be Bit components using the
bit add command. If you would like to create new components we suggest you use the
bit create command.
During the onboarding process Bit marks directories to components. For each Bit Component, Bit does the following:
- Marks the component directory.
- Sets the component ID.
- Sets the component entry point.
- Parse and resolve dependency graph.
- Create a Component Module Link.
- 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.
bit showto see each component applied configuration.
bit startto view component.
importstatements to use Component Module Links generated by Bit.
init command to initialize a Bit Workspace
bit init --harmony
workspace.json to fit your requirements. Read more here.
Run the Bit dev server to see onboarded components.
Each component in a Bit workspace must have all its implementation files under the same directory. A component must have an entry file (
index.[ts|js] is used as the default.
my-component├── index.ts├── my-component.compositions.tsx├── my-component.docs.md└── my-component.ts
To add your component to the workspace run the
bit add command followed by the namespace. The namespace is the the component folder structure you would like to see in your workspace.
bit add button --namespace ui
Bit has mapped this component's files and registered them in the
.bitmap file. This enables Bit to treat a collection of files as a single unit, a component.
In addition to that, Bit has generated a component ID, with the pattern
<namespaces>/<component-name>. The component ID will be prefixed with the scope name once it has been exported to a remote scope (
You can use -n which is short for --namespace
Bit helps you to isolate components. Run the
status command to gain insights on how well isolated your components are.
To render your component - create a *.compositions.tsx
To add documentation to your component - create a *.docs.md
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