Automatically deploying your Storybook to Github Pages

Storybook is a great tool, it allows you to organize your components into a neat little interface that looks something like this.

You basically create stories that take care of returning the component you want to display to your user.

Here's an example of a story for a React component:

//...

import { Button } from "../components/Button"

storiesOf('Button', module)
  .add('With text', () => <Button>Enter World</Button>)
  .add('With emojis', () => <Button>🔥⚔️</Button>)

Pretty simple stuff, of course, there are many ways of customizing your Storybook, from its theme to adding awesome addons.

But this article is not an introduction to Storybook, if you want one I truly recommend Emma Wedekind's "Documenting React Components With Storybook". Today, we'll deploy an existing Storybook to Github Pages like this one while automating the process at each push on a given branch.

Setting up Travis CI

Travis CI is a continuous integration service that's used to build and test your software hosted on Github. It's free for open-source projects and will allow us to deploy to Github Pages super easily.

There are a few steps to follow before we can do all of that:

1. Go to travis-ci.com and Sign up with GitHub.
2. Accept the Authorization of Travis CI. You’ll be redirected to GitHub.
3. Click the green Activate button, and select the repository you want to deploy
4. Generate a personal access token on Github following the short instructions on this link and give it the public_repo permissions.
5. Go to your project's settings on Travis, in the environment variables section, create a GITHUB_TOKEN variable and give it the token you've just generated. This token will allow Travis to push to your repository in order to deploy.

We can now create a .travis.yml file at the root of our project and give it the following content:

# Tells Travis we're running on a Node environment
language: 'node_js'
node_js: '8'

# Script that is run before the script phase
before_script:
- yarn build-storybook

# Deployment information
deploy:
  provider: pages # Tell Travis we want to deploy to Github Pages
  skip-cleanup: true 
  github-token: $GITHUB_TOKEN # Will take the environment variable you created on step 5
  local_dir: storybook-static # The folder that needs to be deployed
  repo: christopherkade/ReactCraft # Add your username/project_name here
  target_branch: gh-pages # Tell Travis to deploy on the gh-pages branch
  on:
    branch: master # Tell Travis to trigger a deploy only when we push to master

Note: If you wish to trigger the deployment when pushing to a specific branch, feel free to change the branch: master section of the configuration file.

Setting up our Storybook for deployment

We're almost done, we now need to export our Storybook into a static app. This way Travis will take care of pushing the generated app to our gh-pages branch, which will deploy it !

In your package.json, add the following script:

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

This script is the one run during our before_script phase in our .travis.yml. It will generate a storybook-static folder at the root of your project containing your website's static instance.

Deploying your Storybook

We can now trigger our first deployment 😍

Push your package.json and .travis.yml files to your repository.

If everything goes according to plan you should see a build being triggered on your Travis dashboard. After a short while (give it a few minutes at first), if your build is shown as successful, you'll find your Storybook under the following URL: username.github.io/project-name.

Keep in mind that a few things might make a build fail:

1. Your tests failing
2. Forgetting a step in this article, for example setting up the environment variable containing your Github token on your Travis project.
3. Your linter throwing an error (if you have one set up)

So you can always fix these issues and push your changes to Github.

Congratulations on deploying your Storybook to Github Pages 🎉

If you have any questions or want to keep in touch, please feel free to follow me on Twitter @christo_kade, I regularly post about JS and CSS there and will always inform you when new articles are out 😄