Storybook Deploys with CircleCI

Several of the packages in this repository use Storybook to build and demonstrate user interface components (mostly in React). These notably include fxa-settings, fxa-payments-server, fxa-react, and fxa-auth-server which contains our emails.

info

The latest Storybook builds on the main branch can be found here.

For most test runs in CircleCI, a static build of each package's Storybook for the relevant commit is published to a website we host on Google Cloud Platform. Click here to view the index page.

You can find the Storybook build associated with a given commit on GitHub by clicking the "Details" link next to a storybooks: pull request check, accessible via clicking the green check mark next to the commit title.

tip

Since Storybook builds per commit, it can be helpful to send Storybook links around to Product, UX, or anyone else that may want to preview UI changes for a PR you have up before it's approved and merged.

Maintaining Storybook Builds

If you've been given access, the Google Cloud Platform project dashboard for the website can be found here.

We use mozilla-fxa/storybook-gcp-publisher for publishing Storybook builds. Refer to its repository for full documentation.

For quick reference, here are a few CircleCI environment variables used by storybook-gcp-publisher that are relevant to FxA operations in CircleCI. Occasionally they may need maintenance or replacement (e.g. in case of a security incident involving another tool that exposes variables):

• STORYBOOKS_GITHUB_TOKEN - personal access token on GitHub for use in posting status check updates
• STORYBOOKS_GCP_BUCKET - name of the GCP bucket to which Storybook builds will be uploaded
• STORYBOOKS_GCP_PROJECT_ID - the ID of the GCP project to which the bucket belongs
• STORYBOOKS_GCP_CLIENT_EMAIL - client email address from GCP credentials with access to the bucket
• STORYBOOKS_GCP_PRIVATE_KEY_BASE64 - the private key from GCP credentials, encoded with base64 to accommodate line breaks