Bit

Community • Docs • Video • Examples • Gitter • Blog

Bit is a command-line extension for isolation and synchronization of reusable source-code components among Git repositories.

• Isolate and define any subset of files in your repository as a reusable component. Tag cross-component versions, track changes and gain absolute control over your component dependency graph.

• Sync components between repositories. Instantly get notified and merge component changes made in other repositories by leveraging integrations to Git's powerful comparison and merge utilities.

• Extend Bit to execute, parse, compile, distribute and test reusable components individually on top of an isolated component environment. Bit extensions can be used for packing a component, publishing it to package registries, parsing useful information and testing to make sure each component executes individually.

Use cases

Sync shared web / UI components (React, Angular etc) between different frontend repositories.

• Tutorial: Bit with React.

Sync shared-components between micro-services in a multi-repo architecture with Bit.

• Tutorial: Bit with Node.js.

Isolate and manage components in shared libraries for publishing individual components to bitsrc and to the NPM registry (soon).

• A Shared React component Library made individually available on bitsrc with NPM install (soon).

• Tutorial: Bit with Shared Libraries.

Supported Languages

Bit is language agnostic. Still, it requires binding and additional language sensitive features for different programming languages. To do this, Bit uses language-specific drivers:

• bit-javascript

Quick Start

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

Install Bit

See different install methods for different operation systems.

Initialize Bit

To start tracking even the most simple of components, we will need to create a workspace (local Scope) for your project. Use the local scope to organize and track the code components within your project.

To create a local Bit Scope for your project, run this command:

bit init

Create a Simple Component

A Bit component can be a React or Angular component or any other Javascript component. The simplest Bit component is a single file, with zero dependencies. Let's create a simple JavaScript module. Create a file called index.js and paste the following code in the file:

/**
 * Vaildates if input is string- throws exception if not
 * @param {string} name
 * @returns bool
 * @example
 * ```js
 * isString(str)
 * ```
 */
module.exports = function isString(input) {
  if (typeof input !== 'string') {
    throw new TypeError('Not a valid string');
  }
};

Let's track our component, and name it 'utils/is-string'.

bit add index.js -i utils/is-string

You can also use glob patterns to track a group of components together.

Now run a quick bit status command to validate that utils/is-string is being tracked.

Tag a Component

Now, let's Tag the newly tracked component. Tagging a component will lock all of its dependencies (in this case we have none), and create a version for the component.

bit tag -am 'initial version'

Another quick bit status command will show that the component is now staged, and ready to be exported.

Create a Scope

Components are shared into playlist-like collections called Scopes. A scope is a collection of shared components with a common theme or ownership. Scopes allow you to organize and maintain components in a single location, while individually installing and updating them. They also act as a registry for the components it hosts.

Scopes are super lightweight and can be set up on any server, in any location.

You can also freely host your Scopes on the Bit community hub, bitsrc.

For this quick-start guide, let's connect to to bitsrc and create a Scope.

Export Components

After creating a Scope, run the export command. This will publish your components and make them available to share in other projects:

bit export <username>.<scopename>

And you're done!
Browse your Scope and your different components which are now available for import.

You can check out an example or React movie-app components exported to bitsrc here.

Import Components

Bit enables you to import individual components to use in your different 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>/utils/is-string

You can now use the component in your new project:

const component = require('./components/utils/is-string');
# 'components' is the default location for imported components

Updating Components

Components can be updated from any project which is using them.

To update a component, simply change the code from inside your project's context. Afterwards 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 any change in it.
3. Run the bit status command to check that utils/is-string 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 utils/is-string with the changes we've made from the consumer project.

Why Bit

From UI frameworks such as React and Angular to Node.js microservices and serverless functions, modularity through encapsulated, reusable components in the foundation for today's and tomorrow's software architecture.

Bit was created to introduce CSCM: components source code management.

It enables you to track and manage components in your SCM repository and install them in other repositories while keeping them synced and updated. Using Bit, you can share code between repositories or projects and collaborate as a team. It saves the overhead of setting up and maintaining additional repositories and packages for sharing components, and enables you to turn an existing shared library into a collection of individually available components.

In a way, Bit is a “virtual monorepo” that syncs components on top of your entire codebase, with both multi-repo and mono-repo architectures in mind.

We've been using it for over 6 months, sharing components between our Node.js microservices and sharing our React components between front-end repositories, updating and syncing them from different projects. Today, Bit is being used by additional teams and communities from the open source and different organizations.

You can 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