React Academy · Lesson

Shared Libraries & Internal Packages

Create shared UI and utility libraries and import them across apps with TypeScript path aliases.

Shared Libraries & Internal Packages is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Shared Libraries?

Instead of duplicating components, hooks, and utilities across multiple apps, extract them into shared library projects consumed by any app in the monorepo.

Generating a Library

Use Nx generators to create typed, buildable library projects.

# UI component library:
npx nx generate @nx/react:library ui --directory=libs/ui --importPath=@myorg/ui

# Utility library:
npx nx generate @nx/js:library utils --directory=libs/utils --importPath=@myorg/utils

# Data access library (hooks, API calls):
npx nx generate @nx/react:library data-access --importPath=@myorg/data-access

Library Public API

Export everything from a single index.ts (the public API). Consumers should only import from @myorg/ui, not from deep internal paths.

// libs/ui/src/index.ts
export { Button } from './lib/Button';
export { Card } from './lib/Card';
export { Input } from './lib/Input';
export type { ButtonProps } from './lib/Button';

// Consumer in apps/web:
import { Button, Card } from '@myorg/ui';
// NOT: import { Button } from '@myorg/ui/src/lib/Button'; // internal path

Library Types: publishable vs buildable

Buildable libraries compile incrementally for faster monorepo builds. Publishable libraries also generate an npm-compatible package for external consumption.

# Buildable (monorepo internal use only):
npx nx generate @nx/react:library ui --buildable

# Publishable (for npm too):
npx nx generate @nx/react:library ui --publishable --importPath=@myorg/ui

Enforcing Module Boundaries

Use the @nx/enforce-module-boundaries ESLint rule to prevent circular dependencies and restrict which projects can import each other.

// nx.json or .eslintrc
"depConstraints": [
  // Apps can only import from libs:
  { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] },
  // Feature libs can't import other feature libs (via shared libs only):
  { "sourceTag": "type:feature", "notDependOnLibsWithTags": ["type:feature"] }
]

Storybook for Shared Libraries

Run Storybook against the UI library to document components in isolation, independent of any app.

# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui

# Run Storybook:
npx nx storybook ui

Testing Libraries

Each library has its own test target. Run tests for the library and all affected apps when the library changes.

# Test specific library:
npx nx test ui

# Test all affected by a change:
npx nx affected --target=test

Version Management in Monorepos

In a monorepo, all packages share a single package.json and version. For publishable libraries, use tools like @jscutlery/semver or Changesets to manage independent versioning.

Migrating Existing Code into Libraries

Move shared code to a library gradually: create the library, move files, update imports, and let the TypeScript path aliases handle the rest.

# Move a component:
# 1. Copy src/components/Button.tsx → libs/ui/src/lib/Button.tsx
# 2. Export from libs/ui/src/index.ts
# 3. Update imports across apps from relative paths to '@myorg/ui'
# 4. Delete the original file

Documentation with Compodoc or Storybook Docs

Use Storybook's autodocs tag or Compodoc to generate API documentation from TypeScript types and JSDoc comments in library files.

Quick Check

What should be the single entry point for consumers importing from a shared Nx library?

Recap

Generate libraries with nx generate, export everything from a single index.ts, and enforce module boundaries with ESLint rules. Use buildable libraries for faster incremental builds and publishable libraries when you need to release to npm. Run Storybook against UI libraries for isolated documentation.

Frequently asked questions

Is the “Shared Libraries & Internal Packages” lesson free?

Yes — the full text of “Shared Libraries & Internal Packages” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Shared Libraries & Internal Packages”?

Create shared UI and utility libraries and import them across apps with TypeScript path aliases. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Shared Libraries & Internal Packages” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy