Monorepos for Frontend Teams: 2025 Best Practices

Monorepos have become the standard for frontend development. Here's how to do them right.

Why Monorepos in 2025?

1. Code Sharing: Reuse components across projects
2. Dependency Management: Single node_modules
3. Atomic Changes: Update API and UI together
4. Standardization: Consistent tooling

Tool Comparison

Core Concepts

Workspace Structure

my-monorepo/
├── apps/
│   ├── web-app/
│   ├── admin-app/
│   └── docs/
├── packages/
│   ├── ui/
│   ├── utils/
│   └── config/
├── package.json
└── turbo.json

Package Boundaries

graph TD
    A[apps/web] --> B[packages/ui]
    A --> C[packages/utils]
    D[apps/admin] --> B
    D --> C
    B --> E[packages/icons]

Turborepo Setup

turbo.json

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "test": {
      "dependsOn": ["build"],
      "outputs": []
    },
    "lint": {
      "outputs": []
    }
  }
}

Package Tasks

{
  "scripts": {
    "build": "tsc",
    "test": "vitest run",
    "lint": "eslint ."
  }
}

Advanced Patterns

1. Shared Configs

// packages/config/eslint-config/index.js
module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  rules: {
    // Shared rules
  }
};

2. Component Development

Using Storybook in the monorepo:

# Run Storybook for UI package
turbo run storybook --filter=ui

CI/CD Optimization

1. Affected Projects: Only build/test changed code
2. Caching: Reuse build artifacts
3. Parallel Execution: Speed up pipelines
4. Incremental Builds: Faster iterations

Dependency Management

1. Version Policies

{
  "dependencies": {
    "react": "18.2.0", // Pinned
    "lodash": "^4.17.21" // Caret
  }
}

2. Internal Packages

Reference local packages:

{
  "dependencies": {
    "@myorg/ui": "workspace:*"
  }
}

Challenges and Solutions

1. Scale Issues: Split into smaller workspaces
2. Tooling Complexity: Standardize configs
3. IDE Performance: Exclude node_modules
4. Team Coordination: Clear ownership

Future of Monorepos

1. AI-Assisted Refactoring: Automatic code moves
2. Federated Monorepos: Cross-repo dependencies
3. Language Agnostic: Better multi-language support
4. Cloud Dev Environments: Instant setup

"Monorepos are like microservices for your codebase - the right boundaries are crucial." - Dan Luu