Lifted directly from their website, "Storybook provides a sandbox to build UI components in isolation so you can develop hard-to-reach states and edge cases."
Storybook
Storybook is an app that lives inside your app and makes getting a design system built from scratch extremely approachable.
More details on setting up Storybook from Emma's post on the subject.
My first exposure to Storybook happened when during my time at Netlify as a developer focused on a timely UI refresh. That design system still exists and is maintained on storybook.netlify.com. Since that time, Storybook has grown to be a pillar in my front end development tooling. Establishing a design system keeps my UI flexible for future changes.
The problem to solve
The problem I encounter frequently is setting up an automated way to keep my public design system up to date. In my current project, Open Sauced, I am using Netlify (still a fan) to continuously deploy my site to production when I push changes to my master branch on GitHub.
Despite having continuously deployment for the production site since day one, I have been unable to automate the Storybook page in that same fashion.
At least until GitHub Actions.
GitHub Actions
GitHub Actions was publically launched this year (13th of November) with a goal of making it easy for anyone to automate all software workflows. This feature personally grants me the ability to integrate GitHub focused automation into my developer workflow, which has made approaching this problem more accessible than my previous attempts.
Solution(s)
I first attempted to solve this with just Netlify and their new monorepo feature, but since Storybook uses the same package.json, it did not quite cut it.
Another solution involved me manually bundling my /storybook-static
files locally and then pushing that output to a gh-pages
branch. This approach worked fine, but it wasn't automated.
One of the many significant parts about GitHub Actions is the ability to share your automated workflows publically through open source and GitHub Marketplace. Because I have been using GitHub Actions during the beta, I was aware of quite a few Actions that automated the deployment of a GitHub page. I found my way to a publically shared Action, JamesIves/github-pages-deploy-action. It watches my build folder (/storybook-static
) and deploys that output to the gh-pages
branch on my behalf.
GitHub Actions leverages YAML files to host its automation and abstract the interactions with the GitHub API and Webhooks away and gives me the ability to use "Deploy to GitHub Pages" Action.
This solution I came upon has been implemented in my developer workflow, has been running for a few months and help support my project's new UI refresh.
// .github/workflows/storybook.yml
on:
push
name: Publish stories if changed
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: Build and deploy to storybook-static branch
uses: JamesIves/github-pages-deploy-action@2.0.3
env:
ACCESS_TOKEN: ${{ secrets.BDOUGIE_TOKEN }}
BRANCH: storybook-static
FOLDER: storybook-static
BUILD_SCRIPT: npm install && npm run build-storybook
Bonus: Limiting deploys to specific paths.
After a few months with this solution, I noticed that the workflow triggers on every push to master, which is not ideal since every change to the project does not include an update to the design system.
I added a filter to check for changes in the stories
and components
folders. This filter prevents the CI from triggering a storybook deployment if no changes are present.
That change only needed one additional line, which I have below.
on:
push:
paths: ["stories/**", "src/components/**"]
I recently learned from ethomson's Actions advent blog series.
If you are interested in learning how you can build your own GitHub Action from scratch, please check out the Hello, GitHub Actions! course.
You can find this workflow and a few others in the bdougie/open-sauced .github
folder.
Top comments (2)
Thx for this! This is really what I wanted. Helped A LOT.
Can I translate in Korean this series? If you don't mind, I wanna share this awesome information in Korean. Surely, There will be a link directing to this original one.
Yes please do. Thanks for asking