JS Guide
HomeQuestionsTopicsCompaniesResources
BookmarksSearch

Built for developers preparing for JavaScript, React & TypeScript interviews.

ResourcesQuestionsSupport
HomeQuestionsSearchProgress
HomeQuestionstooling
Next

Learn the concept

Monorepos & Project Architecture

tooling
senior
architecture

What is a monorepo and how do you set one up?

monorepo
turborepo
workspaces
architecture
Quick Answer

A monorepo contains multiple packages/projects in one repository. Use tools like Turborepo, Nx, or pnpm workspaces for dependency management, shared configs, and efficient builds. Benefits include code sharing, atomic changes, and unified tooling.

Detailed Explanation

Monorepo Benefits:

  • Shared code/dependencies
  • Atomic cross-project changes
  • Unified tooling/configs
  • Better collaboration
  • Simplified dependency management

Monorepo Tools:

  • Turborepo: Fast, caching, easy setup
  • Nx: Full-featured, plugins
  • Lerna: Older, simpler
  • pnpm workspaces: Built-in to pnpm

Structure:

  • apps/: Applications
  • packages/: Shared libraries
  • Root configs for tooling

Code Examples

Turborepo setupJSON
// Root package.json
{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint",
    "test": "turbo run test"
  },
  "devDependencies": {
    "turbo": "^1.10.0"
  }
}

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {
      "dependsOn": ["build"]
    }
  }
}

// Folder structure
// my-monorepo/
// ├── apps/
// │   ├── web/         # Next.js app
// │   └── mobile/      # React Native app
// ├── packages/
// │   ├── ui/          # Shared components
// │   ├── config/      # Shared configs
// │   └── utils/       # Shared utilities
// ├── package.json
// └── turbo.json

Real-World Applications

Use Cases

Managing a complex web platform consisting of multiple frontend applications, a shared component library, and several backend microservices

Setting up a monorepo with Turborepo or Nx to enable code sharing between projects, enforce consistent tooling, and optimize builds across the entire codebase through intelligent caching and parallel execution.

Developing an open-source project that offers several related packages (e.g., a UI library, a CLI tool, and a documentation site)

Using pnpm workspaces to manage inter-dependencies between packages, symlink them during development, and facilitate atomic changes across all related parts, simplifying development and release processes.

Refactoring a large monolithic application into smaller, independent services without creating multiple separate Git repositories

Adopting a monorepo structure to logically separate the new services into distinct packages while keeping them within a single repository, allowing for easier cross-service communication during development and atomic commits.

Mini Projects

Simple Monorepo with Shared UI

intermediate

Create a monorepo using pnpm workspaces or Turborepo. Include a 'shared-ui' package with a simple React component and two 'app' packages (e.g., 'web', 'admin') that consume this shared component.

Monorepo with Shared ESLint Config

intermediate

Set up a monorepo and create a 'shared-config' package that exports an ESLint configuration. Apply this shared config to all other packages in the monorepo to enforce consistent linting rules.

Industry Examples

Google

Google famously operates one of the largest monorepos in the world, housing code for many of its major products. This allows for massive code sharing, atomic changes across vast codebases, and unified tooling, although it requires sophisticated internal tooling.

Babel

The Babel transpiler project uses a monorepo (managed with Lerna and now Turborepo) to host its numerous packages (parser, core, presets, plugins). This structure facilitates coordinated development and releases of interdependent packages.

Resources

Turborepo Documentation

docs

pnpm Workspaces

docs

Related Questions

What is npm and how do you manage packages with it?

junior
package-managers

How do you set up CI/CD for a JavaScript project?

mid
ci-cd
Next
How do you create custom ESLint rules and plugins?
Next