Setup Monorepo with Lerna Part I

Tulisan ini akan sedikit membahas mengenai monorepo beserta latihan proyek sederhana dengan menggunakan lerna.

Monorepo

Monorepo, atau mono repository, adalah strategi dalam software development, di mana kode untuk banyak proyek disimpan dalam satu repository yang sama. Strategi ini sendiri bukan merupakan hal yang baru dalam dunia software development. Beberapa perusahaan besar seperti Google, Facebook, Microsoft, Airbnb, dan Twitter telah mengadopsi monorepo sejak lama.

Advantages of Monorepo.

1. Ease of Code Reuse.

Komunikasi data dan sharing code antar proyek dapat berjalan dengan mudah di monorepo.

2. Simplified Dependency Management.

Dalam penggunaan multiply repository, hal tersulit yang biasanya terjadi adalah saat memantau third party library yang digunakan. Dengan menggunakan monorepo, beberapa library eksternal, atau third party library, dapat diunduh dan dibagikan ke beberapa proyek tanpa perlu berpindah repository.

3. Atomic Commits.

Ketika banyak proyek perlu dikerjakan secara bersama dalam beberapa repository, terdapat berbagai macam hal yang harus dipertimbangkan. Salah satunya adalah bagaimana mengatur kecocokan versi antar proyek yang saling terikat. Contoh, proyek a memiliki ketergantungan terhadap proyek b. Jika a memiliki kebutuhan lain terhadap b, hal yang perlu dilakukan adalah mengubah b dengan meng-update versi terbaru untuk b, lalu a perlu mengunduh kembali versi terbaru tersebut sebagai bentuk penyesuaian. Sulit, bukan? Nah, dengan monorepo, masalah ini bisa diselesaikan dengan mudah.

4. Large Scale for Code Refactoring.

Di dalam monorepo, skala proyek yang besar dengan banyak dependensi yang terikat didalamnya mudah untuk di-refactor.

5. Collaboration Across Teams.

Kolaborasi dalam team menjadi sangat mudah untuk dilakukan karna bekerja didalam satu basis kode yang sama.

Lerna

Mengatur banyak kode di dalam satu repository yang sama tentu bukanlah hal yang mudah. Beragam permasalahan dapat bermunculan, baik terkait sharing code, versioning, dan lain sebagainya. Menjawab permasalahan-permasalahan yang ada, Lerna hadir sebagai tools yang dapat digunakan untuk mengatur beberapa javascript project dalam satu repository.

Lerna sendiri telah digunakan oleh berbagai macam proyek open source di luar sana, seperti Babel, React, Angular, Ember, Meteor, Jest dan lain sebagainya. Bagi kalian yang ingin tahu lebih dalam mengenai pengaplikasian lerna, kalian bisa langsung mengakses official repository lerna di https://github.com/lerna/lerna.

Sudah terbayang bagaimana pengaplikasiannya? Berikut adalah gambaran struktur proyek yang menggunakan lerna,

my-lerna-repo/
  lerna.json
  package.json
  packages/
    package-1/
      package.json
    package-2/
      package.json

File lerna.json akan otomatis dibuat ketika proyek diinisiasi pertama kali.

Secara garis besar, terdapat dua cara penggunaan lerna, yaitu mengunduh secara global dengan npm atau, opsi lain, menggunakan npx, di mana, cukup dengan menggunakan perintah npm install -g lerna, lerna akan terunduh dan tersimpan di komputer kalian.

Membahas cara penggunaannya, kalian hanya perlu memilih lerna init <options> pada proyek kalian. Pilihan options yang ada sendiri merupakan opsi untuk memilih versi. Jika kalian tidak ingin menggunakan versi, kalian cukup menyertakan opsi independent, yaitu seperti ini, lerna init --independent. Tanpa menyertakan tulisan tersebut, maka, secara otomatis, akan include versi di file lerna.json.

Getting Started with Lerna!

Masih belum terbayang? Nah, agar lebih paham, mari kita coba buat proyek sederhana dengan menggunakan lerna! (Siapkan laptop dan kopi hangat! 😀)

Pertama-tama, ada beberapa hal penting yang perlu disiapkan sebelum menggunakan lerna, yaitu,

1. npm,
2. Internet.

Kita akan mulai membuat proyek sederhana dengan lerna. Sebut saja hello-lerna. Setelah memastikan bahwa dua hal di atas sudah siap, silakan copy dan paste baris perintah di bawah ini ke terminal kalian,

mkdir hello-lerna && cd $_; npx lerna init --independent

Jika berhasil, setelahnya, akan muncul tampilan seperti screenshoot di bawah ini,

Berikut adalah daftar komponen yang otomatis terbuat saat pertama kali kalian memulai proyek dengan lerna,

Pada tampilan di atas, terdapat filelerna.json, yang berisi file konfigurasi dari lerna, seperti gambar di bawah ini,

