Skip to content
BobaBoard Docs

Install boba-components

[code, demo]

boba-components is where BobaBoard’s UI pieces (components) are developed.

Install Instructions

Section titled “Install Instructions”

The first time you work on boba-components you need to fork the repository so you can edit your own version of the code.

1. Clone your fork

Section titled “1. Clone your fork”

After forking the repository, open up a terminal and run the following commands:

Terminal window
# Go into the folder where you want to store your boba repositories
# For example:
cd my-boba-repos
# Clone the codebase from github
git clone https://github.com/[YOUR GITHUB USERNAME HERE]/boba-components.git
# Enter the codebase directory
cd boba-components
# Install all necessary code
yarn install

2. Add the BobaBoard repository as a remote

Section titled “2. Add the BobaBoard repository as a remote”

Once you’ve made your changes to your fork, you’ll need some way of pushing the changes to the upstream codebase. To do so, we need to tell git how to find it. Run the following command:

Terminal window
git remote add upstream https://github.com/BobaBoard/boba-components.git

3. Install boba-editor

Section titled “3. Install boba-editor”

boba-components lists boba-editor as a peer dependency. This means that, while boba-editor won’t be installed automatically by yarn install, it is required for boba-components to run.

Option 1: Fetch boba-editor through yarn

Section titled “Option 1: Fetch boba-editor through yarn”

You should follow these instructions if you don’t intend to make changes to boba-editor, or don’t care about running the latest version of boba-editor.

Terminal window
yarn add @bobaboard/boba-editor

You can now continue to the development instructions.

Option 2: Use a local copy of boba-editor

Section titled “Option 2: Use a local copy of boba-editor”

You should follow these instructions if you want to make parallel changes to boba-editor as part of updating boba-components.

  1. Install boba-editor.

    The rest of these instructions assume you’re installing boba-editor in the same containing folder as boba-components.

  2. Build and link boba-editor.

    In a terminal, run the following commands:

    Terminal window
    cd boba-editor
    yarn run build
    yarn link

    This will create the @bobaboard/boba-editor package on your local machine.

  3. Install boba-editor in boba-components

    In a terminal, run the following command

    Terminal window
    cd boba-components
    yarn link @bobaboard/boba-editor

    You can now continue to the development instructions.

Development Instructions

Section titled “Development Instructions”

In a terminal, run the following command:

Terminal window
yarn run storybook

You should now have a DevServer running at http://localhost:6006 that will look something like the online demo.