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:
- Have a project set up with Storybook
- Pushed that project to a GitHub repo
- That GitHub repo can use GitHub actions
- 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!
Top comments (0)