11^th Practical Class:
Monorepo with Nx

👉 https://monorepo.tools/ 👈

Effective React Development With Nx book

Nx 🐋

• 🛠️ monorepo tooling: ➡️ https://nx.dev/
• 🔌 plugins
  • JS: React, Vue, Angular, Svelte, Express, Vite, Rollup, Jest, Cypress, ...
  • Go, .Net, Docker, ...
  • ➕ community plugins: Rust, Java, ...
  • ✅ std commands for: build, test, lint, format
  • 🏗️ generators
• 🕸️ dependency graph
• 🏃 distributed cache
• 🔌 IDE plugins (VS Code, WebStorm)

🪜 Step 1. - generate empty Nx workspace

• Fast Node Manager ()

Prompts:

• Where would you like to create your workspace? ›
• Which stack do you want to use? ›
• Package-based monorepo, integrated monorepo, or standalone project? ›
• Enable distributed caching to make your CI faster ›

🪜 Step 2. add Nx plugins

🪜 Step 3. - Generate Frontend App ⚛️

generate React app:

🪜 Step 4. - add

Run task on project

• run tasks on all projects

• run tusks only on projects affected by change

Nx Graph

Open http://localhost:8888/projects

Add More

Enforce Module Boundaries

https://nx.dev/core-features/enforce-module-boundaries

Advanced Nx

Nx Cloud ☁️
Distributed 📦 Cache

Nx Cloud ☁️
Distributed 🏃 Task Execution

Parallel

Parallel + Distributed

🔄 CI/CD Setup

👉 https://nx.dev/recipes/ci 👈