Let your apps and services “know” when components are added, removed or updated — to boost your workflow!

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 now 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.

A POST request from Bit.dev will have the ‘Secret Token’ in its header, at x-bit-token

The data (JSON) will have relevant component IDs (an array), the collection name (the scope of these components) and the username of the action initiator.

For example:

{
  "action": "export",
  "bitIds": [
    "collaborative-org.shopping-cart-collection/button"
  ],
  "username": "eden"
}

Connect Bit.dev to Asana — to automatically send UI changes to review by designers! 🎨

You know how difficult is it for designers to keep track of UI code changes. Over time, every small code change or UI update may compromise visual consistency in your apps.

Let’s see how to use Webhooks to make sure every new component version automatically creates an Asana task, asking a designer for review!

For a short and simple example, I will be using Zapier.

First, I’ll choose ‘Webhooks by Zapier’ as the ‘App’. Then, I’ll set the triggering event to ‘Catch hook’.

I’ll then copy the URL generated by Zapier and paste it as my ‘Webhook URL’ in Bit’s Webhooks configuration page. This will serve as my URL for component exports made to the ‘shopping-cart-collection’.

I’ll then export a component and ask Zapier to verify it catches the request

I’ll then select the step to be initiated as ‘Asana > Create a new task’ and pick my ‘Review UI Components’ project, a project I’ve created just for that. It’s a way to group all review requests but also keep a log of all component exports.

This will create the following task in Asana:

Awesome! Now we have an automatically-created task on Asana, that asks someone to review my changes to the component.

And here’s the cool part: Thanks to the Bit.dev playground, the designer can review the new or modified component right on the platform. What they’ll see is the actual code examples rendered, and they can even play with them live.

Now the designer can quickly judge if my code changes properly follow the design. Then, they can provide on-the-spot feedback in Asana!

Conclusion

Webhooks let you freely connect Bit.dev to your development workflows and toolchain. Getting notified on important events in the lifecycle of components, like new component versions, can trigger important events at the right time.

Apart from driving effective build processes and other automatic actions, Webhooks can help your team build together and collaborate on components at scale. For example, you can make sure every component update is sent to the right design or task management tools for review and discussion.

You are welcome to jump in and play around, and don’t forget to join us on Slack to chat with the team, exchange ideas and share your feedback.

Cheers,

Team Bit 🌹

Special thanks to Josh Kuttler for creating these webhooks!