Noncommital Premarital Mischief
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    bit-binpublic

    Bit community hub

    apache prs Gitter chat Appveyor Status Circle Status styled with prettier Tweet

    WebsiteDocsVideoBlogGitterExamples

    About

    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.

    Contents

    How It Works

    Seamless code sharing

    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.

    Installing components with NPM

    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.

    Simultaneous development from different projects

    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.

    Discoverability

    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.

    Extending Bit

    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.

    Getting Started

    Example workflow

    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
    1. First, let’s install Bit.
    $ npm install bit-bin -g
    1. Let’s initialize Bit for the project.
    cd project-directory
    $ bit init
    1. 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. 
    1. 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
     
    1. 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
    1. Now let’s share the components to a remote Scope.
    $ bit export username.scopename  # Share components to this Scope 
    exported 3 components to scope username.scopename

    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. 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

    Usage

    Basics

    1. Installation
    2. Initializing Bit for your project
    3. Isolating and tracking components
    4. Versioning and dependency defintion
    5. Sharing components
    6. Installing with NPM/Yarn
    7. Component source code distribution

    Advanced:

    Usage:

    Examples

    Bit with React / Vue

    Tutorial: Bit with React.

    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:

    React Hero component

    Node.js modules

    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 (!).

    Shared libraries

    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.

    Motivation

    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:

    Supported Languages

    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).

    Contributing

    Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.

    See Contributing.

    Feedback

    Feedbacks and questions are more than welcome via Bit's Gitter channel.

    License

    Apache License, Version 2.0

    Analytics

    Keywords

    none

    install

    npm i bit-bin

    Downloadslast 7 days

    127

    version

    0.12.11

    license

    Apache-2.0

    repository

    github.com

    last publish

    collaborators

    • avatar
    • avatar
    • avatar
    • avatar