React Component Monorepo Library Made Easier with Bit

Develop, build, test version and publish individually isolated components in your library, with 0 refactoring or configurations.

Sharing components between different repositories and projects is very effective for code reuse. In the case of UI components, it’s also an effective way to make sure your UI stays consistent across different applications.

But, sharing components can also be a challenge as trying to publish each component would force us to split our repository into multiple repositories and publish each component individually. So, sometimes it’s better to keep all components in one single repository and still publish each individually. This architecture is often referred to as a multi-package repository or monorepo.

Multi-package monorepo for components

Great aid tools like Lerna can help automate some of the overhead around a multi-package monorepo, like versioning and publishing each package. However, it still requires a lot of overhead since each package still needs to be boilerplated and maintained just like it was a standalone repository.

When it comes to a multi-component library, this overhead can be heavy, so it's rare to see such a library refactoring in order to publish each component.

In this post, we’ll see how you can get the same results without the overhead, by leveraging Bit’s ability to isolate, version and publish components as packages from an existing library- with zero refactoring or overhead.

Furthermore, you will be able to isolate the components in the repo so that you can build, test and version each of them separately in full isolation. Since Bit controls the relationships between the components, you can update a component and bump a version only for that component and the components depending on it. This means that not only you can publish individual packages from the repo, but you gain modular control over its development.

For any questions, please don’t hesitate to comment or reach out.

How it looks…

Here is a very nice open-source component library called React foundation. Using Bit, and with 0 refactoring at all, each of its components was published as a standalone package. You can view and install them in this collection.

Build, test, version and publish individual components in the repository

Bit’s open-source CLI-tool lets you virtualize the isolation of components in the repository. This is done using the bit add command, which points Bit to paths in the repository where the components are located.

Develop each component in isolation

Bit will then automatically define and encapsulate every component with all its dependencies, turning it into a standalone unit that can be built, tested and run outside of the project in isolation. This process automatically creates a package.json file for every component, which will Bit will help manage and update upon detected changes to the component’s dependencies.

Zero build configurations

Since each component should be built and tested on its own, Bit lets you link a compiler and tester to all the components in your project’s workspace. You can also choose to link a testing environment to run each component’s unit-tests. By running the bit build and bit test commands, you can then build and test each component in full, true isolation from the rest of the project.

Version and update individual components and their dependants

Using the bit tag command you can version the components in the repo with semver rules. Now, each component is given a version that can be indecently bumped when there are changes to the component itself. No need to update a version for the button component when you only change an unrelated component like a slider. But, if you change a component that has other components depending on it, a Bit will prompt you to update the dependent components as well (it reads the package.json).

This means that any moment you can run bit status to learn which components are tracked and encapsulated in the repo, which are modified and needs a version update (or which has dependencies updated and needs to be updated too), and so on. And, obviously, there are symlinks too :)

Publish each component individually

When ready, you can publish all the components as individual packages, which can be separately consumed and updated in other projects.

The experience you get for developing the repository is that with 0 to very little refactoring you can instantly isolate, build, test, version and publish each component in the repository separately. When changes are made to a component, Bit lets you view, learn and control exactly which other components are affected and choose if you want to update all at once.

Example workflow with Git-like commands

Once you install Bit and authenticate it to bit.dev. This means you can now start tracking components in your repository and publish each as a package.

Let’s assume the following library structure.

├── package.json
├── src
│   ├── components
│   │   ├── Accordion
│   │   │   ├── Accordion-spec.js
│   │   │   ├── Accordion.js
│   │   │   ├── Acordion.module.scss
│   │   │   ├── index.js
│   │   ├── Button
│   │   │   ├── Button-spec.js
│   │   │   ├── Button.js
│   │   │   ├── Button.module.scss
│   │   │   ├── index.js

In this case, we’d like to individually version and publish accordion and all other components in the src/components directory.

Using Bit, we can virtually encapsulate these components without having to refactor the repository at all, or boilerplate each of them as a package.

First, let’s initialize a Bit workspace for the repository and commit the newly created .bitmap file to Git so the two can be synced in harmony.

$ bit init

