This content originally appeared on Bits and Pieces - Medium and was authored by Mike Chen
Automate Updates, Streamline Development, and Improve Collaboration with Bit Webhooks
Software development is evolving, and composable software architectures are leading the way. Unlike traditional monorepos, where all components and applications reside in a single repository, composable architectures enable teams to structure Git repositories independently while ensuring seamless collaboration and component synchronization.
With Bit’s component-driven development, teams can define their own Git repository structures, such as:
- A design system team managing a dedicated repository for shared UI components.
- Multiple microfrontend (MFE) teams, each handling a specific feature of the application in separate repositories.
- A platform team responsible for managing the shell app and core infrastructure in their own repository.
This modular approach enables independent releases, faster development cycles, and better collaboration. However, keeping all repositories in sync when a component is updated can be challenging.
- What if the design system team updates a button component?
- How does the platform team ensure all MFEs use the latest authentication API?
- Who ensures breaking changes are communicated and handled?
This is where Bit Webhooks come into play.
Bit Webhooks
Bit Platform Webhooks enable integration across repositories by triggering external actions whenever a component is updated, exported, or released. With webhooks, you can:
✅ Notify teams in Slack or Discord when a component update is available.
✅ Trigger GitHub Actions pipelines to update dependent components automatically.
✅ Deploy applications when critical components are updated.
✅ Log component updates into an external system like Google Sheets for tracking.
✅ Create GitHub Issues when breaking changes occur to ensure teams take action.
Setting Up a Webhook in Bit
- Navigate to Bit Cloud → Settings → Webhooks.
- Click Create Webhook.
- Choose a trigger event from the available options:
- Ripple CI Events: Job completed, Export succeeded, Released components
- Component Events: Export succeeded, Released components
- Organization Events: Organization updated - Select an integration type:
- Slack / Discord (direct integration available)
- Custom Template (for external services like GitHub Actions, CI/CD pipelines, or third-party tools) - Provide the target URL where the webhook should send data.
- Add custom headers (for authentication, if required).
- Customize the payload format (JSON template).
- Click Save, then Test the webhook.
Now, let’s explore five practical ways to automate your workflow with Bit Webhooks.
Use Case 1: Send Slack or Discord Notifications When a Component Is Updated
Developers need to be aware of the changes happening around their code base. With composable architectures, this awareness becomes focused on components and their modifications. Since components encourage maximum reuse, the need becomes pivotal.
Suppose an important security update is made to a component that is heavily used by others. Once a new component version is released, developers must know about the change immediately. If they continue using an outdated version, it can lead to security failure, compromising the entire application.
Staying informed about component updates is key to avoiding security and integration issues down the line.
Checking for these updates manually isn’t practical. Why not automate it instead? Teams can receive real-time notifications when a component is released in Ripple CI by setting up a Bit Webhook for Slack or Discord. This keeps engineers aware of changes instantly without having to track them manually.
✅ Ensures development teams are informed about component updates.
Use Case 2: Auto-Update Dependent Components When a Component Changes
A design system team updates a core UI button — how does the MFE team know they need to update? Manually tracking component dependencies is inefficient. Instead, webhooks can trigger an automated workflow that updates dependent components.
Webhook Setup
Set up a webhook in your design system scope so that once a new component version is released, it can trigger the MFE team's GitHub Actions pipeline.
- Integration Type: Custom Template
- Trigger Event: Released components
- Webhook URL:
https://api.github.com/repos/{owner}/{repo}/actions/workflows/{workflow_id}/dispatches- Headers
{
"Authorization": "Bearer YOUR_GITHUB_TOKEN",
"Content-Type": "application/json"
}- Payload:
{
"event_type": "update-dependency",
"client_payload": {
"component": "{{name}}",
"newVersion": "{{version}}",
"scope": "{{scopeIds}}"
}
}GitHub Actions Workflow for Updating Dependencies
Create a .github/workflows/update-dependency.yml in the dependent repository:
name: Update Dependencies
on:
repository_dispatch:
types: [update-dependency]
jobs:
update-dependencies:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v3
- name: Bit Init
uses: bit-tasks/init@v2
- name: Update Dependency
uses: bit-tasks/dependency-update@v1
- name: Tag and Export Changes
uses: bit-tasks/tag-export@v1
- name: Commit Bitmap
uses: bit-tasks/commit-bitmap@v1
This setup will;
✅ Automatically keeps components up to date.
✅ Eliminates manual dependency tracking.
Tip: If you need to limit automated updates based on whether the update is a major version, this can be checked by verifying the trigger parameters in the GitHub action.
Use Case 3: Deploy Microfrontend Shell When a Component Changes
When you develop microfrontends, you must deploy the shell application and its updated components. Why do it manually? With webhooks, you can now trigger the shell app deployment upon any dependent component updates from MFEs.
Webhook Setup
- Webhook URL:
https://api.github.com/repos/{owner}/{repo}/actions/workflows/{workflow_id}/dispatches- Headers
{
"Authorization": "Bearer YOUR_GITHUB_TOKEN",
"Content-Type": "application/json"
}- Payload:
{
"event_type": "deploy-shell-app"
}GitHub Actions Workflow for Deployment
Create a .github/workflows/deploy.yml file:
name: Deploy Shell App
on:
repository_dispatch:
types: [deploy-shell-app]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v3
# You may need to use Bit tasks or npm update depending on
# How you use components in the shell app (import components or install as pacakges)
- name: Deploy Application
run: |
npm install
npm run build
npm run deploy
✅ Ensures deployments happen automatically.
✅ Eliminates manual deployment delays.
Use Case 4: Create GitHub Issues for New Version Updates of Dependent Components
When a new version of a component is released, sometimes you want to review the change before updating. One of the best ways to do this is by creating a GitHub issue to notify them.
Webhook Setup
- Webhook URL:
https://api.github.com/repos/{owner}/{repo}/issues- Headers
{
"Authorization": "Bearer YOUR_GITHUB_TOKEN",
"Content-Type": "application/json"
}- Payload:
{
"title": "🚨 Component Updates Available" ,
"body": "New versions of components have been released in the following scopes: **{{ scopeIds }}**. \n\nPlease update your dependencies to ensure you are using the latest versions.",
"labels": ["dependency-update", "dependencies"]
}✅ Ensures teams are notified early, and updates are tracked.
✅ Encourages proactive planned updates.
Use Case 5: Track Component Update Log in a Central Location
When building large-scale composable applications, it's worth tracking the component updates in a central location.
Teams can automatically log component releases by integrating Bit Webhooks with Google Sheets, efficiently tracing history across different scopes.
Webhook Setup
- Webhook URL:
https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}:append?valueInputOption=RAW- Headers:
{
"Authorization": "Bearer YOUR_GOOGLE_ACCESS_TOKEN",
"Content-Type": "application/json"
}Payload Example:
{
"values": [
[
"{{username}}",
"{{userid}}",
"{{scopeIds}}", //'The scopes related to the job'
"{{finishedAt}}"
]
]
}✅ Automatically logs component changes in a structured format.
✅ Helps teams track component history and author details.
✅ Ensures transparency and accountability across teams.
Conclusion
Composable software unlocks scalability, flexibility, and collaboration. However, automation is still required to ensure all components stay in sync.
By using Bit Webhooks, teams can:
✅ Stay informed with real-time Slack/Discord notifications.
For Bit and Git Integrations
✅ Keep dependencies up to date automatically using GitHub Actions.
✅ Deploy applications instantly when components change.
✅ Proactively manage breaking changes with GitHub Issues for Bit and Git
Centralized Tracking
✅ Track and monitor component history efficiently with Google Sheets.
🚀 Break free from monolithic constraints — start using Bit Webhooks today for a more streamlined, automated workflow.
Thanks for reading!! Cheers!!
Learn More
- A Modern Workflow for Design System Development and Reuse
- Synchronising Components Updates Between Bit and Git: Using Webhooks
- 5 Pillars for Highly Effective Design Systems
Using Bit Webhooks in Composable Software: 5 Use Cases was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Mike Chen
Mike Chen | Sciencx (2025-02-12T08:01:03+00:00) Using Bit Webhooks in Composable Software: 5 Use Cases. Retrieved from https://www.scien.cx/2025/02/12/using-bit-webhooks-in-composable-software-5-use-cases/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.