Introducing Bit.dev Webhooks

Connect your toolchain and get notified on component events- to trigger anything!

Bit.dev now provides Webhooks, giving you the freedom to connect your component platform to anything else in your workflow and toolchain.

Using Webhooks you can make sure important events in the lifecycle of components, like version updates, can trigger actions anywhere. With the right Webhooks in place, you can trigger processes like builds, deployments and anything else. The only limit is your imagination.

We’ll introduce Bit.dev Webhooks, learn how to use them, and show a quick real-world example of how to connect Bit.dev to Asana so that every new component version gets reviewed by a designer- automatically.

A short intro to Webhooks

Webhooks are a common way for one app to notify of an event, in real-time, to another app. Webhooks are often referred to as “reverse APIs” because the app consuming the data does not do so by sending an HTTP request to another API — instead, it makes an API available for the app sending the data (usually, a POST HTTP request sending data in a JSON format).

Webhooks in Bit.dev

Bit.dev is the platform for components. It’s where all your components are hosted, managed and updated by different team members who use them.

Bit.dev “knows” about every meaningful event in the lifecycles of your components: publishing, consuming, updating, deprecating and so on.

As Bit.dev lives side-by-side with other tools in your workflow, Webhooks help you create event-driven communication between different tools/services.

For example- when there’s an important event like a new component version available on Bit.dev, you might want to notify different dev services and processes like automated builds, tests, and deployments.

When the new component version introduces visual UI changes, you might also want to notify designers that they need to review it.

So, to communicate that, both to machines and humans, you need Webhooks.

Note that Bit.dev already offers two out-of-the-box ways to notify on changes to shared components: Automated PRs to Github repositories and automated Slack notifications . Webhooks are now added to provide more freedom to developers, which can not integrate Bit.dev to more tools and trigger event-driven actions.

Setting up a Bit.dev Webhook

Just like tango, it takes two for Webhooks — a transmitter and a receiver. Here, we’ll only discuss setting up the part that sends data, Bit’s Webhooks.

1. You should have a Bit.dev organization (an organization is an entity that groups all component collections)
2. You should have at least one collection (collections are essentially scopes of components, used to organize components, set permissions, etc.). This collection has to be owned by your organization and not by your user.
3. Enter your organization and click on “Integrations” (on the top right corner).
4. Install the Webhooks integration.
5. Configure your Webhooks preferences.

The snapshot below shows four configuration fields:

• Actions: Select on which events you’d like to be notified.
• Collection : Select the location or scope of components, to be notified of.
• Webhook URL: Insert your API endpoint (the receiver of data).
• Secret Token: Insert a value that would serve as a way to authenticate the source of requests made to your API.