Website • Docs • Video • Blog • Gitter • Examples
Bit works with Git and NPM to easily share and sync code between projects.
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 helping you easily isolate and share components from any repository, organize them for your team and sync changes across your projects.
Any team member can discover, use and develop components from any project so your team can collaborate, suggest updates, merge changes 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.
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 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.
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.
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.
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.
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.
- Installation
- Initializing Bit
- Isolating components
- Versioning components
- Sharing components
- Installing components with NPM
- Modifying components with Bit
- Merging component changes
- Building components
- Testing components
- Rendering UI components
- Documenting components
- Removing components
- Extending Bit
- Configuring Bit
- Troubleshooting
- CLI reference
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)
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.
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.
Bit can be useful for sharing any common component, functionality and module including GraphQL APIs, Serverless functions, Utility functions and more.
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.
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.
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.
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