Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.
You can deploy Storybook to Vercel for free in a few commands.
Build Storybook as a Static Web App
If you haven’t already created your Storybook, you can initialize a new Storybook project with Next.js:
1npx create-next-app --example with-storybook with-storybook-app
You’ll need to build Storybook as a static web application. Storybook includes a build command (build-storybook
) which can be ran inside your project’s root directory:
1npm run build-storybook
This creates a static web application that can be viewed through a web server. For example:
1npx serve ./.storybook
The example above includes these commands as npm scripts in your package.json
already:
1{2 "storybook": "start-storybook -p 6006 -s public",3 "build-storybook": "build-storybook -s public",4 "serve-storybook": "serve storybook-static"5}
You only need to use -s public
if you want to include a public
folder with assets like images in your deployment.
Deploying Storybook to Vercel
Vercel allows you to deploy your Storybook component library for free in a few commands.
Since Storybook is usually colocated alongside other frontend frameworks that Vercel has zero-configuration support for, we need to override the project configuration and tell Vercel explicitly what commands to use. Create a new vercel.json
file as follows:
1{2 "$schema": "https://openapi.vercel.sh/vercel.json",3 "buildCommand": "npm run build-storybook",4 "devCommand": "npm run storybook",5 "installCommand": "npm install",6 "framework": null,7 "outputDirectory": "./storybook-static"8}
Vercel has integrations for GitHub, GitLab, and Bitbucket to enable CI/CD for your Storybook application with zero configuration. Pull and merge requests are deployed instantly to a unique URL, accessible to your entire team.
After deploying, your new Storybook site will automatically be assigned a .vercel.app
suffixed domain. You can then add a Custom Domain of your choice, either from a third party or purchased through Vercel.
Vercel CLI
- Install the Vercel CLI and run
vercel
to deploy. - "In which directory is your code located?" press enter.
- Project settings with be overridden from
vercel.json
. - Your application is deployed!
Vercel for Git
- Push your code to your git repository (GitHub, GitLab, BitBucket).
- Import your Storybook project into Vercel.
- Project settings with be overridden from
vercel.json
. - Your application is deployed!