Introduction to Bit.dev (Bit Harmony) for managing our React Native components

Bit.dev is an infrastructure for managing components from different frameworks. This is very interesting when it comes to reusing components between different projects, documenting them, collaborating in their development and controlling the versions of these components.

In this guide I will show you how to install and configure Bit Harmony for React Native components. However, you can find the guide to reuse, build, and manage React Native components using Bit Harmony, at the following link:

Using Bit.dev for React Native Component Management

Installation

The first thing to do is to install Bit globally on the machine where the components have been, or will be implemented. To do so, BVM (Bits Version Manager) must be installed using NPM, and then Bit Harmony will be installed through BVM.

1 — Install NPM (If you already have it installed you can skip this step)

You can check if NPM is installed executing the following command:

npm -v

If it’s not installed, you can get it by installing NodeJS using the Download | Node.js (nodejs.org) installers in case of Windows and MacOS, while in case of Linux Distributions I recommend to install it with the package manager itself, as indicated in this guide Installing Node.js via package manager | Node.js (nodejs.org)

2 — Install BVM and Bit

If NPM has been successfully installed, to install BVM simply run the following command:

npm i -g @teambit/bvm

Once the installation is complete, BVM can be used to install Bit using the command:

bvm install

If the bvm command does not work because it is not found or is not available, then, depending on the platform, can be resolved by running one of the following commands:

Windows:

setx path "%path%;%LocalAppData%\.bvm"

MacOS/Linux:

echo 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc

After executing it, you have to restart the terminal or PowerShell.

This command adds the environment variable to be able to run it from the terminal or PowerShell.

After finishing the installation you can check that Bit has been installed correctly by executing the command:

bvm version

It should display something similar to this

current (used) bvm version: 0.0.24
latest available bvm version: 0.0.24current (used) bit version: 0.0.453
latest installed bit version: 0.0.453
latest available bit version: 0.0.453

Finally, we are going to check that the bit command works correctly, to do this we simply have to execute:

bit

If all goes well it will display a list of all available commands. Otherwise, if it does not find the command, it may be that the environment variable has not been set correctly. To solve this problem, depending on the platform, you have to execute one of the following commands

Windows:

setx path "%path%;%LocalAppData%\.bvm"

MacOS/Linux:

echo 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc

After executing it, you have to restart the terminal or PowerShell.
This is actually the same solution as described above for when the bvm command is not found.

Creating an account and a collection

Before starting with the configuration it is advisable to create a user in bit.dev and, with this user, create a collection where you can upload, manage and share the components. Otherwise all the work that follows would be done locally, not taking advantage of some of the benefits provided by this platform.

After creating the account in bit.dev, we can create a collection where to upload the components that we decide to export to the platform.
In my case I will simply create a personal collection, with the name “test “, in the “Harmony” version, and with private access.

The name of the collection and whether it is a team or personal project is relevant, since later it’s required to establish the scope of the components, their identifier and the way to access them.

Once this has been done, we have to log in to the machine where we have installed bit by executing the following command:

bit login

This command will open a window in the browser to log in with the account we have just created.

Configuration

The initialization and configuration of the bit workspace is performed in a similar way in the case of creating a new project from scratch, and in the case of using an existing one with previously implemented components.

1 — Create a new React Native project

In this step we are going to create a new project from scratch, so you don’t have to do it, and you have to skip it if you intend to initialize and configure the bit workspace for existing React Native projects.

First we locate the folder where the project folder will be created.

In my case:

cd C:\Users\brand\playground

In this folder we execute the command:

npx react-native init <Project name>

This will create a folder with the same name as the project, which will contain the project files and the application code.

(Optional) In case you want to create the project to use TypeScript, instead of the previous command you have to execute the following command:

npx react-native init <Project name> --template react-native-template-typescript

As an example I will create a TypeScript test project using the following command:

npx react-native init test --template react-native-template-typescript

I will use this same example to better understand some of the commands that will be explained below.

2 — Initialize the Bit Workspace

In this step we are going to initialize the Bit workspace of the project, for this we locate inside the React Native project folder.

For the example created above it would be:

cd C:\Users\brand\playground\test

Once inside this folder we will execute the command:

bit init --harmony

This command creates the following files within the project:

• workspace.jsonc - This is the workspace configuration file where the policies of the workspace and its components are established.
• .bitmap - This is an auto-generated file to map the versioned components and their physical location.
• .git/bit Workspace version management files.

3 — Configuring the Bit Workspace

After initializing, the only thing left to do is to configure the workspace to use the React Native look and feel and the scope that has been previously created.

To do this, modify the file workspace.jsoncin the part "teambit.workspace/workspace" where it says "name": "my-workspace-name" change “my-workspace-name” to the name you want to give to the workspace, in my example I will put test and the result will be as follows "name": "test"

A little further down in "teambit.workspace/workspace" where it says "defaultScope": "my-scope" change “my-scope” to the name of the scope where the components are going to be added, in this case we will use the one previously created. To do so, it must be set as follows:

"defaultScope": "<Username | Team Name>.<Collection name>"

In this way, the previously created example would look like this:

"defaultScope": "brandres.test"

Since let’s remember that the collection was created as personal and with the name “test”.
Finally we have to replace this:

With this:

It can be seen that in “teambit.dependencies / dependency-resolver” in the peerDependencies policy, the version of react that is specified in package.json must be set as a dependency of all the components , since this version is the one we have installed in the project, and it is the one used to develop the components. Specifying this is very important since by default Bit uses other dependency policies that can cause problems when installing the component in other projects using npm ≥ 7

Then, the following command must be executed:

bit install

This command is used to install the dependencies and packages needed for the project. Finally we would start the development server with the commands:

bit compile
bit start

This server can be accessed through a browser by entering http://localhost:3000. Here we can view and manage different properties of the components that have been versioned locally in the workspace.

I hope this guide has been useful, I will continue writing tutorials about the most relevant aspects of Bit, and if you have any questions or suggestions, please let me know.

Thank you very much.

How to use Bit Harmony to manage React Native components:

Using Bit.dev for React Native Component Management