Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

storybook-deployer

Deploy your storybook as a static site

Subscribe to updates I use storybook-deployer


Statistics on storybook-deployer

Number of watchers on Github 163
Number of open issues 7
Average time to close an issue 17 days
Main language JavaScript
Average time to merge a PR 21 days
Open pull requests 5+
Closed pull requests 3+
Last commit over 1 year ago
Repo Created over 3 years ago
Repo Last Updated over 1 year ago
Size 42 KB
Organization / Authorstorybooks
Latest Releasev2.2.0
Contributors1
Page Updated
Do you use storybook-deployer? Leave a review!
View open issues (7)
View storybook-deployer activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating storybook-deployer for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Storybook Deployer

This is a simple tool allows you to deploy your Storybook into a static hosting service. (Currently, GitHub Pages only.)

Getting Started

Install Storybook Deployer with:

npm i @storybook/storybook-deployer --save-dev

Then add a NPM script like this:

{
  "scripts": {
    "deploy-storybook": "storybook-to-ghpages",
  }
}

Then you can run npm run deploy-storybook to deploy the Storybook to GitHub Pages.

Custom Build Configuration

If you customize the build configuration with some additional params (like static file directory), then you need to expose another NPM script like this:

{
  "scripts": {
    "build-storybook": "build-storybook -s public -o .out",
  }
}

Make sure to set the output directory as .out.

Skip Build Step

If you have previously built your storybook output (through a different CI step, etc) and just need to publish it, specify the directory like this:

npm run deploy-storybook -- --existing-output-dir=.out

Deploying Storybook as part of a CI service

To deploy Storybook as part of a CI step, pass the ci flag to npm run deploy-storybook.

Because pushing to GitHub as part of a CI step requires a personal access token, Storybook uses the GH_TOKEN environment variable, by default, to authenticate GitHub pushes.

This environment variable name can be configured via the host-token-env-variable flag.

For example, if your access token is stored in the GH_TOKEN environment variable

npm run deploy-storybook -- --ci

Or if your access token is stored in the GITHUB_TOKEN environment variable

npm run deploy-storybook -- --ci --host-token-env-variable=GITHUB_TOKEN

Custom deploy configuration

If you want to customize Git username, email or commit message, add this to package.json:

"storybook-deployer": {
  "gitUsername": "Custom Username",
  "gitEmail": "custom@email.com",
  "commitMessage": "Deploy Storybook [skip ci]"
}

It will override the default configuration:

"storybook-deployer": {
  "gitUsername": "GH Pages Bot",
  "gitEmail": "hello@ghbot.com",
  "commitMessage": "Deploy Storybook to GitHub Pages"
}

To deploy Storybook to a remote other than origin, pass a --remote flag to npm run deploy-storybook. For example, to deploy to your upstream remote:

npm run deploy-storybook -- --remote=upstream

Or, to specify a target branch and serve your storybook with rawgit instead of gh-pages:

npm run deploy-storybook -- --branch=feature-branch

Or, to specify a source branch other than master, pass a --source-branch flag to npm run deploy-storybook:

npm run deploy-storybook -- --source-branch=release
storybook-deployer open issues Ask a question     (View All Issues)
  • about 3 years Hardcoded remote is too inflexible
  • about 3 years Can't get started
storybook-deployer open pull requests (View All Pulls)
  • Adding support for Github Enterprise, refactoring to use ES5 code and adding .gitignore
  • add git remote option
  • disable GPG signing
  • Add Continuous Integration Step Support
  • Add missing '/' to rawgit_url when remote URL doesn't end with .git
storybook-deployer list of languages used
Other projects in JavaScript