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.
- 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
- Press 'Create repository from template'.
Now clone your new repository:
$ git clone firstname.lastname@example.org: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:
$ 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
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
/* 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 email@example.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 "Reviews" 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.