Setup Bojagi With React and Storybook
In this tutorial you will learn how to setup Bojagi on a React project that uses Storybook already. We have prepared a React app with three components and Storybook stories for each component.
Prerequisites
- Experience with React components
- Have experience writing Storybook stories
๐ด Import the example repository
- Generate a new repository from bojagi-tutorial-setup-with-storybook template on GitHub: https://github.com/Bojagi/bojagi-tutorial-setup-with-storybook/generate.
- Repository Name
bojagi-tutorial-setup-with-storybook
. - Press 'Create repository from template'.
Now clone your new repository:
$ git clone git@github.com:YOUR_GITHUB_USER_NAME/bojagi-tutorial-setup-with-storybook.git
$ cd bojagi-tutorial-setup-with-storybook
๐ฉโ๐ป Install Bojagi
First you need to install the project:
$ yarn
$ npm install
Once completed, add the Bojagi CLI to your project:
$ yarn add -D @bojagi/cli
$ npm install --save-dev @bojagi/cli
๐จ Preview your stories
Let's check if your stories work well with Bojagi. For that the CLI offers a preview
command to render
them locally. This way you see if everything looks good before uploading to Bojagi.
$ yarn bojagi preview
$ npx bojagi preview
This opens the Bojagi preview app in your browser. Here you can look through the stories and different states.
Everything looks good? Let's do a change and upload it to Bojagi.
โ Activate your repository on Bojagi
Let's try to see Bojagi in action and upload your stories!
First activate your repository on Bojagi. Go to https://bojagi.io/app and navigate to your user. If you can't find it, you need to install the Bojagi GitHub App on your GitHub user first. Make sure to give it at least access to the forked repository.
After Bojagi is installed you will see a list of repositories that you can activate. Now choose the repository you forked and click "activate". You'll see a short instruction guide. Follow this guide to upload your stories (you might have done most of it already though).
You uploaded your first stories to Bojagi! Let's try to use Bojagi with a Pull Request now!
๐ฅ Creating a Pull Request
Uploading components for a pull request is not that different from doing it on the main
branch.
First create a new branch:
$ git checkout -b my-new-change
Now open the project in your favorite IDE and edit any component. For example: change the CSS of the Button
component:
/* Line 14 of src/components/Button.css */
background-color: #6347ff;
/* Line 5 to 7 of src/components/Button.css */
background-color: #4787ff;
color: #fff;
border: 1px solid #6347ff;
When you are done, commit the change, push it to GitHub.
$ git add .
$ git commit -m 'Updated Button styles'
$ git push origin my-new-change # Followed by creating a pull request for this branch on your GitHub repository
Visit the link provided in the git push
output and create a Pull Request on GitHub.
Enumerating objects: 13, done.
Counting objects: 100% (13/13), done.
Delta compression using up to 8 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 21.24 KiB | 3.03 MiB/s, done.
Total 7 (delta 6), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (6/6), completed with 6 local objects.
remote:
remote: Create a pull request for 'my-new-change' on GitHub by visiting:
remote: https://github.com/YOUR_GITHUB_USER_NAME/bojagi-tutorial-setup-with-storybook/pull/new/my-new-change
remote:
To git@github.com:YOUR_GITHUB_USER_NAME/bojagi-tutorial-setup-with-storybook.git
Now use the same deploy
command that you used before:
$ yarn bojagi deploy
$ npx bojagi deploy
After the command is finished, go back to Bojagi in your Browser, click on "Pull Requests" on the left side menu and select the Pull Request you opened before on GitHub.
You should see the changes you have done in this PR visually with the real component rendered in Bojagi. On your Pull Request in GitHub you should also see a pending status check from Bojagi.
You can now review your changes. Any change to the review updates the status check on GitHub as well.
Done! You can now add Bojagi in your or your companies projects. Check out the remaining documentation for more insights. Maybe you you want to know how to integrate Bojagi into your CI pipeline.