Overview

In many corporate landscapes, you have multiple UIs that live in different repositories. In order to avoid duplication and improve consistency, common components such as buttons and dialogs should be shared across those repositories.

Setup

In order to not over-complicate things unnecessarily, each sharing setup will have one library (that houses the components to be shared) and one simple Next.js app (that consumes the shared components).

All setups are based off of the tooling section, meaning that all setups come with appropriate tooling. We are going to use pnpm as a package manager (but everything will work with npm or yarn just fine).

To run a specific setup locally,

  1. clone the repo,
  2. pnpm install at the root,
  3. pnpm build in the library of your choice,
  4. pnpm dev in its consuming application.

Core Concepts

We will make the following assumptions to keep us sane:

  • All setups are ES Modules.
  • All setups are intended to be used in React applications that have some kind of proper build step. That means that you will not be able to do old-school shenanigans like sourcing it directly via a script tag in some hand-written HTML.

This makes our lives as library authors way more comfortable:

  • We do not minify our library. The application that consumes the library does.
  • We do not bundle dependencies (with exceptions, as always). The application's bundling step resolves dependencies transitively.
  • We do not polyfill for random old browsers. The application's bundling step does so if necessary.