BIT.DEV: A Quick Guide To Get Started

BIT.DEV: A Quick Guide To Get Started

via comparison to Git and GitHub

ยท

8 min read

At a glance

Bit.dev is an open-source cloud-hosted infrastructure for component-driven software and its versioning using Bit. Furthermore, it provides a similar collaborative platform to GitHub, though, focusing mainly on well-documented and reusable components. As mentioned in the subtitle, compared to Git, Bit is also a version control system allowing you to extract components from existing libraries and projects. Soon, you will have some "ahh that seems familiar" moments.

1. Install & Login into Bit

So, to get started, first, let's install Bit by running the below command in the terminal:

 npx @teambit/bvm install

Once that is done, make sure to restart your terminal in order to use Bit commands. Then, we're ready to initialize a Bit workspace. In this guide, we will configure Bit for React components. If you need a sanity check, run:

bit -v

This should show you the current Bit version and that we can now go ahead with the rest of this guide.

First, we will login into bit.cloud, using the command line:

bit login

You will then be directed to bit.cloud login page on the browser where you can be authenticated by signing up or just simply using Google or GitHub.

Once you have authenticated, just like how you would create a repository in GitHub, here you will create a scope that will contain and keep track of your components.

You can do so by clicking on the create button on the top right of the page. Here we will choose the Personal option for this guide. We'll give this scope a name, let's say bit-demo. Lastly, we'll keep it as a private scope for now and then hit Create.

Screen Shot 2022-11-04 at 11.13.46 AM.png

2. Creating a Workspace

Now, to create a workspace locally, let us walk through the Bit command below:

bit new react tasks-workspace --default-scope my-org.tasks-scope

Here, bit new initializes the workspace, react is the template that we want to work with, tasks-workspace is the name of the project folder, and lastly --default-scope my-org.tasks-scope is how we are going to connect with our remote scope on bit.cloud.

So, since my username is testuser and the scope that I created earlier is called bit-demo, the complete command would look something like this:

bit new react demo-workspace --default-scope testuser.bit-demo

Make sure to modify the command to your corresponding username and scope.

Now, we can run the project on localhost:3000 by simply run:

cd demo-workspace
bit start

It might take a while for the first bit start. Once it's up, you will notice that what's on your localhost:3000 looks very much similar to what you are already seeing in your bit.cloud profile page.

Screen Shot 2022-11-04 at 11.52.19 AM.png

At this point, it's good for a quick recap and comparison. What we have done so far is created a scope on bit.cloud, initialized a workspace and connected them together. Compared to GitHub, we have essentially equally created a repository, initialized a project locally and connected it remotely.

3. Workspace overview

Let us start looking at the workspace that we have created locally. Inside the project folder, pay attention to these 2 files:

  • .bitmap: Generated to keep track of your components as we will see later. Note: This file should not be included in .gitignore
  • workspace.jsonc: Can be treated as your usual package.json file where you can install dependencies when needed using bit install <package-name>. Also, it's worth mentioning that the defaultScope property has been set earlier from our workspace initializing command. If you were to left it out while creating the workspace, you can modify the defaultScope here.

4. Create a Component

To create a component with Bit, we will use the following command:

bit create react components/hello-world --scope testuser.bit-demo

Here, bit create react let us create a React component, components/hello-world will allocate our hello-world component under ./bit-demo/components/hello-world and lastly --scope testuser.bit-demo indicates the remote scope that this component will be exporting to. Note: If you left out the last part, Bit will automatically use the defaultScope.

The component that we have just created should contain a couple of files with a basic template.

Screen Shot 2022-11-04 at 1.38.39 PM.png

Notice that if we go to localhost:3000 and refresh it, you should see the component hello-world appears. However, this component is not yet exported to our remote scope, thus you won't see it over bit.cloud. So, that's what we are going to do.

Since we emphasize the similarity between Bit and Git, in order to push something onto the remote repository, you might be familiar with this process:

git add <file-name>
git commit -m "<commit message>"
git push -u origin main

In our case here, we would want to add our newly created component, snap it and then export to the remote scope. That can be done with the following commands:

