Widgetbook Cloud x Bitbucket

If you want to use Widgetbook Cloud with your existing Bitbucket repository, here's a step-by-step guide to help you get started.

  • Setup Widgetbook Cloud Project

    Create a new project in Widgetbook Cloud by importing your Bitbucket repository. You might need to connect your Bitbucket account to Widgetbook Cloud to access your repositories.

  • Add API Key as a Variable

    Add WIDGETBOOK_API_KEY to your Bitbucket's Pipeline Variables.

  • Create Bitbucket Pipeline

    To upload a Widgetbook Build for each new commit in your repository, you need to setup up a pipeline in Bitbucket that runs on every push.

    Create a new Bitbucket pipeline file in your repository under bitbucket-pipelines.yml with the following content:

    image: ghcr.io/cirruslabs/flutter
    
    pipelines:
      default:
        - step:
            name: Build Widgetbook
            script:
              # Bootstrap App
              - flutter pub get
              - flutter gen-l10n
              # Bootstrap Widgetbook
              - cd widgetbook
              - flutter pub get
              - dart run build_runner build -d
              - flutter build web
            artifacts:
              - widgetbook/build/web/**
              - widgetbook/.dart_tool/build/generated/**
    
        - step:
            name: Deploy Widgetbook
            script:
              - dart pub global activate widgetbook_cli
              - export PATH="$PATH":"$HOME/.pub-cache/bin"
              - cd widgetbook
              - widgetbook cloud build push --api-key "$WIDGETBOOK_API_KEY"
    
  • Create a Merge Request

    To test out if everything works properly, create a new branch and push a commit to it, then submit a PR with the new branch. After the build upload finishes, a commit status will be added to your PR once the Widgetbook Review is ready.

Troubleshooting

To make sure that your Widgetbook Cloud setup works properly, you can check that your repository has a "Widgetbook Cloud" Webhook configured (under Repository Settings > Webhooks) to notify Widgetbook Cloud about new PRs.