Automating my Storybook deployment with GitHub Actions
Tags: storybook, react, designsystem, opensauced
Published: 2019-12-16 21:39:00

Lifted directly from [their website](https://storybook.js.org/), _"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](https://dev.to/emmawedekind/documenting-react-components-with-storybook-4h3b)._

{% post https://dev.to/emmabostian/documenting-react-components-with-storybook-4h3b %}

My first exposure to Storybook happened when during my time at [Netlify](https://www.netlify.com/) as a developer focused on a timely UI refresh. That design system still exists and is maintained on [storybook.netlify.com](https://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](https://opensauced.pizza), 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](https://www.netlify.com/blog/2019/10/09/launching-monorepo-support-for-netlify-sites/) 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](https://github.com/marketplace?utf8=%E2%9C%93&query=github-pages-deploy-action). 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](https://github.com/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.

```yml
// .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.  

```yml
on: 
  push:
    paths: ["stories/**", "src/components/**"]
```
_I recently learned from [ethomson's Actions advent blog series](https://www.edwardthomson.com/blog/github_actions_10_path_triggers.html)._

If you are interested in learning how you can build your own GitHub Action from scratch, please check out the [Hello, GitHub Actions!](https://lab.github.com/github/hello-github-actions!) course.

You can find this workflow and a few others in the [bdougie/open-sauced](https://github.com/bdougie/open-sauced) [`.github`](https://github.com/bdougie/open-sauced/tree/master/.github/workflows) folder.