Workflow

In this section, we summarize how we can work with a monorepo based on borrow-ui.

In the Getting Started section, we saw how to integrate borrow-ui library in your project or how to use it as a starter.

We then have two workflows, depending on which way we are using borrow-ui.

Integrated in an existing project

Given the library is part of your application, you can follow the same approach as before. For example, if your project is based on CRA, just start the normal dev server.

cd ~/my-project/;
yarn storybook

Build

Building your application works in the same way as before (probably with yarn build), so the only addition is Storybook:

cd ~/my-project/;
yarn build-storybook

Monorepo

When a monorepo is created by using borrow-ui as a starter, different scenarios are possible:

1. Creating components, testing them and use Storybook to see them;
2. Creating components and see them in a third application (i.e. a CRA or Next.js application)

1. Creating components with Storybook

In this scenario, we need to be able to import the components and see live changes. Storybook configuration within this project is already setup to get the components directly from the UI packages, so there is no need to build them first.

We then need two terminals:

cd ~/my-project/packages/documentation;
yarn storybook

cd ~/my-project/packages/ui;
yarn test --watchAll

2. Creating components with other applications

In this scenario, we want to use our components in another application within the monorepo. For example, in website-next package. We have already setup everything and we just need to start coding!

The workflow is a little bit more complex in this case. website-next does not read directly from the single components files, it uses the build instead.

The first step is then to provide an up-to-date build that is regenerated every time we change one of the components. Styles also needs to be compiled.

Then, we still want to make sure we are not breaking tests (and possibly write new ones!).

cd ~/my-project/packages/ui;
yarn dev

cd ~/my-project/packages/ui;
yarn test --watchAll

The yarn dev command does the following:

• calls yarn watch, which uses rollup to build the JS files and watches for changes;
• calls compile-css-min in watch mode, that bundles all the styles together and produce a minimized version.

The last step is then starting the Next dev server:

cd ~/my-project/packages/website-next;
yarn dev

yarn shortcuts

Yarn allows to execute the same command in all packages when called from the monorepo root. This calls directly the commands without possiblity to forward options, so for example if you need to use a different port for Next you can't specify it.

However, you don't need to forward parameters most of the time! The workflow is then simplified:

cd ~/my-project/;
yarn dev

cd ~/my-project/packages/ui;
yarn test --watchAll

Build

Building the monorepo main UI package is pretty simple, and it involves building both JS and SCSS files. There is only one command needed:

cd ~/my-project/packages/ui;
yarn build

This commands calls:

• build-js, which uses rollup;
• build-css-min, which creates a minimized version of the styles.

Finally, we can build the Next (or CRA, etc) application as usual.