Bit.dev: Remote Hosting for Front End Components

Bit.dev is a collaboration platform for hosting web components. The designers of Bit wanted to streamline the distribution of reusable web components between teams. Through the use of Bit CLI bit’s command line interface. Users gain the ability to build components, track them and even export/import them into other projects via npm.

As an example, say that Project A needs a header component from Project B. Bit makes it so that we can distribute this component as a node module. then you can npm install it into any project. Pretty convenient right.

In the next section we’ll do a walkthrough of the CLI and later we can cover what happens to your components once you export it to remote.

Using the CLI Tool:

Ready to start? Well the first step is to get the CLI tool. Here’s how to install it.

NPM users can run this command:

                        npm install bit-bin -g

Those with YARN run this instead:

                        yarn global add bit-bin

Bit and its gadgets should now be globally installed on your system. Let us verify that the install went smoothly, run the version command:

                        bit --version

As the name would suggest, this command displays the CLI’s version number. If anything, other than the version number were to output, something likely went awry during installation. Go to Bit’s support page, if you need help.

After install, the next step in the procedure, would be to initialize a bit workspace. In terminal, navigate to the root folder of your project’s workspace and run:

                           bit init

The init command adds bit into the package.json of your workspace. It will also add a bit map file to keep track of all components in this workspace.

Component Tracking (sub header or something):

Tracking a component means to keep note of all changes applied to this code. Much like with git commit hashes, we can tag versions of our code and revert to them if needed.

To start the component files must be added to the bit workspace.

     bit add src/components/NewComponent --id new-component

Bit add sets up a code repository that will build component files while also calculating external dependencies. As a good practice, make sure that component’s with multiple files, will group those files under one directory.

Export Component to Remote Collection:

Before exporting a component ensure that the changes made have been tagged with a version number. To create the initial tag use the bit tag command:

                      bit tag <component_id> 0.0.1

Along with the initial version number maybe “0.01”. Anything you’d like to benchmark a change in this repository make sure to the tag command again to increment the version.

Bit export pushes our local repository to the remote collection. This command must be used in conjunction with the path to a collection:

                bit export <username>.vue-tutorial

Install via NPM

Once exported up to bit.dev you can view the component online at this url: bit.dev/<username>/vue-tutorial>

On the site users can create interactive demos, for people wishing to import they’re code. The demos alongside proper documentation will ensure that people can use the component correctly.

Those with access to your collection can then install components into local projects using either npm or yarn.

            npm i @bit/<username>.<collection>.<component>
           yarn add @bit/<username>.<collection>.<component>

Now, the component should be added into your package.json file and you can import it anywhere in your project, using this path: @bit/<username>.<collection>.<component>.

Thank you all, so much for reading this article! Feel free to like and comment below. All questions and feedback are appreciated.