Sharing React Components across Multiple Applications with BIT.dev

Componentization and re-usability are known concepts in the software engineering world. A reusable component in React is a piece of UI element that performs a specific function and can be used in various parts of a single or separate application to build more than one UI instance.  

For example, button is a UI element that can be used in various applications, and each of them handles different responsibilities. But button has lesser functionalities(attributes) to handle, like onclick, type, style, and size. Button has a few dependencies and many dependents. This relationship shows that this is a highly reusable UI component.  

We often need the same component all over the place, and at some point, we will end up writing the same code over and over in different applications. Sometimes it is ok to write or copy the same code in various projects if components are smaller, like button, but what if components are large or complex components?  

Here component sharing comes into the picture between different component-based applications developed with React and VueJs.  

Ways to share components across apps 

1. NPM – Code sharing registry and widely used dependency installer method 
2. Bit – Component sharing through bit.cloud 
3. Lerna – a tool to manage Mono repos with Git and npm 
4. Multiple Git repositories – Reusable code in single Git repo and used in others as a package 

NPM and BIT / Bit. dev  

Bit is an extensible OSS tool for component-driven development. It is used to develop, source control, and collaborate on individual components. 

We may get confused between bit and npm, but bit is neither a package registry nor a package publishing place. Bit is an extensible component-driven development. We can develop and export the components in a remote workspace in collaboration and extend components separately. Also, we can push individual components to bit repo. At the same time, npm is a package manager and publisher based on the Javascript language. We can build standalone packages with the help of npm. 

In component-driven development, one advantage Bit provides, is the visibility of source code in the app where it is used. Bit also manages the versioning of the components. 

Let’s bit. dev  

Bit is just like git, however, only for component-based applications. Bit is a distributed version control system for components and their dependencies. 

What is bit.dev? 

Bit. dev is a cloud-based platform for components where we can modularize and reuse with Bit. We can build small, independent components with the help of bit. Also, we can develop our service on top of Bit components. 

Fig. 1 Common developers use case
 

Let us understand common BIT Vocabulary before we get to the commands. 

• WORKSPACE – Group of files or directories which provide context for components to be versioned, composable, and maintained 
• SCOPE – This is a collaboration server for components where we can put together all components 
• STATUS – Bit workspaces track components’ changes and show each component’s state in your project’s workspace. 
• NPX – is a tool to execute packages in that directory only 

• INSTALL – after installation, the component resides in the node modules directory. 
• FORK – copies code from remote (do not have permission to edit) workspace to your workspace  
• IMPORT – copies code from remote (have permission to components) workspace to your workspace where you can make changes as per requirements 

Let us continue with actual commands 

Installing BIT 

> npx @teambit/BVM install
 

Initiate BIT workspace 

We need to initiate Bit Workspace on bit.cloud. This is a distributed component service where we can create new components, use and modify existing components, and export your changes. 

Run the below command for bit workspace 

> bit new react my-wiki –default-scope my-org.wiki 

The above command will create react project named my-wiki with bit default scope.
But if we want to initialize an existing project with the bit then Go to that project and run the below command 

> bit init 

It will provide the below output 

> successfully initialized bit workspace  

To start the server for the bit project, you can start it by using the below command 

> bit start 

OR 

> npm start 

Page Break 

Create a remote scope 

A scope is a server where we can collaborate, export, and store components remotely. 

Then we must create one scope in bit.cloud account. For that, go to bit.cloud, create your account, and create scope under it. 

Then go to your local project directory and find worspace.jsonc file and update “defaultScope”: “organisation_name.your_scope_name” 

This will help while adding and exporting components from a local project to bit.cloud repository 

Then choose or create components which we can use in other projects like buttons, dialog boxes, forms, cards, or navbars.  

After creating a shared(common) component, add that component to your bit.cloud by the below command 

Add the component to bit locally 

> bit add folder_path/folder_name  

After adding components on bit locally we must tag those components 

> bit tag –message “initial message.”  

Export changes to remote scopes 

After tagging component changes, we can export those components to remote scope on bit.cloud 

> bit export 

Now exported components can be used by any developer in any other project if the access to that scope is public. 

Install component [NPM] 

If you only want to use shared components in your project and you do not want to change or maintain them, then you must install them through bit or npm by the following command 

> bit install @afourtech/shared_components.dialog 

> npm install @afourtech/shared_components.dialog 

Import component [Code sharing with the same version] 

The components which need to be maintained or updated for the project then we must import from remote scope into the local workspace 

> bit import afourtech.shared_components/dialog   

After importing successfully, its source code has been checked into your workspace, and the package gets generated into its node_modules directory. The component is imported into your workspace and can be maintained and exported like other components. 

Sometimes there are cases where your imported components have used other or imported other components i.e.; it is dependent on other components, then we must include dependant components also. 

To achieve the above scenario, we can run the below command into the workspace 

 > bit import  – -dependents 

Fork Component [Code sharing with branch] 

For the components we want to use in our project but do not have write access for that component, we can fork that component into our project and then edit it as per need. While forking, it is copied into our workspace default scope 

Below is the command to fork the component from remote 

> bit fork afourtech.shared_components/dialog  

After installing, importing, OR forking components from a remote workspace, we can just use them as it is by importing that from the actual path in needed files 

Like below is an example 

>import Dialog from @bit/afourtech.shared_components.dialog  

Developer use cases: 

1. Share component uses it with NPM in another app. 
2. Share a component from an App, import it into another App and see the code in both apps
   Always change the code of the shared component from one app only. 
3. Share components and allow the creation of branches separately in both the apps 

BIT sharing and security 

Bit proposes security through login while sending data to bit. Also, we can add the SSH key to bit.cloud for exporting components. 

Below is the command to log in to bit. 

 > bit login 

This command will open bit.cloud website, where we can log in to bit.cloud account. 

And we are free to export and reuse components.  

Bit components that have been exported to the organisations’ scope, then all the organizations’ members can access those components in their workspace.  

References: 

https://bit.dev/docs/quick-start 

https://bit.cloud/ 

Authored by Sonali Barkund and Gaurish Abhisheki