Setup a CI / CD process to automatically deploy Storybook in your project to Vercel

So you’ve set up a project, deployed it on Vervel, installed Storybook and have been writing stories for your components. Great job! You've taken a huge step forward in creating and documenting your design system! But what if you want to deploy it on Vercel alongside your project? You'll learn to do that here.

Prerequisites:

1. Have a project set up with Storybook
2. Pushed that project to a GitHub repo
3. That GitHub repo can use GitHub actions
4. Have a Vercel account already deploying the project

Outline

• Setup Storybook Vercel deployment branch
• Create a new domain to the Storybook deployment
• Set up GitHub actions to automatically merge to Storybook branch

Setup Storybook Vercel deployment branch

Vercel by default will automatically deploy a project when a new commit is pushed to the branch it's watching. We plan to leverage that behavior to update Storybook when new changes are made.

First, from the main branch of your project, create a new branch called 'storybook-deploy". In that branch, you want to insert this file:

vercel.json

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "npm run build-storybook",
  "devCommand": "npm run storybook",
  "installCommand": "npm ci",
  "framework": null,
  "outputDirectory": "./storybook-static"
}

The above file will override the default deployment process and deploy Storybook when it sees this file. The storybook-deploy branch is now ready!

Point a domain to the Storybook branch

Now go to your Vercel account and point a domain to the storybook-deploy branch that was created on GitHub. Here's an example below:

Set up GitHub actions to automatically merge to Storybook branch

We will now need to leverage GitHub Actions to automatically push code to the storybook-deploy branch whenever new code is committed which will cause Vercel to auto deploy it. Going back to the main branch of the project, add this file to the root directory of your project:

.github/workflows/storybook.yml

name: Build and Deploy Storybook
on: 
  push:
    branches:
      - 'dev' # Trigger the action only pushed to a specific branch
      - '!main' # Ignore if pushed to a specific branch
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1

      - name: Merge dev -> storybook-deploy 🚀
        uses: devmasx/merge-branch@1.4.0
        with:
          type: now
          from_branch: dev
          target_branch: storybook-deploy
          github_token: ${{ github.token }}

The above file will automatically merge the main branch into the storybook-deploy. This will then trigger a deploy from Vercel with the deployment configuration that was applied. Now that this is added to your project, push your code to your main branch. The GitHub action should now push it the branch to storybook-deploy and Vercel will now trigger a deploy. Please note that deploying a Storybook can take a few minutes.

Now you've set up automatic deployment of your Storybook whenever a push is made to your main branch!

• If you found this article interesting, please feel free to heart this article!
• If you’re interested in learning more about Front-End Engineering, follow me here on Dev.to and Twitter.
• If you’re looking for jobs, I’d highly recommend checking out @TechIsHiring on Twitter, LinkedIn or TechIsHiring's new website https://www.TechIsHiring.com/ for posted jobs and other resources!