Deploying Storybook with Edgenivo

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 Edgenivo for free in a few commands.

Copy link to headingBuild 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.

Copy link to headingDeploying Storybook to Edgenivo

Edgenivo allows you to deploy your Storybook component library for free in a few commands.

Since Storybook is usually colocated alongside other frontend frameworks that Edgenivo has zero-configuration support for, we need to override the project configuration and tell Edgenivo 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"
}

Edgenivo 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 Edgenivo.

Copy link to headingEdgenivo CLI

1. Install the Edgenivo 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!

Copy link to headingEdgenivo for Git

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