Exploring Monorepo Strategies and Practices for Front‑end Development

Monorepo is a "single repository multiple packages" code management strategy that has gained attention due to its adoption by large companies and open‑source projects. This article focuses on the application and practice of Monorepo in front‑end development.

It defines "code" as source files written in programming languages and "repository" as the storage for all code files and change information, typically a Git repository. Managing code effectively is crucial for project progress.

The author’s team needed to develop several Vue 3 component collections (UI, Map, Chart) and chose Vitepress for documentation. Splitting the work into three separate repositories caused duplicated environments and documentation overhead, leading them to explore Monorepo.

Concept Exploration

Monorepo places multiple independent code projects in a single repository while keeping each project logically independent. It can be used across languages and business domains, but requires strong repository infrastructure.

Major adopters include Google, Facebook, Uber, Microsoft, and front‑end libraries such as Vue, React, Vite, Babel, Element‑plus.

Comparison with Other Strategies

Three common strategies are compared:

Monorepo – one repository, multiple independent packages that can share code via tooling.

Single‑repo Monolith – one repository without explicit package separation; modules are split by design.

Multi‑repo – multiple repositories, each containing a package; sharing is done via npm or other package managers.

Each strategy can be transformed into another; a Monorepo may contain several Single‑repo Monoliths, and a Multi‑repo can contain Monorepos.

Architecture Comparison Example

A simple front‑end scenario with two projects (Project1, Project2) and a shared library (lib) illustrates the differences.

Single‑repo Monolith structure:

// Repository - monolith
.
├── package.json
├── src/
│   ├── views/
│   │   ├── project1/
│   │   ├── project2/
│   ├── router/
│   │   ├── project1/
│   │   ├── project2/
│   └── lib/
└── README.md

Multi‑repo structure:

// Repository - project1
.
├── node_modules/
├── package.json
├── src/
│   ├── views/
│   ├── router/
└── README.md

// Repository - project2 (same layout)

// Repository - lib (same layout)

Monorepo structure with pnpm workspaces:

// Repository - monorepo
.
├── node_modules/
├── package.json
├── packages/
│   ├── package1/
│   │   ├── src/
│   │   ├── package.json
│   ├── package2/
│   │   ├── src/
│   │   ├── package.json
│   └── lib/
│       ├── src/
│       ├── package.json
├── pnpm-workspace.yaml

// pnpm-workspace.yaml
packages:
  - 'packages/*'

Code sharing example:

import { method } from '@my-scope/lib';

Trend Analysis

The article outlines three historical periods: Monolith, Multi‑repo, and Monorepo, describing why each emerged and how tooling (Yarn workspaces, pnpm, Lerna, Changesets, Turborepo) has matured.

Core Technologies

Package management solutions:

Yarn workspaces – early support for Monorepo.

pnpm – fast, disk‑space efficient, native Monorepo support.

Version management tools:

Lerna – handles multi‑package versioning and publishing.

Changesets – focused on changelog and version bumping.

Build acceleration:

Turborepo – caches build artifacts and runs tasks in parallel.

Auxiliary Tools

Code quality:

ESLint – static analysis and auto‑fix.

Prettier – code formatting.

Commit workflow:

Commitizen – interactive commit messages.

Commitlint – commit message validation.

Husky + lint‑staged – Git hooks for linting and formatting.

Documentation service:

Vitepress – generates static documentation sites.

Practical Implementation

The author provides step‑by‑step commands to set up a Monorepo with pnpm, Changesets, ESLint/Prettier, Commitizen/Commitlint, Husky, and Vitepress. Representative commands include:

npm install pnpm -g

pnpm install @changesets/cli -DW

pnpm changeset init

pnpm set-script prepare "husky install"

npx husky add .husky/pre-commit "npx lint-staged"

pnpm install vitepress -DW

Finally, the article concludes that Monorepo is a powerful strategy for front‑end projects with moderate code scale, unified technology stack, and collaborative culture, while acknowledging potential drawbacks such as permission management and performance at very large scales.