Workflow

In this section, we summarize how we can work with 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.

Storybook
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:

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

Monorepo

When using borrow-ui as a monorepo, 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:

Storybook
cd ~/my-project/packages/documentation;
yarn storybook
Tests
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!).

Components and styles
cd ~/my-project/packages/ui;
yarn dev
Tests
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:

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

yarn shortcut

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:

Components, styles and Next app
cd ~/my-project/;
yarn dev
Tests
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:

Build ui package
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.