What is a Monorepo?

• Best source: [monorepo.tools](https://monorepo.tools)
• Inspired by John’s presentation
• A single repository with multiple linked projects
• Why use a monorepo?
  • No overhead for new repositories (avoids extra git/pipelines/boards)
  • One version across all packages (avoids versioning hell)
  • Single commit fixes everything (ensures atomic changes)

---

My Take on Monorepos

Monorepo is a new code organization abstraction, evolving from:

• Function/Routine → Class → Project

Project Tools Evolution:

• YUI Compressor → Ant → Flex → Grunt → Gulp → Webpack → TypeScript → Rust tools?

Monorepo Evolution:

• Polyrepo (npm linking) → Linking Scripts → Lerna → Rush → Nx

---

Tools & Features

Popular Monorepo Tools

• Lerna
• Nx
• Rush
• Bazel / Gradle / Turborepo

Core Features

1. Linking Projects/Packages (npm link) – enables cross-package imports
2. Task Runners – execute scripts
   • Parallel Execution
   • Ordered Execution

---

FooUpgrade (Task Runner)

Using Lerna under the hood as a task runner:

foo start fx --env.dev1 --fast  
npx lerna ls -la  

---

Why Upgrade to Nx?

Key Reasons:

• Nx (by Nrwl) takes over Lerna → [Lerna Docs](https://lerna.js.org/docs/lerna-and-nx)
• Visualized Graphs – Improved dependency tracking
• Faster Builds – Caching results locally & remotely
• Nx Console & Tooling – Advanced task management
• Move & Refactor Support – Controlled project reorganization
• Code Generators – Automate repetitive code tasks
• CI Improvements – Avoids rebuilding everything for a single change
• Potential AI Integration – Metadata & automation

---

Main Challenges in Migration

• Hybrid Structure Issues – Some packages have package.json, others don’t
• Codegen Packages Not Recognized
• nx init failed to build the project graph
• Custom Conventions Conflicts
  • Lerna vs. Nx (tsconfig.base.json vs. tsconfig.json)
  • No src/, dist/, folder structure in Nx
• Command Differences – Older Lerna workflows need adaptation
• CI Caching Strategy – How to reuse build cache efficiently?

---

Upgrade Process

1 SIMPLE useNx flag in Lerna

• Claiming 2-10x faster builds using Nx execution in Lerna (from version 8+)
• Install caching with Lerna and enable it:

  npx lerna add-caching

• Verify the dependency graph:

  nx graph

• Example image reference:

---

2 FULL Migration using nx init

• Manual migration for full control
• Define nx.json, specify inputs/outputs for dist

  "build": {
    "dependsOn": ["^build"],
    "inputs": ["{projectRoot}/**/*"],
    "outputs": ["{projectRoot}/dist"],
    "cache": true
  }

• Define custom sourceRoot in {projectRoot}/index.ts
• Use project.json to define project type (e.g., shell/common)
• Set "implicitDependencies": ["dtp-client-rxjs"]

---

DEMO: Nx in Action

1 Checking Available Projects

nx show projects
nx show projects --with-target=build
nx show project dtp-client-shell

2 Task Build Cache

nx build dtp-client-rxjs
rm -rf dist && nx build dtp-client-rxjs

3 Visualizing Dependency Graph

nx graph

📌 Troubleshooting: Use nx reset if needed

4 Affected Builds (Optimized Execution)

nx affected --base=main --head=HEAD --graph
nx affected --base=HEAD --target=build --graph --uncommitted

---

5.Run All Builds in Parallel

nx run-many --target=build --all --parallel=5

• Example image reference:

---

Future Enhancements

• Resolve tsconfig.root issues for better project referencing
• Use Nx DevKit Plugin System to define certain features declaratively
• Integrate AI-powered project metadata analysis (e.g., Copilot, AI tools)

---

Q&A 🎤

Let's Discuss the Migration Process!