Learn how to use Bit in a few simple steps.
These simple steps will teach you the basics you need to know for working with Bit, all the way from sharing components right from your project to using them in any other project with your favorite tools. When finished, you will also have a beautiful gallery of components ready to share with your team.
Let’s get started with these 4 quick steps:
npm install bit-bin -g
See additional installation methods.
Choose components to share
Init Bit for your project
Run this command to initialize a Bit workspace.
cd project-directory bit init
Track files with Bit
Bit tracks and isolates files in your repository, and set them as components.
To track components use the
bit add command.
bit add src/components/* # use a glob pattern or a specific path to track multiple components or a single component.
Bit automatically scans the files it tracks for their dependencies (packages and files), to figure out their dependency graph.
bit statuscommand to make sure that each component’s dependency graph was successfully built and resolved by Bit.
Let’s track the components
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
To track these files as components we’ll use the
bit add command with a glob pattern.
$ bit add src/components/* tracking 3 new components
Add build and test tasks
Bit supports managing build and test tasks for each component. You can add a Bit build/test task to your project, and they will be set and run for each tracked component.
Here is a list of curated build and test environments, for you to get started quickly.
Version a component
Setting a version for a component locks the state of the component files and dependency graph, and sets a semantic version to the component, thus making each component-version immutable. When tagging a component, all its build and test tasks will run, and only if all is working correctly, Bit will version the component.
$ bit tag --all 1.0.0 3 components tagged | 3 added, 0 changed, 0 auto-tagged added components: firstname.lastname@example.org, email@example.com, firstname.lastname@example.org
Export versioned components
Create a Scope
In order to export a component, you need to create a free account in bitsrc.io, and afterwards create a Scope. A Scope is a remote Bit workspace that can host and manage components.
Unlike publishing packages, this will not change the project’s source code or force you to set up any additional repositories.
$ bit export username.scopename # Share components to this Scope exported 3 components to scope username.scopename
Use components in other projects
Install with Yarn / NPM
Components shared to Bit can automatically be installed with the NPM / Yarn client or with any package manager that implements the CommonJS package registry specification.
You can now install the components you just exported them with NPM / Yarn. This allows projects and developers which are not familiar with Bit, to still use Bit components.
It is also possible to source the components directly to another project, using Bit. If you choose to source your components, you can also modify them later from the consumer project, and export the modifications back to bitsrc.io as a new version for that component.
Want more examples? We’ve created a few example projects that will help you learn how to use bit (don’t forget to take a look at each project’s
readme file on github):
- A React movie-app with UI components, and a matching collection of components shared from this App with Bit.
- Ramda with Bit, and a matching collection of of individual components from the library.
You are now ready to work with Bit and easily share code between your projects.
Feel free to learn more through the different sections of the docs, search the Bit website for components or visit Bit on GitHub.