Synchronising Components Updates Between Bit and Git: Using Webhooks | by Mike Chen | Jan, 2025
Let’s look into a practical example of separating the design system repository from the application code.
- Design System Repository: The design team maintains a centralized repository for UI components like buttons, modals, and typography, all exported as Bit components. These components are also published into the bit platform for cross-project sharing.
- Application Repositories: Multiple applications consume these components, each maintained in its own repository. These applications rely on the design system components to ensure visual and functional consistency.
Unlike importing an entire design system package, Bit platform provides the flexibility to pick and choose the components you need for the application.
Suppose the design system team fixes a critical bug in a key component, such as a button. Every application must pull the latest version to get the issue fixed. Without automation, teams face two major challenges:
Now imagine Ripple CI in action. With its webhook feature, every update to the design system automatically triggers a CI/CD pipeline in each application repository, syncing the latest component versions. This ensures all applications use the most up-to-date components, maintaining consistency across the board.
Manual Synchronization
Without automation, teams like the one above face:
- Lost Time: Developers waste hours manually importing updated components and resolving conflicts.
- Inconsistencies: Applications using outdated components suffer from mismatched visuals or broken functionality.
- Missed Updates: Teams may forget to pull updates entirely, creating technical debt over time.
Suppose the application teams feel they need more control over the component updates. In that case, they can still create a job (e.g. In GitLab, we can create a pipeline job without executing it) whenever an external component gets updated so that the team can decide whether to run when they are ready.
