Belajar Remix - Tooling Modern & Build Automation

#Pendahuluan

Kalian punya aplikasi yang baik, tetapi kualitasnya hanya sebaik kebiasaan tim. Jika linting, typecheck, dan build hanya berjalan di laptop masing-masing, hasilnya tidak konsisten. Episode 19 mengubah kualitas dari kebiasaan menjadi sistem.

Fondasi tooling Remix sudah kalian kenal: Vite untuk bundling, TypeScript untuk tipe, ESLint dan Prettier untuk gaya kode. Episode ini merangkai semuanya menjadi satu alur otomatis yang berjalan di CI — setiap perubahan kode diuji, dicek, dan dibangun dengan cara yang sama.

Episode 19 akan membahas Remix CLI dan bundling, TypeScript dan schema typing, pipeline CI/CD, serta linting dan build validation sebagai gerbang kualitas.

#Remix CLI dan Bundling

#Perintah Inti Remix

Remix v3 memakai Vite sebagai bundler, dan CLI menyediakan perintah-perintah penting untuk dev, build, dan typecheck:

npm run dev          # dev server dengan HMR
npm run build        # build production
npm run typecheck    # memeriksa tipe TypeScript
npm run lint         # memeriksa kualitas kode

Perintah typecheck menjalankan tsc tanpa emit — memeriksa seluruh project tanpa menghasilkan file. Menjalankan ini di CI menangkap error tipe sebelum masuk produksi.

#Membaca Output Build

Saat build selesai, log menunjukkan ukuran bundle. Bundle yang membengkak tanpa alasan adalah sinyal untuk memeriksa import dan code-splitting. Jadikan audit bundle bagian dari kebiasaan tim.

#TypeScript dan Schema Typing

#Konfigurasi Ketat

Project Remix scaffolding sudah memakai strict: true. Di project besar, tambahkan opsi seperti noUncheckedIndexedAccess untuk keamanan akses array. Semakin ketat tipe, semakin banyak bug yang dicegat saat menulis, bukan saat produksi.

#Schema Typing dengan Zod

Schema typing menyatukan validasi dan tipe. Schema Zod menghasilkan tipe TypeScript yang sama-sama dipakai di client dan server:

Satu schema, dua lapisan

import { z } from "zod";
 
export const schemaPost = z.object({
  judul: z.string().min(3).max(100),
});
 
export type DataPost = z.infer<typeof schemaPost>;
 
export async function loader() {
  const data: DataPost[] = await ambilPost();
  return data;
}

z.infer membuat tipe dari schema, sehingga tidak ada dua definisi yang bisa tidak sinkron. Perubahan schema otomatis mengubah tipe di seluruh aplikasi.

#Pipeline CI/CD untuk Aplikasi Remix

#Pipeline yang Baik

Pipeline CI/CD ideal menjalankan langkah dengan urutan yang jelas dan gagal cepat:

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

Pipeline ini menjalankan typecheck, lint, dan build di setiap push dan pull request. Jika satu langkah gagal, sisanya tidak berjalan — kesalahan terdeteksi lebih awal.

#Deploy Otomatis

Setelah quality lulus, pipeline bisa melanjutkan ke deployment. Branches main dan staging bisa memicu deploy ke environment berbeda, sementara pull request memicu preview environment. Otomasi ini membuat rilis rutin tidak menakutkan.

#Linting, Formatting, dan Build Validation

#ESLint sebagai Penjaga

ESLint menangkap pola yang rawan bug dan ketidakkonsistenan. Konfigurasi Remix mencakup aturan React dan hooks. Jalankan lint di CI; anggap warning sebagai error di production agar standar terjaga.

#Prettier untuk Keseragaman

Prettier menghentikan debat format kode selamanya — semua orang menulis format yang sama. Integrasikan Prettier dengan editor dan git hook agar format otomatis sebelum commit. Jangan lupa menambahkan Prettier ke pipeline.

#Build Validation sebagai Gerbang Terakhir

Jadikan build sukses sebagai syarat deploy. Jika build gagal di CI, tidak ada yang masuk produksi — tidak peduli seberapa penting fiturnya. Gerbang ini sederhana tapi menjaga produksi tetap hijau.

#Penutup

Episode 19 mengotomasi kualitas: Remix CLI dan Vite untuk dev dan build, TypeScript ketat dengan schema typing, pipeline CI/CD yang gagal cepat, serta linting, formatting, dan build validation sebagai gerbang. Kualitas kini bukan kebiasaan perorangan, melainkan sistem.

Inti yang harus dibawa pulang:

• Remix CLI menyediakan dev, build, typecheck, dan lint.
• Jalankan typecheck dan lint di CI untuk menangkap masalah lebih awal.
• z.infer membuat tipe TypeScript dari schema Zod.
• Pipeline CI gagal cepat: typecheck, lint, lalu build.
• Preview environment untuk pull request memudahkan review.
• Build yang sukses adalah syarat wajib sebelum deploy.

Di episode 20 selanjutnya kita akan membahas deployment dan hosting — opsi deployment di Vercel, Netlify, Cloudflare Pages, dan Fly.io, pemilihan server versus edge, build output dan asset deployment, serta preview environment dan rollbacks. Build sudah terotomasi; sekarang saatnya aplikasi kalian tinggal di dunia nyata.