Mastering pnpm Workspaces - Monorepo Management

A comprehensive demonstration of pnpm workspaces featuring shared packages, TypeScript configuration, and modern development tools.

Project Structure

├── apps/
│   ├── web-app/          # React frontend with Vite & Tailwind
│   └── api-server/       # Express.js API server
├── packages/
│   ├── utils/            # Shared utility functions
│   ├── ui-components/    # React component library
│   └── api-client/       # HTTP client for API communication
├── tools/
│   └── eslint-config/    # Shared ESLint configuration
├── pnpm-workspace.yaml   # Workspace configuration
└── package.json          # Root package configuration

Quick Start

1. Install dependencies:

   pnpm install

2. Build all packages:

   pnpm build

3. Start development servers:

   # Terminal 1: Start API server
   pnpm dev:api
   
   # Terminal 2: Start web app
   pnpm dev:web

4. Open your browser:

   • Web App: http://localhost:3000
   • API Server: http://localhost:3001

Packages

@monorepo/utils

Shared utility functions including:

• Currency formatting
• Debounce function
• String slugification
• Logger class
• API response types

@monorepo/ui-components

React component library with:

• Button component (multiple variants)
• Card component
• TypeScript definitions
• Tailwind CSS styling

@monorepo/api-client

HTTP client for API communication:

• Axios-based client with interceptors
• UserService with CRUD operations
• Error handling and logging
• TypeScript interfaces

Available Scripts

Root Level Commands

• pnpm install - Install all dependencies
• pnpm build - Build all packages
• pnpm dev:web - Start web app in development mode
• pnpm dev:api - Start API server in development mode
• pnpm lint - Lint all packages
• pnpm type-check - Type check all packages
• pnpm clean - Clean all build outputs

Package-Specific Commands

# Build specific package
pnpm --filter @monorepo/utils build

# Run tests for specific package
pnpm --filter @monorepo/ui-components test

# Add dependency to specific package
pnpm --filter @monorepo/web-app add lodash

Development Workflow

1. Make changes to any package
2. Build dependencies if needed: pnpm build
3. Start development servers to see changes
4. Lint and type-check: pnpm lint && pnpm type-check

Key Features

• TypeScript: Full TypeScript support with shared configuration
• Hot Reloading: Fast development with Vite and tsx
• Shared Dependencies: Efficient dependency management with pnpm
• Modern Tooling: ESLint, Tailwind CSS, tsup bundling
• Workspace Protocol: Inter-package dependencies using workspace:*
• Monorepo Scripts: Coordinated build and development scripts

Learn More

This project demonstrates the concepts covered in the blog post: "Mastering pnpm Workspaces: A Complete Guide to Monorepo Management"

Key concepts showcased:

• Workspace configuration
• Package interdependencies
• Shared tooling configuration
• Development workflow optimisation
• TypeScript path mapping
• Build coordination

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run pnpm lint && pnpm type-check
5. Submit a pull request