Widgetbook Cloud Hosting

When you create a new commit in Git, a new version of your code is created. With Widgetbook Builds developers make the new version of their local Widgetbook accessible for the whole team. If set up with CI/CD, you can have a build for each commit, for each pull-request and for each branch.

Pushing a new build#

To create a Widgetbook Build, follow these steps inside your Widgetbook project:

  1. Run widgetbook_generator to generate metadata about your use-cases and components

    dart run build_runner build -d
  2. Build the Widgetbook for the web

    # Default target (i.e. `lib/main.dart`)
    flutter build web
    # Custom target
    flutter build web -t lib/main.widgetbook.dart
  3. Install the Widgetbook CLI

    dart pub global activate widgetbook_cli
  4. Get your API key from the Widgetbook Cloud's project settings page.

  5. Push the build to Widgetbook Cloud

    widgetbook cloud build push --api-key PROJECT_API_KEY

The cloud push command uses the following directories:

  1. build/web/ to create a .zip archive that will be uploaded to Widgetbook Cloud.
  2. .dart_tool/build/generated/[your_app_name]/ to send metadata, about the generated use-cases, that will be used for Widgetbook Cloud Review.

Pushing new builds with CI#

To better integrate Widgetbook Cloud with your development workflow, it is recommended to use CI/CD to push a new build on every push of a new commit.

The following workflows assume you have Widgetbook structured as a sub-package

├── pubsepc.yaml
├── lib/
└── widgetbook/
    ├── pubsepc.yaml
    └── lib/