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:
- 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
public_repo
permissions. - 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:
- 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.
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 😄
Top comments (0)