Widgetbook Cloud x Codemagic

Codemagic is just a CI/CD platform, which means it needs to be accompanied by a version control system (i.e. GitHub, GitLab, Azure or Bitbucket). In this guide, we will just be showing the workflow setup, but you need to check other version control system guides to make the Widgetbook Cloud Reviews work.

• Add API Key as a Secret

  Add WIDGETBOOK_API_KEY under widgetbook_credentials group in your Codemagic project's environment variables. You can find the API key in the Widgetbook Cloud's project settings page.

• Setup Workflow

  To upload a Widgetbook Build for each new commit in your repository, add the following workflow to your Codemagic codemagic.yaml file

  workflows:
    widgetbook-cloud-hosting:
      name: Widgetbook Cloud Hosting
  
      triggering:
        events:
          - push
  
      environment:
        flutter: stable
        groups:
          - widgetbook_credentials
  
      scripts:
        - name: Bootstrap App
          script: |
            flutter pub get
            # Add any other steps needed to make your
            # app widgets available for Widgetbook
  
        - name: Build Widgetbook
          working_directory: widgetbook
          script: |
            flutter pub get
            dart run build_runner build -d
            flutter build web -t lib/main.dart
  
        - name: Install Widgetbook CLI
          script: dart pub global activate widgetbook_cli
  
        - name: Push Widgetbook Build
          working_directory: widgetbook
          script: widgetbook cloud build push --api-key $WIDGETBOOK_API_KEY