Monorepo dengan Turborepo: Manage Multiple Packages Secara Efisien

Kalau lo punya project yang terdiri dari beberapa packages (frontend, backend, shared library, UI components), manage semuanya secara terpisah itu nightmare. Monorepo solve masalah ini dengan menaruh semua packages dalam satu repository. Turborepo dari Vercel bikin build dan development di monorepo jadi sangat cepat.

Apa Itu Monorepo?

Monorepo = satu repository yang contains multiple packages. Berbeda dengan polyrepo (setiap package punya repo sendiri), monorepo menaruh semuanya di satu tempat. Google, Meta, dan Twitter pakai monorepo untuk manage codebase mereka yang massive.

Kelebihan monorepo:

Shared code: Library dan utility bisa di-share antar packages tanpa publish ke npm
Atomic changes: Satu commit bisa ubah frontend dan backend sekaligus
Consistent tooling: Semua packages pakai ESLint, Prettier, dan TypeScript config yang sama
Simplified dependency management: Satu lockfile, satu node_modules

Apa Itu Turborepo?

Turborepo adalah build system yang dioptimasi untuk monorepo. Fitur utamanya:

Task orchestration: Jalankan build/test/lint di semua packages secara parallel
Remote caching: Cache hasil build di cloud, supaya CI/CD ga perlu rebuild dari awal
Incremental builds: Hanya rebuild packages yang berubah, bukan semua
Dependency graph: Otomatis detect urutan build berdasarkan dependency antar packages

Setup Monorepo dengan Turborepo

# Create new monorepo
npx create-turbo@latest my-monorepo

# Struktur folder
my-monorepo/
  apps/
    web/          # Next.js frontend
    api/          # Express/Fastify backend
    admin/        # Admin dashboard
  packages/
    ui/           # Shared React components
    utils/        # Shared utility functions
    config/       # Shared configs (ESLint, TS, etc.)
    database/     # Prisma schema + client
  turbo.json      # Turborepo config
  package.json    # Root package.json

Konfigurasi turbo.json

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

"dependsOn": ["^build"] artinya: sebelum build package ini, build dulu semua dependency-nya. Ini bikin urutan build otomatis.

Shared Packages Pattern

Untuk share code antar packages, tambahkan di package.json setiap app:

// apps/web/package.json
{
  "dependencies": {
    "@my-monorepo/ui": "workspace:*",
    "@my-monorepo/utils": "workspace:*",
    "@my-monorepo/database": "workspace:*"
  }
}

workspace:* artinya: ambil dari local workspace, bukan dari npm registry. Perubahan di packages/ui langsung terasa di apps/web tanpa perlu publish.

Tips Monorepo yang Efisien

Pakai TypeScript: Type safety antar packages mencegah bug saat refactor
Limit package scope: Jangan bikin terlalu banyak packages. Mulai dari 3-5, split kalau udah terasa perlu
Remote caching: Setup Turborepo Remote Cache untuk CI/CD yang lebih cepat
Strict boundaries: Pakai ESLint rule untuk prevent import yang ga seharusnya

Kesimpulan

Monorepo dengan Turborepo adalah pattern yang powerful untuk project multi-package. Build yang cepat, shared code yang mudah, dan developer experience yang superior. Mulai dari struktur sederhana, dan scale sesuai kebutuhan.

Mau belajar web development lainnya? Kunjungi everdev.pro.