Website • Docs • Video • Blog • Gitter • Examples
Bit works with Git and NPM to improve the workflow of sharing code between multiple projects and applications.
Components of software such as UI components, small modules and more can be used as building blocks for multiple projects and applications.
However, sharing this code between projects often comes with a loft of overhead when forcing you to split your existing repositories and sync changes between them.
Bit eliminates this overhead by helping you seamlessly isolate and share components directly from any repository, organize them for your team and keep them synced across your codebase.
Any team member can easily discover, use and develop shared components from any of their projects, improving collaboration and innovation while reducing the overhead of code sharing.
With Bit, code-sharing becomes as simple as copy-pasting.
Bit is a collaborative open source project, actively developed and maintained by a venture-backed team, used by our team for over 10 months and now being used by more organizations and communities every day. You are welcome to use it, contribute and suggest feedback.
Instead of splitting your project into more repositories just to publish packages, Bit enables you to isolate and share components of code (subsets of files) directly from your existing repository without splitting it or changing a single line of code.
Once shared, your components can be installed with NPM / Yarn or imported into any project with Bit for further development, while keeping changes synced between your projects.
This becomes possible thanks to three main features:
Automatic dependency detection and definition - Components can depend on other components, packages or files in your project. Bit automatically defines the dependency graph for the components you share, to isolate them from your project.
Isolated environment - Bit’s understanding of the component’s dependency graph enables it to create an isolated environment for the component, so it can be developed from any other project. For example, components written in typescript can be sourced and developed in a project written in flow-typed.
Scope - The Scope is a remote source of truth in which your components are stored, organized and synced (while versioned) throughout your projects. When combined with the isolated component envrionemnt, Scopes also enable components to build and test in isolation.
Scopes also serve as a “playlist” of your team’s components, from which they can be easily discovered and used. You can set up a Scope locally, or use Bit’s free Hub.
Once shared to a Scope on the free hub, components automatically become available to install as packages using NPM and Yarn. This means you can turn any component from any project into a package in seconds, without creating a new repository and environment.
Bit decouples the representation of the code you share from your project’s file structure. As a result, you can make changes to the code you share from any project you’re working on, and sync these changes across other projects using your Scope as a remote source of truth.
This distributed workflow also make it very easy to update packages from any end repository if you choose to install your components using package managers.
The code you share with Bit is organized in your Scopes and can be made available to your team to discover, use and develop. If shared to Bit’s free hub, your components will be presented with a visual UI including rendering for React components, isolated test results, auto-parsed docs and examples. Here’s an example.
Since Bit tracks the code you share across your projects, you can easily learn which components are used by who and where, and make vast changes to multiple components together with universal control over your dependency graph.
You can extend Bit to integrate with your favorite dev tools to build, test, bundle, lint, pack, publish and optimize the workflow around the code you share.
Let’s use Bit to isolate and share the UI components button, login and logo in the following project’s directory structure.
$ 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- Let’s initialize Bit for the project.
$ cd project-directory
$ bit init- Let’s add the components to be tracked by Bit.
$ bit add src/components/* # use a glob pattern to track multiple components in the same path or a single path to track a single component.- Let’s add build and test environments from this pre-made collection (you can also implement your own).
- In case these are React UI components, it will also enable Bit to render your components! Here's an example.
$ bit import bit.envs/bundlers/webpack-css-modules --compiler
the following component environments were installed
- bit.envs/bundlers/webpack-css-modules@0.0.6
$ bit import bit.envs/testers/karma-mocha --tester
the following component environments were installed
- bit.envs/testers/testers/karma-mocha@0.0.8
- Now let’s lock a version and let Bit isolate the components from the project by defining their file / package dependancy graph.
$ bit tag --all 1.0.0
3 components tagged | 3 added, 0 changed, 0 auto-tagged
added components: components/button@1.0.0, components/login@1.0.0, components/logo@1.0.0$ bit export username.scopename # Share components to this Scope
exported 3 components to scope username.scopenameNote 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. You can now install the components using your favorite package manager, or use bit import to bring their source code into any repository, make changes and easily sync them across different projects.
Also see: GETTING STARTED
- Installation
- Initializing Bit for your project
- Isolating and tracking components
- Versioning and dependency defintion
- Sharing components
- Installing with NPM/Yarn
- Component source code distribution
- Building components
- Testing components
- Rendering components
- Documenting components
- Removing components
- Extending Bit
- Configuring Bit
- Troubleshooting
Bit can be a great combination with your UI components.
For example, here is a React movie-application project that contains 8 reusable UI components.
Using Bit, all of these components were seamlessly isolated and shared from the repository without changing a single line of code, and organized in this Scope.
Here’s an example React hero component from the project:
Share and sync Node.js modules between microservices in a multi-repo architecture.
We use Bit for over 250 shared components between our Node.js microservices (!).
Use Bit to turn any shared-lib into a dynamic collection of individual components.
Here’s an example JS utility library seamlessly turned into a dynamic Scope of individual components.
Additional use cases: GraphQL APIs, Serverless functions, Utility functions and any encapsulated, reusable component and module.
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:
- “How we started sharing components as a team” (Hackernoon)
- “What music can teach us about how we share code” (FreeCodeCamp)
- Read our blog
Bit's design is aimed to be language agnostic, but as of today it still requires language-specific drivers for language-sensitive features (binding etc).
Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.
See Contributing.
Feedbacks and questions are more than welcome via Bit's Gitter channel.
Apache License, Version 2.0