You have a few modules you'd like to share across different projects. These could be UI components, micro-frontends, utility functions, services, or even shared configuration files. But very quickly you find out this is not as simple as you might have thought.
Your shared modules require a proper setup to be developed, tested, packages, and versioned independently from the projects that consume them. They also need to be documented and easily discoverable so that you or other developers can easily discover and use them.
Bit platform simplifies the process of creating, sharing, and managing shared modules by providing a cloud-based solution that allows you to discover, edit, review, test and build a shared module using nothing more than a web browser.
It does that so you don't have to set up a complex monorepo with multiple build pipelines and development environments, or maintain separate repositories for each shared module or group of modules.
1. Set up a Bit Platform account
Head over to bit.cloud and sign up for a free account.
2. Create an access-controlled scope]to store your shared components
Bit components are modules that can be maintained, shared and versioned independently. They are stored in access-controlled scopes on the Bit Platform. Head over to bit.cloud/create-scope to create a new scope.
Note that this workflow leaves you completely free of any repository setup or maintenance.
For example, I'll create a scope called cloud-demo.
3. Start a new Bit Cloud Workspace
Once created, you'll be presented with the following options:
Start locally: To install Bit on your local machine and initialize a new Bit workspace.
Create a workspace: To create a new Bit Cloud Workspace instance that will be maintainable using a web browser.
I'll choose to create a new Bit Cloud Workspace. My workspace is already configured to use the cloud-demo scope I created earlier as the default scope for my components.
4. Create a new component
Using the standard cmd + shift + p shortcut, open the VSCode command palette and select Bit: Create new component.
This will provide a list to choose the type of component you want to create. I'll choose React option and name my component button.
Nested under my cloud-demo directory, I now have a new component called button that I can start working on.
The component files are already scaffolded for me, These include a generic implementation file, a test file, and a documentation file, and a "composition" file that allows me to create examples of how the component can be used.
The component is already set up with a Bit Reusable Development Environment that defines the development environment and build pipeline for it (you can create your own envs as well).
I've updated my button component and added a few component examples to the composition file:
To see how the component looks and behaves, I can run the bit: start command in the VSCode command panel, or run bit start in my terminal.
This will start a local development server that will allow me to see the component in action. The terminal will output a clickable link that will open the Workspace UI in a new tab in the browser.
The component page which includes the component examples, documentation with live playgrounds, the API reference, and additional details about the component such as dependencies and dependents will also be available for others to view once the component is versioned and stored in the scope.
5. Tag the component with a new release version and store it in the scope
Using the VSCode command palette, I can run the Bit: Snap/tag local changes and export them command to tag the component with a new release version and export it to the scope.
The 'Tag and Export' command run the component's build pipeline in Bit Platform's CI service, Ripple CI, to ensure the component is built and tested correctly before it is stored in the scope.
The component's build also include a 'Package and Publish' step to make it consumable as a standard Node package.
6. Install the component in a project
One the build is done and the component is stored in the scope, it can be installed in a project as a standard Node package using bit/npm/yarn/pnpm.
In addition to that, at any point in time, I can go back to the component in the Bit Cloud Workspace and make changes, test them, and tag new versions of the component using the 'Edit component' button in the component page.
This workflow does not include a review process for the changes made to the component. However, Bit Platform does provide a collaborative environment where you can review and discuss changes to shared modules with your team.
Learn More
Create and Edit Shared Modules in The Cloud | by Eden Ella | Sep, 2024 | Bits and Pieces
Effortless cloud-based component management and Collaboration
blog.bitsrc.io
Hope AI: A Code Assistant for Composable Software | by Eden Ella | Jul, 2024 | Bits and Pieces
An AI assistant that understands your codebase, generates, builds, tests, and releases reusable components with previews and documentation.
blog.bitsrc.io
A Modern Approach to React Development | Eden Ella | Bits and Pieces
Build composable and modernized React apps with Bit!
blog.bitsrc.io