This post is part of the "Building design system and micro frontends" series. See the first post for context. Source code for all the parts of this series can be found in this GitHub repository.

1. Building design system and micro frontends

2. Building and publishing design system (you are here)

3. Building micro frontend consuming design system

4. Building shell application for micro frontends

For building our design system, we will use react, tailwind, storybook and webpack.

A few words why I selected this technologies:

• React - proven, stable, excellent component composition system, focus on back-compatibility. Read the "Design Principles" post on reacts blog; this post outlines react development guiding principles.

• Tailwind - gives us a simple way to define seed for the design system. Sizes/Distances scale, colour palettes, shadows, responsive breakpoints, transitions and animations etc., all can be defined succinctly. It also gives us ultimate style isolation and a big productivity boost.

• Storybook - helps us develop components in isolation. Helps in component testing and, when exported, delivers portable documentation.

• Webpack - proven, stable, vivid plugin ecosystem; a lot of materials.

  
  

Setting up Design System Project

Create directory design-system and run the following commands from it:

npm init -y will setup package.json file.

Run npm run storybook to build and run storybook. It should bind to port 6006. Open http://localhost:6006. You should see some example stories.

The npx sb init command takes care of setting up the storybook. It will create a stories directory with examples in the project root directory. You can remove its content. We will create a simple story later from scratch.

Set up tailwind

npx tailwindcss init will create ./tailwind.config.js file with the default configuration.

Open ./tailwind.config.js Add mode property and set purge patterns (lines 2,3).

Create ./postcss.config.js in root directory.

Paste following code in ./postcss.config.js:

This configuration file adds tailwindcss and autoprefixer plugins to PostCss processing pipeline.

Setup tailwind for storybook

In the next two steps we will setup tailwind for storybook. We need to install appropriate plugin and configure it.

Install @storybook/addon-postcss addon for storybook.

Update ./.storybook/main.js; add highlighted configuration to addons array:

Create file ./src/styles.css.

Paste following code in ./src/styles.css:

Open ./.storybook/preview.js and add import styles (line 1).

Create component and story

Create Button.js file in ./src/components with the following content

In ./stories directory create `Button.stories.js` file with the following content:

Run npm run storybook. Open http://localhost:6006. You should see something like this:

Building design system package

It is time to create production build of our design system. It should contain only necessary code. We will exclude react from the build. The assumption here is that whoever is consuming design system will be responsible for including react.

In a real project design system should be packaged and published to a npm repository so the other project can use npm to get it. However, for this walkthrough, we will build it and keep it in a directory on the disk. Other projects that we build in the next post will consume it from the disk.

Create an entry point for our library; Create ./src/index.js and add the following content:

Every component in our design system must be imported and re-exported in this file.

Install following packages:

Create file ./.babelrc with the following content:

Create file ./webpack.config.js with the following content:

There is a lot of things going on in this file; so lets break it out:

• Line 6 - we define an entry point for our library, all components exported in this file will be available for consumers.

• Line 9 - the output of the build will be saved to dist folder

• Lines 11-14 - we configure webpack to create a library and use UMD for modules.

• Lines 16-19 - we externalize react. This way it is not packaged with the library.

• Lines 20-41 - standard configuration for building js, jsx and CSS

• Lines 42-46 - add plugin for CSS extractions

• Lines 47-52 - configure CSS minification

The last step is to add npm script; add following line to package.json scripts array:

To build the design system run npm run build-design-system.

There should be two files in the dist directory. main.js (5KB), and main.css (7KB).