Bit

Community • Docs • Video • Examples • Gitter • Blog

Up until now, sharing code between repositories meant maintaining additional repositories and packages. As a result, overhead, discoverability and maintainability quickly became an issue.

Bit is a Git extension for isolation and synchronization of reusable source-code components directly between repositories. It enables you to share reusable components directly from your repository and make them individually available to discover, import and update from other repositories.

Key features:

• Isolate components in your repository by pointing out subsets of files as reusable components. Bit will provide full control over their dependency graph, enables you to track changes, tag cross-component versions and more.

• Sync components between repositories. Once components from one repo are imported into another repo, you can get notified and merge component changes made in the different repositories by leveraging integrations to Git's comparison and merge utilities.

• Extend Bit to play with components. You can use extensions to visually render your components, test and compile them, parse and present useful information from the inline docs and even publish your components to NPM (released in the next weeks).

Bit is a collaborative open source project, actively maintained by a venture-backed team and used by different organizations and OSS communities.

Use Cases

Share and sync UI components (React, Angular etc) between projects.

• Tutorial: Bit with React.

Share and sync Node.js components between micro-services in a multi-repo architecture.

• Tutorial: Bit with Node.js.

Shared library: use Bit as "component iTunes" for your static shared library.

• Add Bit to a project (example React app) to make its components individually available to discover and install from an organized collection.
• Tutorial: Bit with Shared Libraries.

Supported Languages

Bit's design is language agnostic. Still, it requires language-specific drivers for language-sensitive features (binding etc):

• bit-javascript

Quick Start

Let's add Bit to a repository to isolate and share components.

Install Bit

npm install bit-bin -g

See additional installation methods.

Initialize Bit on a repository

To start isolating components in your repository (UI components, small modules, reusable functions etc), we will need to initialize Bit for your repository.

Go to your repository root directory and execute bit init.

MacbookPro:src bit$ cd my-repository
MacbookPro:src bit$ bit init
successfully initialized Bit on the repository.

Create a component collection (Scope)

A scope is a collection of shared components with a common theme or ownership. Scopes group and organize components together, so that they can be discovered and synced in additional projects.

Let's create a free Scope on the Bit community hub. You can also think of it as your "component cloud".

Scopes are lightweight and can also be set up on any server, much like Git repositories.

Isolate and track reusable component(s) in your repository

Bit enables you to isolate and track any subset of files in your repository as a reusable component.

Let's isolate the components button, login and logo in the following project's directory structure.

MacbookPro:src bit$ tree . -I node_modules
.
├── App.js
├── App.test.js
├── components
│   ├── button
│   │   ├── Button.js
│   │   ├── Button.spec.js
│   │   └── index.js
│   ├── login
│   │   ├── Login.js
│   │   ├── Login.spec.js
│   │   └── index.js
│   └── logo
│       ├── Logo.js
│       ├── Logo.spec.js
│       └── index.js
├── favicon.ico
└── index.js

4 directories, 13 files

To isolate and track these directories as reusable components, lets use the bit add command.

This command also accepts a glob pattern, so you can track multiple components at once.

In this case, we have 3 components in the "components" directory. Let's track all of them. We'll also use the bit tag command to lock component versions and dependencies in place.

bit add components/*
bit tag --all

Now, let's share these components to the Scope we created on the Bit community hub.

bit export {{owner}}.{{scope}}

That's it. Once done, you will see your components individually available here in this Scope. Browse and take a look.

For additional usage examples click here.

As an example, here is a React app repo and a matching Scope, where its different components are shared.

You can also create an empty component

touch empty-component.js
bit add empty-component.js
bit tag --all
bit export {{owner}}.{{scope}}

Import Components

Bit enables you to import individual components for a Scope, and keep them sync between projects. You can install a component as an application-part in any destination on your project’s file system.

Let's import the components we just created to a new project.

1. Create a new directory for the consuming project.
2. Initialize a new scope using the bit init command.
3. Import the component:

bit import <username>.<scopename>/components/button

You can now use the component in your new project:

const component = require('./components/button');

Updating Components

A component can be updated from any project using it.

To update a component, simply change the code from inside your project's context. Then tag it again, and export it back to your Scope as a new version of your component.

1. Open the file you just imported.
2. Make changes.
3. Run the bit status command to check that components/button has been modified.
4. Tag a new version for the component:

bit tag -am "updated component"

5. Export the new version of the component back to the Scope:

bit export <username>.<scopename>

Now you can go back to your browser, and see that there's a new version for components/button with the changes we've made from the consumer project.

• You can find the full getting started guide here.
• You can find a list of command examples here.

Why Bit

Over the past 2 years, our team grew to include more developers working on more projects.

Over time, we found it increasingly hard to share our code and keep it synced between projects. Determined to avoid duplications, we considered many solutions from an arsenal of small repos and packages to shared static libraries. However, issues such as publish overhead, discoverability, and maintainability prevented us from truly sharing and syncing our components as a team between our projects.

The idea of Bit is that we can keep our components as an integral part of our repository and still natively integrate them into other repositories, without forcing any source code changes. You can think of Bit as a “virtual monorepo” for sharing and syncing components across repositories.

Using Bit, we were able to create node.js micro-services composed entirely of shared components and share our arsenal of React components across apps. Although it is a work in progress, feel free to get started.

Learn more on Hackernoon: "How we started sharing components as a team".*

Contributing

Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.

See Contributing.

Feedback

Feedbacks and questions are more than welcome via Bit's Gitter channel.

License

Apache License, Version 2.0