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.

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.