Sementara itu, isi dari filepackage.json akan tampak seperti ini,

Bagian terakhir adalah direktori packages, yaitu direktori kosong yang dapat digunakan untuk menyimpan semua proyek yang kita miliki.

Satu hal yang tidak kalah penting, secara otomatis, saat kita pertama kali menginisiasi proyek dengan lerna, client npm yang digunakan adalah npm, bukan yarn. Jika kalian adalah pengguna yarn seperti saya, hal yang perlu dilakukan adalah merubah konfigurasi lerna di lerna.json. Agar lebih mudah untuk dipahami, berikut adalah sebuah contoh konfigurasi lerna dengan menggunakan yarn,

// lerna.json
{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "yarn"
}

Setelah merubah konfigurasi, silakan npx lerna init kembali untuk memperbarui.

Belum cukup? Baiklah, kita akan coba membuat satu proyek baru dengan nama web. Proyek web akan kita buat di dalam folder packages/. Selanjutnya, ketik perintah cd packages;mkdir web;cd web;yarn init -y di terminal, lalu akan muncul tampilan seperti sreenshoot berikut,

Kemudian, buat file index.js di dalam proyek web dan lengkapi dengan kode di bawah ini,

// index.js
function hello() {
  return `Hello`
}

Untuk melihat perubahannya, kalian dapat membuka kembali ke root direktori dengan perintah cd ../... Jika ingin memastikan apakah proyek yang baru saja dibuat terdaftar atau tidak pada lerna, kalian dapat menggunakan perintah npx lerna list untuk melihat daftarnya,

Dari tampilan tersebut, terlihat di atas ada satu package baru yang berhasil ditambahkan.

Sedikit tambahan, sebenarnya, lerna membaca file package.json yang terdapat pada proyek kalian. Kemudian, pada properti name yang terdapat di package.json, hal tersebut akan diiidentifikasi sebagai nama proyek yang dikenali oleh lerna,

// package.json
{
  "name": "web"
  ...
}

Pada tahap selanjutnya, kita akan buat proyek bernama uikit. Nantinya, proyek ini akan digunakan oleh proyek web,

cd packages;mkdir uikit;cd uikit;yarn init -y

Untuk file index.js, lengkapi dengan kode berikut,

// index.js
function uikit() {
  return `uikit` 
}
module.exports = uikit

Oke, sekarang saatnya kembali ke root dengan cd ../.., lalu cek keberadaanya dengan npx lerna list. Bila kalian melakukan seluruh arahan dengan benar, nantinya akan muncul tampilan seperti screenshoot di bawah ini,

Yes! uikit telah berhasil terdaftar dan sekarang saatnya untuk mengunduh uikit di proyek web. Untuk mengunduh, kalian bisa menggunakan perintah npx lerna add uikit --scope=web, di mana hasilnya akan seperti tampilan berikut,

Jika ingin memastikan apakah proyek uikit telah terunggah di web, kalian dapat melihat daftar dependecies di file package.json yang ada di proyek web.

cat packages/web/package.json

Sekarang, coba kalian edit file index.js yang ada pada proyek web dan lihat apa yang terjadi?

// index.js
const uikit = require("uikit")
function hello() {
  return `Hello ${uikit()}` 
}
console.log(hello())

Nah, saatnya kita coba debug untuk melihat perubahannya. Jika berada di root, cukup ketik perintah ini,

node packages/web/index.js

Jika berhasil, berikut adalah tampilan yang akan kalian peroleh,

Bila kalian merasa kesulitan dalam mengetik npx lerna <command>, kalian dapat mempersingkat dengan menambahkan script perintah tersebut di root proyek kalian,

// package.json
{  
  "scripts": {
     "lerna:add": "lerna add"
  }
}

Bagaimana? Sudah cukup jelas? Kalau disimpulkan, hingga tahap ini, kalian telah berhasil mencoba membuat proyek sederhana dengan lerna.

Mungkin masih banyak dari kalian yang masih bertanya-tanya,

“Apakah Warung Pintar menggunakan lerna?”

“Bagaimana release proyek dengan lerna?”

“Bagaimana mengurus perubahan version?”

“Bagaimana kalau terdapat kombinasi dengan yarn workspaces?”

Kalau kalian bertanya, “Apakah Warung Pintar menggunakan lerna?”

Jawabanya adalah “Ya.” Di Warung Pintar, terdapat beberapa proyek JavaScript dan Node.js yang di-setup dengan menggunakan monorepo agar lebih mudah dari segi penganturan dan cukup fleksibel pula dalam hal code sharing antar proyek.

Menjawab pertanyaan lainnya, tunggu sebentar, supaya bertahap, semua pertanyaan kalian yang masih belum terjawab akan dibahas lebih detail pada Part 2, mulai dari publish, version, kombinasi lerna, serta fitur workspaces yang tersedia yarn.

Sampai bertemu lagi di Part 2! 👋🏼