Skip to main content

Onboard Components to Bit

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.

Recommendations#

  • 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.
  • Run bit show to see each component applied configuration.
  • Use bit start to view component.
  • Refactor import statements to use Component Module Links generated by Bit.

Component Onboarding Process#

Initialize Bit Workspace#

Use the init command to initialize a Bit Workspace

bit init --harmony

Configure Workspace#

Configure your workspace.json to fit your requirements. Read more here.

Run the Dev Server#

Run the Bit dev server to see onboarded components.

bit start

Add Pre-existing 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 (<owner>.<scope>/<namespaces>/<component-name>).

Learn more about tracking components and removing components

Tip

You can use -n which is short for --namespace

Component Isolation Status#

Bit helps you to isolate components. Run the status command to gain insights on how well isolated your components are.

bit status

Rendering Components#

To render your component - create a *.compositions.tsx

Documenting Components#

To add documentation to your component - create a *.docs.md

FAQ#

Can I track many components at once?#

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

For example:

bit add path/to/common/path/*

I want to use a different entry point#

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

bit add <path to component> --main <entry file>
Set main.js as entry point
bit add components/ui/button --main main.js