Learn the basics of working with Bit in your own projects.
Are you getting 404’s?
Due to the compromised version of eslint-scope that was released earlier today, we have decided to invalidate all Bit tokens issued before 2018-07-12, eliminating the possibility of compromised tokens, as Bit leverages the .npmrc file to store its token for accessing the @bit node module registry.
To generate a new token, please run
bit logoutfollowed by
If you are using npm/Yarn run
npm login --registry=https://node.bitsrc.io --scope=@bit
To start, choose an existing repository containing components or modules you’d like to share in other projects. We’ll learn how to use Bit to make these components available to use and even develop from other repositories.
You can also use one of our example projects, but we recommend starting with your own code.
When done, you will have a collection of the components and modules shared from the project ready to share with your team.
npm install bit-bin -g
See additional installation methods.
Init Bit for your project
Initialize a Bit workspace in your project’s directory.
$ cd project-directory $ bit init
Track components with Bit
Bit isolates and tracks files or sets of files in your repository as components, to later make them available in other projects.
To track components use the
bit add command. In this example, we’ll use a glob pattern to track all the components in the relevant directory.
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 resolve their dependency graph and isolate the components.
Use the bit status command to verify that each component’s dependency graph was successfully built and resolved.
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 can use the bit add with a glob pattern.
$ bit add src/components/* tracking 3 new components
Add build and test tasks
To eliminate the overhead of configuring build and test environments for every component, Bit lets you choose and add build and test tasks which will apply to all the components you share.
Here is a list of pre-made build and test environments for you to get started with quickly.
You can specify the component’s test files with the
bit add command and
--test flag, to let Bit know these are test files and should be a part of the component.
Setting a version for tracked components locks the state of the components’ files and dependency graph, and sets a semantic version to the components- thus making each component-version immutable. When tagging a component, all of its build and test tasks will run, and only if all is working correctly, Bit will version the components.
$ 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 your components, you need to create a Scope in which they will be hosted and made available. To create a Scope, create a free account in bitsrc.io, and create a Scope.
A Scope is similar to a git repository, that can host and manage components.
Authenticate Bit CLI
In order for the local Bit client to interact with resources you created in your bitsrc.io account, you need to authenticate the client.
bit login to open a login page in the browser. Enter your username and password and return to Bit-CLI to continue.
$ bit login Your browser has been opened to visit: http://bitsrc.io/bit-login?redirect_uri=http://localhost:8085...
Unlike publishing packages, exporting a component will not change the project’s source code or force you to set up any additional repositories.
Instead, you can use the
bit export command to share components from you project’s existing structure to bitsrc.io.
$ bit export username.scopename # Share components to your Scope exported 3 components to scope username.scopename
Use components in other projects
Install with NPM / Yarn
All components shared with Bit can 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 in other project using NPM / Yarn. This workflow makes every component and module available to install for every developer, using Bit or not.
Import and develop components
bit import command you can import components and modules shared with Bit into any repository, and continue to develop them.
The sourced and modified component can then be exported back to bitsrc.io as a new version of component, or as a new component.
This workflow makes it easier to maintain and modify components, to build software faster.
Update and sync changes
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 Scope collection of components shared from this App with Bit.
- Ramda with Bit, and a matching collection of individual components from the library.
You now know the basics of Bit, and can start putting it to use for sharing code between your projects and with your team.