bit add <directory>/<namespace>/<component-name> --namespace <namespace>
bit snap --message "<snap-message>"
bit export

Though, since we used bit create react components/hello-world --scope testuser.bit-demo to create our component, Bit automatically added this file into .bitmap to keep track of it so we don't have to run bit add.

Screen Shot 2022-11-04 at 2.03.59 PM.png

That said, let's say if you were to create a new component manually in the same directory called hello-bit, you will need to use:

bit add bit-demo/components/hello-bit --namespace components

At this point, same with Git when we have already added the component to the staging area, it is time to take a snapshot of it:

bit snap --message "init snap"

This can be thought of as it equivalent git commit -m "message" which will snap/commit all modified files unless specified to snap any particular file.

It is worth mentioning while Git has git tag for version release, Bit also has an equivalent bit tag when needed.

Lastly, we can now export our snapped component to the remote scope with:

bit export

By now, you should be able to see the component on bit.cloud.

Screen Shot 2022-11-04 at 2.17.14 PM.png

5. Import an existing component

So far, we have created a component and exported it to the remote scope. I think it is a good time to start working in the opposite direction by importing components into our project. This will help understand what Bit is offering in terms of quickly building projects using already built, documented components and team collaboration.

Bit offers tons of pre-built components for us to import to start building projects quickly here.

Let's navigate to the buttons component of the left sidebar and have a look at its component button-link.

In order for us to use this component, we will need the package name related to it. Then, go back to our project terminal, and add the following command:

bit install @teambit/design.buttons.button-link

Notice that there is a Use button near the top right corner that has importing commands for you to copy using bit, npm or yarn. We will use bit install.

This should be very familiar as it is the same way we are used to installing packages/dependencies. Thus, if we looked over our workspace.jsonc, we should see @teambit/design.buttons.button-link installed as a dependency.

Now, let's use the newly imported component in hello-world. Navigate to hello-world.tsx then modify the file as follows:

import React, { ReactNode } from 'react';
import { ButtonLink } from '@teambit/design.buttons.button-link';

export HelloWorldProps = {
  /**
   * a node to be rendered in the special component.
   */
  children?: ReactNode;
};

export function HelloWorld({ children }:HelloWorldProps) {
  return (
    <div>
      {children}
      <ButtonLink
          linkProps={{ external: true, href: 'https://bit.cloud/teambit' }}
          icon={<img src="https://static.bit.cloud/cloud/organization.svg" />}
      >
       Button      
      </ButtonLink>
   </div>
  );
}

Save the changes and hop over to our browser localhost:3000 and click on our hello-world component. If we go to Compositions, we should see that a button component has been rendered. How easy is that, importing a pre-built component to use?

Screen Shot 2022-11-06 at 12.59.37 PM.png

Notice that we have just made some changes to a tracked component, remember how git status shows us modified files? Let us try:

bit status

Comparatively, Bit will also tell us modified files, staged files, etc and would often give us recommendations on what to do with those files. One of my favourites has to be bit diff. I'll let you try that on your own.

Screen Shot 2022-11-06 at 1.10.01 PM.png

Lastly, we will complete this quick guide by exporting our recent changes to the remote scope as a way of recapping what we have seen so far using:

bit snap --message "added ButtonLink to hello-world"
bit export

As a result, our new changes should now be available on the remote scope.

6. Commonly used commands

In this last section, I will list out a couple of more commonly used commands that you will definitely encounter and familiarize with during development especially within team collaboration in which related to branching.

Bit offers users the same concept of multiple branches, called lane(s). So here's a couple of commands you will probably need:

bit lane create <lane-name>
/* Similar to: git checkout -b <branch-name>*/

bit lane switch <lane-name>
/* Similar to: git checkout <branch-name>*/

bit lane merge <lane-name>
/* Similar to: git merge <branch-name>*/

bit lane list
/* Similar to: git branch/

You've reached the end of this Quick Guide To Bit ๐ŸŽ‰

Thank you for sticking around to learn this amazing technology with me. I hope you enjoyed the learning experience and got those "ahhh that seems familiar" moments like I did.

Happy Coding! ๐Ÿง‘โ€๐Ÿ’ป

ย