# Deploying Storybook with Vercel

**Author:** Lee Robinson

---

[Storybook](https://storybook.js.org/) 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](https://github.com/vercel/next.js/tree/canary/examples/with-storybook):

`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](https://vercel.com/docs/concepts/git/vercel-for-github), [GitLab](https://vercel.com/docs/concepts/git/vercel-for-gitlab), and [Bitbucket](https://vercel.com/docs/concepts/git/vercel-for-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](https://vercel.com/docs/concepts/projects/custom-domains) of your choice, either from a third party or [purchased through Vercel](https://vercel.com/domains).

### Vercel CLI

1. Install the [Vercel CLI](https://vercel.com/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](https://vercel.com/new) into Vercel.
   
3. Project settings with be overridden from `vercel.json`.
   
4. Your application is deployed!

---

[View full KB sitemap](/kb/sitemap.md)