How to Build and Share a Component Library
Build a UI library and share components to bit.dev to easily discover and use them across your applications.
When building more than one application, it’s better to share components than to write them from scratch or copy-paste them.
In this post, we’ll learn why and how to build a modern component library for React, Vue or Angular and share the components with Bit, so that each of them can be individually discovered and run in any new application.
Note that to share components, you might not even need a library and can share components in the cloud. If a component library is like a shared music album CD, then the component cloud is like Spotify.
You can learn more about Bit in this 5 min demo video. To learn more about how to share your component library with Bit, just keep reading below:
- Build a component library
- Share your components to bit.dev
- Discover and use components across apps
Read more:
Example
Before we start, let’s see an example of what you will gain. Here’s the Semantic-UI-React library on GitHub. Right now it’s a repository also available as a package on NPM.
Using Bit and in about 15 minutes, it was turned into a collection of individual components in the cloud. Here's what it looks like, and you can discover, use and even develop each component right in any application you’re building.
Advantages
Here are some of the advantages of sharing your library to bit.dev.
- Zero refactoring to the code or structure of the library.
- Bit automates the encapsulation and isolation of each component for development and usage in any other application.
- Instant discoverability for all the components of the library.
- Each component can be individually consumed and run out-of-the-box in any new project and application.
- Developers can suggest updates to the component right from any consuming project.
Let’s see how to share a bit.dev collection for your own library.
1. Build a component library
Many teams choose to build a library to share their components. While you can share components directly in the cloud, a library helps to separate the development of the shared components in an external reposiotry.
Here are some useful resources for structuring your library (you might also want to consider a component design system):
- Building a React component library
- Building a Vue component library
- Building an Angular component library
If you choose to build a component library, there are a few keys to keep in mind. First, remember that a library is a project like any other. Define an owner for the library, who’s in charge of developing the components.
Try to build the library in a standardized structure. For example, in React it’s a common practice to keep all components under src/components while each is a separate folder. This makes it easier to develop and lowers the learning curve for other developers to dive in and suggest a change to the library.
Keep components as independent as possible to make the reusable. For example, make sure your component styling isn’t too coupled into the components. Themes are a great way to do that. You can share theme components to your bit.dev collection and compose them with the logic components to easily fit the right styling into a new application.
It’s also vital to provide discoverability for your components. Modern tools can really help out in this one. When you share components from the library to bit.dev, you get out-of-the-box discoverability for each component.
You can search and filter components by framework, bundle-size, dependencies and more, and browse snapshot preview with your own eyes. Each component is presented with auto-extracted API docs, and can be run in a live playground so that you can make sure you want to use it in your app.
Other tools that can help ou are StoryBook and Styleguidist- which are great tools to help develop components in isolation and visually render them in your docs site. They both do a wonderful job in this workflow.
2. Share your components to bit.dev
Ok so now you have a library structured and a few components ready. Next, you’d like to use these (individual) components in different applications.
You also want to make it easy for your team to find and use components individually, and even suggest changes without forcing them to work hard and wait for PRs to the library. Otherwise, it might won’t be adopted by them.
You can achieve all that in about 10–20 minutes with Bit (open source).
You can follow the guide for “Bit for React component library” here:
For this tutorial, let’s see how it works for a given library.
Bit tracks files in your library as components and encapsulates each component in a capsule that contains everything it needs to run in other application. For example, Bit defines the component dependencies and packs them in the capsule to turn each component into a truly reusable unit.
First, install Bit and authenticate it to your (free) bit.dev account. Make sure you create the account on bit.dev before authenticating Bit and NPM to it.
# Install Bit
$ npm install bit-bin -g# Authenticate to bit.dev
$ bit login# Initialize Bit for your project
$ cd my-library
$ bit init
Great. Now you’re all set to start sharing components. Next, let’s tell Bit which components to isolate in the library. You can point Bit to specific paths or use a glob pattern to point Bit to all the components in a directory. Let’s assume they are all inside the src/components directory and use a glob pattern.
$ bit add src/components/*Awesome, now Bit tracks the components in the directory. It defined the dependencies for each and packed them in a capsule for every component.
Next, let’s define a compiler for Bit to use in order to build the code into files that can run in other projects. You can choose a compiler that fits your library and import it into your library. Let’s import the React compiler for example.
$ bit import bit.envs/compilers/react --compilerNow our components are capsuled with all their files and dependencies, and each is linked to a compiler to make sure the built code can run anywhere.
Next, let’s tag a version for the components. This will let us later control updates to components and manage the changes between our applications.
$ bit tag --all 1.0.0And… let’s export the capsuled and versioned components to bit.dev!
$ bit export <owner_name>.<collection_name>That’s it! The components from your library are now available for you and your entire team to individually discover, try online before installing and consume in any application. Any developer can even suggest updates right from the project their working on, to collaborate and build faster together.
3. Discover and use components across apps
Now that you have a collection of the components shared from your library, you can let your teammates discover and use them in their own applications.
Discover components
They can search for components using the bit.dev search, that lets them filter components by functionality, labels, bundle-size, dependencies and more.
After you save an example for each component in the playground, Bit will save snapshots for the components and present them in the collection view. You can then quickly browse and discover components with your own eyes.
To help you learn as much as possible about your components before choosing them for your app, Bit provides a live playground to run the code and let your play with every component. It also extracts the API docs for every component, to help you learn how it works. If you have unit-tests and added a tester alongside the compiler, Bit will run them too and show the results.
Installing components with npm/yarn
Here’s a React Pacman-loader component shared from this awesome React spinners library share to bit.dev.
The cool thing about Bit is that you don’t need to install the whole library. Instead, since Bit isolated each component, you can install only the component you need- and it will run out of the box in any new project.
To do that, just configure bit.dev as a scoped registry to your NPM client. You only need to do that once.
npm config set '@bit:registry' https://node.bit.devThen, just use the install command with NPM or Yarn to install the component in your application.
npm i @bit/davidhu2000.react-spinners.pacman-loader
# or
yarn add @bit/davidhu2000.react-spinners.pacman-loaderUpdating components from consuming projects
So let’s say you’d like to use this component, but you’d like to make a change. If you were to install it with a package manager, you won’t be able to easily modify the code right in your project.
One of Bit’s most useful features is the ability to make changes to your components from any other project, and sync them across your codebase.
Just use Bit to import the component from bit.dev:
bit import davidhu2000.react-spinners/pacman-loaderThen, you can just make changes to the code of the component. When done, run a quick bit status and see that the component has been modified!
Then, just bit tag it again to bump the version, and bit export the new version back to the collection. If it was previously installed as a package dependency in your app, use the --eject flag with the export command to move the component back from the source code to your package.json file.
If you bumped the version, you can now head back to the original library's project and use bit import and bit checkout to update all components to their latest version. If there are changes to the code between the versions, Bit will extend Git’s workflow to let you merge the changes between the two.
Conclusion
Libraries are a way to group shared components into an external reposiotry where they can be developed and consumed in different applications. But, you might not need another reposiotry just to share code between repositories and can share and colalborate directly over components through the cloud.
When you do build a library you can use Bit to quickly share all the components in your library to the cloud, making all of them discoverable and each of them available to develop and run in any application.
This way you can increase the resue and adoption of shared components without having to work too hard or add redundant complexity to your apps. It’s also better when team members can colalborate to suggest updates to the code they use in their own applications.
To get started, simply follow the tutorial above or visit bit.dev and follow the onboarding steps, or explore components in the community to use in your apps. You can also read through the docs, or visit the project on GitHub for any issues or to suggest PRs to Bit itself. Thanks for reading!
