Deploying Storybook with Vercel

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:

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.

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:

{
  "$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.

Vercel CLI

1. Install the Vercel CLI and run vercel to deploy.
2. "In which directory is your code located?" press enter.
3. Project settings with be overridden from vercel.json.
4. Your application is deployed!

Vercel for Git

1. Push your code to your git repository (GitHub, GitLab, BitBucket).
2. Import your Storybook project into Vercel.
3. Project settings with be overridden from vercel.json.
4. Your application is deployed!