This repository was archived by the owner on Jan 16, 2023. It is now read-only.

storybook-eol/storybook-deployerPublic archive

NotificationsYou must be signed in to change notification settings
Fork71
Star895

Deploy your storybook as a static site

License

MIT license

895 stars 71 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 200 Commits
.circleci		.circleci
.github/workflows		.github/workflows
bin		bin
src		src
.all-contributorsrc		.all-contributorsrc
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

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 --helpOptions:  --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                  Directoryfor package.jsons (monorepo support)          [string]  --monorepo-index-generator, -m  Path to file to customize the monorepo index.html. This function                                  shouldreturn the htmlfor the page.                    [string]  --script, -s                    Specify the build scriptin your package.json           [string]  --ci                            Deploy the storybookin 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 tokenfor CI publish       [string] [default:"GH_TOKEN"]  --aws-profile                   AWS profile to usefor publishing. Use NONE to use no profile                                  at all instead of"default".       [string] [default:"default"]  --bucket-path                   AWS bucket path to usefor publishing                   [string]  --s3-sync-options               Additional options to pass to AWSCLI s3 sync            [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 runnpm run deploy-storybook to deploy the Storybook.

Alternatively, you can execute Storybook Deployer directly usingnpx

npx -p @storybook/storybook-deployer storybook-to-ghpagesnpx -p @storybook/storybook-deployer storybook-to-aws-s3

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 theout 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 pass thepackages flag todeploy-storybook to scan a directory forpackage.jsons.

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

npm run deploy-storybook -- --packages packages

Customize Monorepo`index.html`

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

an array of all thepackage.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 theci flag tonpm run deploy-storybook.

If theCI environment variable is set then this mode will be assumed, therefore no need to specify theci flag.

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

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

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

npm run deploy-storybook -- --ci

Or if your access token is stored in theGITHUB_TOKEN environment variable

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

Deploying Storybook to GitHub Pages as part of a GitHub Action

If you are deploying Storybook to GitHub Pages from a repository belonging to an organization account on GitHub, you may need to specify a${{ github.actor }} in addition to the${{ secrets.GITHUB_TOKEN }} for your build step to be able to authenticate properly.

For instance:

- name: Deploy storybook to GitHub Pages  run: npm run deploy-storybook -- --ci  env:    GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}

Custom deploy configuration

If you want to customize Git username, email or commit message, add this topackage.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 thanorigin, pass a--remote flag tonpm run deploy-storybook.For example, to deploy to yourupstream 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 thanmaster, pass a--source-branch flag tonpm run deploy-storybook:

npm run deploy-storybook -- --source-branch=release

Custom deploy configuration for S3

For AWS S3 deployment you must haveawscli installed.

You must specify a bucket path withbucket-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 theaws-profile option.

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

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

You can provide arbitrary S3 sync options via the--s3-sync-options flag:

storybook-to-aws-s3 --bucket-path=bucket-name/bucket-path --s3-sync-options=--acl=public-readstorybook-to-aws-s3 --bucket-path=bucket-name/bucket-path --s3-sync-options="--acl=public-read --quiet"

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Andrew Lisowski} 💻📖	_{Arunoda Susiripala} 💻📖	_{Norbert de Langen} 💻📖	_{Dan Dean} 💻📖	_{Jason Unger} 💻📖	_nkov 💻📖	_{Tyler Sargent} 📖
_{Patrick Riley} 💻📖	_jeanlucc 💻	_{Travis Bloom} 💻	_{Christophe Coevoet} 🚧	_{Michael Shilman} 🚧	_{Jae Bradley} 💻	_{Bryce Dorn} 🐛
_{Bao Pham} 💻	_{Ankur Patel} 💻	_{ZitaNemeckova} 💻	_{Lucas Machado} 💻	_{Jeri Sommers} 💻	_{Jimmy Andrade} 🚇📖💻	_{Nick Perez} 📖💻
_Mitchell 📖	_erlendmiljo 📖