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:
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:
- Go to travis-ci.com and Sign up with GitHub.
- Accept the Authorization of Travis CI. You’ll be redirected to GitHub.
- Click the green Activate button, and select the repository you want to deploy
- Generate a personal access token on Github following the short instructions on this link and give it the
- Go to your project's settings on Travis, in the environment variables section, create a
GITHUB_TOKENvariable 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:
Note: If you wish to trigger the deployment when pushing to a specific branch, feel free to change the
branch: mastersection 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 !
package.json, add the following script:
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 😍
.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:
- Your tests failing
- Forgetting a step in this article, for example setting up the environment variable containing your Github token on your Travis project.
- Your linter throwing an error (if you have one set up)
So you can always fix these issues and push your changes to Github.<br>
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 😄