Preview UI components in PRs

Stoat can help you preview UI components from a link in a comment on your pull requests. In this tutorial we will use Storybook as an example for component previews, but Stoat can also be used with Ladle or other similar tools.

Here's an example of a Stoat comment with a link to a hosted Storybook generated by the latest build:

Adding component previews to the Stoat comment

1. Set up Stoat with our getting started guide.

2. Make sure the Stoat Action appears after the GitHub workflow step that builds your static component preview site.

   .github/workflows/storybook.yaml

   # existing step in your repo that generates a static Storybook build
   - name: Build Storybook
     run: |
       npm install
       npm run build-storybook
   
   - name: Run Stoat Action
     uses: stoat-dev/stoat-action@v0
     if: always()

3. Point Stoat at the generated static site's path by adding a new task that uses the static_hosting plugin:

   .stoat/config.yaml

   ---
   version: 1
   enabled: true
   plugins:
     static_hosting:
       # unique task id for your Storybook preview
       storybook:
         metadata:
           # the display name for your Storybook preview
           name: "Storybook"
         # path to the Storybook build output
         path: storybook-static

By default, the npm run build-storybook will generate a static Storybook in the storybook-static directory (documentation here). If you configure a custom output directory, are building Storybook from a subdirectory of a Git repository, or if you are using a different component preview tool, you will need to update the path.

That's it! Now, every time you open a pull request, Stoat will host the Storybook build outputs and link to the preview in the Stoat comment.

Example Repo

See a real build that generates and links to a Storybook preview in this pull request.