Website • Docs • Video • Blog • Gitter • Examples
Bit works with Git and NPM to speed and improve the workflow of building multiple projects and applications with code components.
The same functionalities, modules and UI components can often be used as building blocks for more than one project or application and used by different people on your team.
However, sharing these components between projects often comes with a loft of overhead when forcing you to split your repositories and struggle to sync changes between them.
Bit eliminates this overhead by helping you seamlessly isolate components directly from any repository, organize them for your team and keep them in sync across your entire codebase.
Any team member can easily share, discover and develop shared code from any of your projects without being coupled to repository ownerships and the overhead of making changes to multiple repositories packages.
With Bit managed code sharing becomes as simple as copy-pasting.
Bit is a collaborative open source project, developed and actively maintained by a venture-backed team for internal usage, and now used by organizations and OSS communities. You are welcome to use it, contribute and suggest feedback.
Instead of splitting your project into multiple repositories just to publish packages, Bit enables you to isolate and share components of code (subsets of files) from your existing repository that may then be installed with package managers. This also makes it possible to import the source code of your components into other repositories, continue to develop them and sync changes. This will not change your repository’s structure at all. These are the 2 key features that make it possible.
Dependency definition - Bit automatically resolves and defines the dependency tree for the components you isolate, including both package dependencies and other files from your project.
Isolated environment - Using Bit’s understanding of the components’ dependency graph, it’s able to create an isolated environment for the code you share. This effectively saves the configuration overhead for the code you share and means that these components can also be developed from any other project with their own isolated dependency graph. For example, components written in typescript can be sourced and developed in a project written in flow-typed.
Once Bit isolates code components from your project, you can share them to a remote source of truth called a Scope. You can set up a Scope locally, or use Bit’s hosting Hub. From there, they can be installed using NPM and Yarn in any of your projects.
Bit decouples the representation of the code you share from your project file structure. As a result, you can make changes to the code you share from any repository in your codebase.
You can use bit import to bring the component's actual source code into any repository, change it, and share it back to the remote Scope to sync changes across your projects. You can think of it as “automated and managed copy-pasting” that creates a distributed development workflow.
The code you share with Bit is organized in your remote Scopes which can be made available to your entire team. Bit also provides improved discoverability through a search engine and visual information for your shared code, including auto-parsed docs and examples, test and build results and even live rendering for UI components (alpha example).
Since Bit tracks the code you share throughout your codebase, 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 shared code any way you choose.
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.$ bit import bit.envs/compilers/react --compiler
the following component environments were installed
- bit.envs/compilers/[email protected]
$ bit import bit.envs/testers/jest --tester
the following component environments were installed
- bit.envs/testers/[email protected]
- Now let’s lock a version and isolate the components from the project.
$ bit tag --all 1.0.0
3 components tagged | 3 added, 0 changed, 0 auto-tagged
added components: components/[email protected], components/[email protected], components/[email protected]$ 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 sync them across your codebase.
Also see: GETTING STARTED
- Installation
- Initializing Bit on a project
- Isolating and tracking components
- Versioning and locking dependencies
- Sharing from your project
- Installing with NPM/Yarn
- Component source code distribution
- Building components
- Testing components
- Documenting components
- Removing components
- Extending Bit
- Configuring Bit
- Troubleshooting
Here is a simple React app project with 8 reusable components located in its src/components directory and one component which is the global styles.
By using Bit to track and share these components, they are now made available to discover and install from this Scope.
Share and sync UI components (React, Angular, Vue etc) between projects.
Share and sync Node.js modules between micro-services in a multi-repo architecture.
Use Bit to turn any shared-lib into a dynamic collection of individual components.
Additional use cases: GraphQL APIs, Serverless functions, Utility functions and any encapsulated, reusable functionality.
Sharing code really shouldn’t be this hard.
Instead of working hard to maintain and update multiple repositories just to share packages, Bit was built to make it easier to share code between projects and people.
Learning from what iTunes did for music sharing in the post CD-Rom, we decided to build a tool that will make managed code sharing as fast and simple as copy-pasting.
The key to Bit’s capabilities lies in its ability to decouple the representation of shared code from the project’s file system. This allows the tracking of source code even when implemented and sourced in different repositories. By integrating with the existing Git / NPM ecosystem, Bit helps to smooth the code sharing workflow and makes it easier to make and sync changes across your codebase.
You can use Bit to share code from a single repository (monorepo) or to share and sync code between multiple repositories in your project’s codebase, and even between projects.
After using it for over a year, and seeing it used by more teams and communities every day, we welcome you to join and use Bit for your work or take part in its development.
You can learn more on our website and 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