Website • Docs • Video • Blog • Gitter • Discourse • Examples
About
Bit works with Git and NPM to improve the workflow around code-sharing.
It detects and isolates components from existing source code.
It organizes components in visual catalogs for your team to choose from.
It makes all your components available to discover, develop and sync from any project in your codebase.
While code sharing speeds your development, it can also generate a lot of overhead when you have to split your repositories and work hard to make changes between them.
Bit eliminates this overhead by making it painless to share reusable code, collaborate on shared components and sync changes from multiple repositories and projects.
Any team member can discover, use and develop components from any project, suggest updates and stay in sync.
Bit is a collaborative open source project, actively developed and maintained by a venture-backed team and used by more teams and communities every day.
Contents
How It Works
Seamless code sharing
Instead of having to split repositories and create new ones just to publish packages, Bit helps you seamlessly isolate components (sets of files) from any existing repository and share them to be used, developed and synced in other projects.
To share components you don’t need to refactor or configure anything. Instead, Bit automatically detects the component’s dependency graph (including package / file / component dependencies) and creates an isolated environment for every component.
This environment enables you to use and develop components from other projects. For example, components written in typescript can be used and developed in a project written in flow-typed. It also lets Bit test and build your components in isolation, so you can know the exact state of every component.
Importing with Bit / Installing with NPM
You can use Bit to import components into any project you’re working on. Importing a component means you can use it and also make changes and continue to develop it from your project. Bit will track your components across different projects to sync changes between them.
Once shared to Bit’s hub, components automatically become available to install as packages using NPM and Yarn. This means you can turn any part of any repository into a package without refactoring or splitting the repository.
Combining the two workflows also allows you to easily make changes to components installed as packages right from any project consuming them.
Updating and merging component changes
Since Bit tracks components across different projects, you can update components with new versions and suggest updates to components shared by your team. When a component is changed in your project, Bit leverages Git’s merge utility to let you merge component changes between your projects.
This workflow also helps you learn exactly which components are used by who and where, so you can easily make changes to components in multiple projects with universal control over your dependency graph.
Component discoverability
While making code sharing easier, Bit helps you organize your components and make them discoverable for your team to find and choose from.
Using a semantic component search engine and features such as a live playground for component visualization, auto-parsed docs, test results and more, Bit makes it simpler to collaborate and share your favorite components.
Here is an example of React UI components organized, rendered, tested and made discoverable via Bit’s hub.
Extending Bit
Bit can be extended for a variety of purposes and integrated into your favorite tools. For example, you can create and use Bit extensions to build, test, render, bundle, lint, pack, publish and optimize the workflow around your components.
Getting Started
Basics
- Installation
- Initializing Bit
- Isolating components
- Versioning components
- Sharing components
- Installing components with NPM
- Modifying components with Bit
- Merging component changes
Advanced:
- Building components
- Testing components
- Rendering UI components
- Documenting components
- Removing components
- Extending Bit
- Configuring Bit
- Troubleshooting
- CLI reference
Examples
Bit with React / Vue
Tutorial: Bit with React.
UI components are often designed with reusability in mind.
As such, Bit can be a powerful tool for sharing these components between app and projects.
For example, here is a React movie-application project that contains 8 reusable UI components and 1 global-styles component.
Using Bit, all of these components were isolated and shared from the repository, and organized in this Scope.
Every component can now be played with online, installed using NPM or imported into any project for further development.
Here’s an example React hero component from this Scope.
.gif)
Node.js modules and common code
Some teams use Bit to sync common code between Node.js repositories and services. We use Bit to sync over 250 shared components between our Node.js microservices (!).
Bit is useful for preventing duplicate code while making maintenance easier.
Shared libraries
You can use Bit to turn any shared-lib into a dynamic collection of individual components.
Here’s an example GitHub community-made UI library with React. The library’s authors shared their components with Bit, making them available to discover and use from this Scope.
Here’s an example of the React Card component in Bit’s live playground.
More
Bit can be useful for sharing any common component, functionality and module including GraphQL APIs, Serverless functions, Utility functions and more.
Example workflow
Let’s use Bit to isolate and share the button, login and logo React UI components in the following repository file structure, and make them available to use in other projects.
$ tree
.
├── App.js
├── App.test.js
├── favicon.ico
├── index.js
└── src
└── 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
5 directories, 13 files- First, let’s install Bit.
$ npm install bit-bin -g
- Next, let’s initialize Bit for the project.
$ cd project-directory
$ bit init
- Now, let’s track the components using
bit addand let Bit detect their file / package dependency graphs.
# Use a glob pattern to track multiple components in the same path, or specific paths to track specific components.
$ bit add src/components/*
- Next, let’s import build and test environments to let Bit build, render and test the components in isolation. You can use pre-made environemnts or implement your own).
# Import an environment to build and render the components
$ bit import bit.envs/bundlers/webpack-css-modules --compiler
# Import an environment to test the components in isolation
$ bit import bit.envs/testers/karma-mocha --tester
- Now, let’s tag the components and let Bit lock the component’s version and dependency graph.
$ bit tag --all 1.0.0
- Next, let’s create a remote Scope on Bit’s hub for your components. From the Scope your components can be discovered, used and synced in your projects. Once created, let’s export the components to the Scope. This will not remove them from the repo or change its structure at all.
# Export the components to your remote Scope
$ bit export username.scopename # Share components to this Scope
Note that using the --eject flag you can also remove an exported component from your source-code and add it as a package dependency in your project’s package.json file.
That’s it.
Your components are now organized in your Scope and can be discovered, installed (NPM) and developed (bit import) from any other project. Bit will keep tracking the components across projects, so you can easily update and merge changes between them.
Motivation
Learn more about the journey towards turning components into the lego-like building blocks of different projects and applications, why Bit was created and what the future holds on Bit’s blog.
You can also check out Bit on FreeCodeCamp and Hackernoon.
Supported Languages
Bit's design is language agnostic. Still, as of today, it requires language-specific drivers for language-sensitive features (binding etc). We released Bit’s driver for Javascript, and will be releasing more drivers in the future. You are also welcome to add your own.
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 or Discourse boards.
License
Apache License, Version 2.0