npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dandean/storybook-deployer

v2.8.4

Published

Deploy your storybook as a webapp.

Downloads

6

Readme

Storybook Deployer

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

$ storybook-to-ghpages --help
$ storybook-to-aws-s3 --help

Options:
  --help, -h                      Show help.                                             [boolean]
  --version                       Show version number                                    [boolean]
  --existing-output-dir, -e       If you have previously built your storybook output (through a
                                  different CI step, etc) and just need to publish it     [string]
  --out, -o                       Configure the output directory                          [string]
  --packages, -p                  Directory for package.jsons (monorepo support)          [string]
  --monorepo-index-generator, -m  Path to file to customize the monorepo index.html. This function
                                  should return the html for the page.                    [string]
  --script, -s                    Specify the build script in your package.json           [string]
  --ci                            Deploy the storybook in CI mode (github only)          [boolean]
  --dry-run                       Run build but hold off on publishing                   [boolean]
  --remote                        Git remote to push to               [string] [default: "origin"]
  --branch                        Git branch to push to             [string] [default: "gh-pages"]
  --source-branch                 Source branch to push from          [string] [default: "master"]
  --host-token-env-variable, -t   Github token for CI publish       [string] [default: "GH_TOKEN"]
  --aws-profile                   AWS profile to use for publishing. Use NONE to use no profile
                                  at all instead of "default".       [string] [default: "default"]
  --bucket-path                   AWS bucket path to use for publishing                   [string]

Getting Started

Install Storybook Deployer with:

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

Then add a NPM script like this for github page:

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

or like this for AWS S3:

{
  "scripts": {
    "deploy-storybook": "storybook-to-aws-s3"
  }
}

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

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"
  }
}

Configure Build Directory

If you need to configure the output directory you can supply the out flag.

npm run deploy-storybook -- --out=.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

Skip Deploy Step

if you want to see how everything build without pushing to a remote, use the --dry-run flag.

npm run deploy-storybook -- --dry-run

Deploy a Monorepo

If you manage a monorepo with multiple storybooks you can you pass the packages flag to deploy-storybook to scan a directory for package.jsons.

The following command will search the packages directory for packages. It will also generate a default index.html that links to all of the loaded storybooks.

npm run deploy-storybook -- --packages packages

Customize Monorepo index.html

To customize the monorepo index.html you can pass the monorepo-index-generator flag to deploy-storybook. This file should export a function that receive the following arguments and returns the html for the page.

  • an array of all the package.json data from the loaded storybooks as the first argument
  • the output directory
npm run deploy-storybook -- --monorepo-index-generator my-custom-generator.js

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": "[email protected]",
  "commitMessage": "Deploy Storybook [skip ci]"
}

It will override the default configuration:

"storybook-deployer": {
  "gitUsername": "GH Pages Bot",
  "gitEmail": "[email protected]",
  "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

Custom deploy configuration for S3

For AWS S3 deployment you must have awscli installed.

You must specify a bucket path with bucket-path option: my-bucket-name/path/to/destination-folder-in-bucket and have the rights to write to this bucket.

You can change the aws profile used to run the command with the aws-profile option.

example: storybook-to-aws-s3 --bucket-path=my-bucket-name/path/to/destination-folder-in-bucket --aws-profile=myprofile

You can exclude the aws profile by setting this flag to "NONE":

example: storybook-to-aws-s3 --bucket-path=my-bucket-name/path/to/destination-folder-in-bucket --aws-profile=NONE