Belajar TanStack - Tooling Modern & Build Automation

#Pendahuluan

Kode yang benar secara logika belum tentu siap dikirim ke production tanpa tooling yang benar. Episode 19 membahas tooling modern dan build automation untuk aplikasi TanStack: memilih bundler antara Vite, Webpack, atau esbuild, integrasi TypeScript untuk build yang type-safe, manajemen dependency dan konfigurasi plugin, serta pipeline CI/CD.

Perjalanan episode 3 sampai 18 membangun kode aplikasi; episode 19 beralih ke infrastruktur yang membawa kode itu ke bentuk siap rilis. Kalian akan belajar bahwa build pipeline yang baik mencegah error masuk production, mempercepat feedback loop, dan membuat tim berkembang dengan aman.

Di akhir episode, kalian bisa mengonfigurasi project TanStack dari nol sampai tersambung ke pipeline CI/CD yang menjalankan lint, type check, dan build otomatis.

#Memilih Build Tooling: Vite, Webpack, atau esbuild

#Vite untuk Kecepatan Development

Vite menjadi pilihan utama karena kombinasi esbuild untuk transformasi cepat saat development dan Rollup untuk bundling production yang optimal. HMR yang nyaris instan membuat iterasi UI TanStack sangat cepat.

npm i @tanstack/react-query @tanstack/react-table @tanstack/react-router
npm i -D @types/node typescript vite @vitejs/plugin-react

Perintah npm i @tanstack/react-query @tanstack/react-table @tanstack/react-router memasang runtime, sedangkan paket kedua berisi tooling untuk development. Pemisahan dependencies dan devDependencies penting agar ukuran bundle production tidak membawa tooling yang tidak terpakai.

#Webpack untuk Legacy dan Monorepo

Webpack masih relevan untuk codebase lama atau monorepo dengan banyak entry point. Konfigurasinya lebih verbose, tapi loader ecosystemnya paling matang. esbuild sendiri dipakai sebagai transpiler cepat untuk TypeScript dan JSX sebelum masuk ke bundler lain.

#Membandingkan Strategi

Pilihan tooling bukan soal benar atau salah, melainkan konteks. Project baru dengan TanStack disarankan memakai Vite karena cepat dan konfigurasi singkat. Kalian tetap bisa menambahkan esbuild untuk langkah transformasi tertentu, atau mempertahankan Webpack jika monorepo sudah terlanjur bergantung padanya.

#Integrasi TypeScript dan Build Type-safe

TypeScript adalah tulang punggung type safety TanStack. Agar build benar-benar type-safe, jalankan tsc --noEmit terpisah dari bundler, karena Vite dan esbuild mengabaikan error tipe demi kecepatan.

Script type check dan build

{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "build": "tsc --noEmit && vite build"
  }
}

Script "typecheck": "tsc --noEmit" memastikan semua tipe valid sebelum bundle dibuat. Dengan menggabungkannya ke build, kalian tidak akan pernah mendapatkan artefak yang lahir dari kode yang melanggar kontrak tipe.

#Manajemen Dependency dan Konfigurasi Plugin

#Lockfile dan Upgrade Terkendali

Konsistensi dependency dijaga lewat lockfile dan resolusi yang deterministik. Selalu commit lockfile dan hindari npm install acak di mesin masing-masing.

bun install --frozen-lockfile
npm ci

npm ci menginstall persis sesuai lockfile dan menolak jika lockfile tidak sinkron dengan package.json. Ini adalah perintah standar di pipeline CI agar hasil build deterministik di semua environment.

#Konfigurasi Plugin di Vite

Plugin Vite untuk TanStack Router dan React ditambahkan lewat vite.config.ts. Plugin Router bertanggung jawab atas code splitting otomatis per route.

Vite config dengan plugin TanStack

import { tanstackRouter } from "@tanstack/router-vite-plugin"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react(), tanstackRouter()],
})

Fungsi defineConfig({ plugins: [react(), tanstackRouter()] }) mendaftarkan kedua plugin. Order plugin penting: React dijalankan lebih dulu agar JSX ter-transform, lalu plugin Router memproses route tree.

#Pipeline CI/CD untuk Aplikasi TanStack

Pipeline CI/CD mengotomatiskan verifikasi kualitas sebelum deploy. Untuk project TanStack, tahapan minimalnya adalah install, lint, typecheck, dan build. Setiap tahap dijalankan dalam environment yang bersih agar hasilnya reproduksibel.

name: ci
on:
  pull_request:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run lint
      - run: npm run typecheck
      - run: npm run build

Blok steps pada workflow di atas berisi empat perintah: npm ci, npm run lint, npm run typecheck, dan npm run build. Jika salah satu gagal, pipeline berhenti dan PR tidak bisa di-merge sebelum diperbaiki. Inilah garis pertahanan pertama sebelum kode menyentuh production.

#Penutup

Episode 19 menutup tooling modern dan build automation: strategi memilih Vite, Webpack, dan esbuild, integrasi TypeScript dengan typecheck terpisah, manajemen dependency dengan lockfile, serta pipeline CI/CD yang menjalankan verifikasi otomatis.

Inti yang harus dibawa pulang:

• Vite direkomendasikan untuk project TanStack baru karena cepat dan ringkas.
• Jalankan tsc --noEmit terpisah dari bundler agar tipe benar-benar diperiksa.
• Pisahkan dependencies dan devDependencies agar bundle production bersih.
• Lockfile dan npm ci membuat instalasi deterministik di CI.
• Plugin Router otomatis menangani code splitting per route.
• Pipeline CI menjalankan install, lint, typecheck, dan build sebelum rilis.

Di episode 20 selanjutnya kita akan membahas production deployment — men-deploy aplikasi TanStack Query dan Router, opsi hosting untuk SPA dan aplikasi server-rendered, manajemen environment variables dan runtime config, serta optimasi build untuk production. Kode dan pipeline kalian sudah siap, saatnya membawa aplikasi ke dunia nyata!