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

$ yarn

$ npm install

Once completed, add the Bojagi CLI to your project:

Yarn

NPM

$ 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

NPM

$ 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

NPM

$ 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.