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
Set up Stoat with our getting started guide.
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
npm run build-storybook
- name: Run Stoat Action
Point Stoat at the generated static site's path by adding a new task that uses the
# unique task id for your Storybook preview
# the display name for your Storybook preview
# path to the Storybook build output
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.
See a real build that generates and links to a Storybook preview in this pull request.