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.
If you haven’t already created your Storybook, you can initialize a new Storybook project with Next.js:
npx 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:
npm run build-storybook
This creates a static web application that can be viewed through a web server. For example:
npx serve ./.storybook
The example above includes these commands as npm scripts in your package.json
already:
{ "storybook": "start-storybook -p 6006 -s public", "build-storybook": "build-storybook -s public", "serve-storybook": "serve storybook-static"}
You only need to use -s public
if you want to include a public
folder with assets like images in your deployment.
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:
{ "$schema": "https://openapi.vercel.sh/vercel.json", "buildCommand": "npm run build-storybook", "devCommand": "npm run storybook", "installCommand": "npm install", "framework": null, "outputDirectory": "./storybook-static"}
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.
- 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!
- 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!