$ git add .bitmap
$ git commit -am "initialized an emtpy bit workspace"
[master a4eddaa] bit initialized for project
 2 files changed, 11 insertions(+)
 create mode 100644 .bitmap

We’re now set to start versioning and publishing components.

The bit add command tells Bit to track components in a specific directory. It bundles all the files of each component as part of the component and will analyze the code of each component to define all its dependencies. You can see that Bit creates a package.json for each component that you can view as part of the component. In this example, let’s run it like this:

$ bit add src/components/*

Bit will write to its models all the data of the components (run bit show to view each component’s dependency graph, and bit status to learn that Bit successfully identified all files and dependencies for each component). If some are missing, you will need to bit add them separately.

Next, let’s define a compiler that can build the code into files that can run in other projects. You can find all the available compilers here. In this case (React library), let’s choose the React compiler and install it in the workspace.

$ bit import bit.envs/compilers/react

Bit will apply this compiler to all the components in the workspace, which means you save overhead for defining the configurations of each component.

Next, let’s set a version for every component. Versioning component independently is very useful when issuing updates to separate components, and for cross-repository component sharing and development (see below). For now, let’s set all components to version 0.0.1.

$ bit tag --all 0.0.1

Great! Our components are ready for export. Next, let’s bit export them to the bit.dev collection you’ve created earlier. Note that Bit is distributed and you can host components on any server, but bit.dev provides a registry from which you can install each component as a package. It also provides features for rendering, searching and collaborating over components.

$ bit export user-name.collection-name

And that’s it! You can now browse the collection, save examples for each component (which will also show up as snapshots in the collection) and- install each of them as an independent package with the NPM and **Yarn **clients from the bit.dev registry. No refactoring needed, no overhead.

Install and update individual components

Once your components are published, they become available in the bit.dev component hub, which also functions as a registry from which you can install components using package managers like npm and yarn.

The bit.dev component hub also provides discoverability for your components via a components search-engine and visual collections with preview snapshots. Each component’s example is rendered, and its API docs are auto-extracted and presented in the component page so you can learn how it works.

To install a component, just use the command in the installation pane in the component page.

Example: https://bit.dev/primefaces/primereact/chart

Note that if you haven’t installed Bit and run the bit login command, you will first need to configure bit.dev as a scoped npm registry. If you run bit login first, there’s no need to do that.

npm config set '@bit:registry' https://node.bit.dev

Then, just run the install command from the new project you’d like to consume the component in.

npm i @bit/primefaces.primereact.chart
# or
yarn add @bit/primefaces.primereact.chart

And that’s it. Your component is now individually installed as a package dependency in the new project and can be used like any other package. Since you only install the component you need, you avoided installing the whole library and prevented redundant weight and dependencies in the project.

Update single components individually or at bulk from any consuming project

Without having to publish or update the whole library, and without context switching!

When you publish many components from your library, people can choose and consume individual components in their projects. That’s useful, but in some cases, people will still need to make changes to the component before using it. It’s best to avoid context-switching for doing so.

Using Bit, you can bring the source-code of every component right into a new project and make the changes you need. Since Bit will still manage the “cloned” component, changes can be versioned, published and even updated back to the original project or other projects.

This means people can adopt the components without having to dive-in to the whole library to suggest a pull request, which might or might not be accepted.

To bring a component’s code into a different project and edit it, use the bit import command that appears in the same pane in the component page. Note that you should have Bit installed and a bit workspace initialized in the consuming repository to do that, so Bit can track and manage changes.

For example:

bit import primefaces.primereact/chart

Then, just make your changes, run bit tag again and bit export the new version. If you run bit status, bit will show you that the component is changed and which other components are affected by the changes too and should be updated. No need to update everything else, Bit lets you control the dependency graph of each component to easily update only what you need.

Conclusion

When you are building a component library and want to use its components in different projects or applications, you can leverage tooling like Bit to develop components in isolation in the library, while controlling their dependency graph and being able to build, test, version and publish each component.

By making them discoverable and letting other people install and even update individual components in their own projects, you increase the adoption of your components which helps to standardize your development across repositories and keep your UI consistent across apps for your users.