Belajar Remix - Configuration & Environment

#Pendahuluan

Sampai episode 7, semua aplikasi kalian berjalan dengan konfigurasi bawaan. Di production, itu tidak cukup: kalian butuh secret, env yang berbeda antar lingkungan, pilihan adapter, dan build yang dioptimalkan. Episode 8 adalah lapisan konfigurasi.

Perubahan terbesar yang harus kalian pegang: sejak Remix v3, semua konfigurasi hidup di vite.config.ts. File remix.config.js yang sering muncul di tutorial lama sudah tidak dipakai. Vite menjadi bundler sekaligus dev server, sehingga satu sistem konfigurasi menangani semuanya.

Episode 8 akan membahas vite.config.ts, environment variables, pemilihan adapter dan runtime, pengelolaan aset statis, serta optimasi build.

#Konfigurasi Build di vite.config.ts

#Pusat Konfigurasi Baru

Semua opsi Remix dikonfigurasi lewat plugin remix() di dalam defineConfig Vite. Beberapa opsi penting yang bisa diatur di sana:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
 
export default defineConfig({
  plugins: [
    remix({
      future: { v3_fetcherPersist: true },
    }),
    tsconfigPaths(),
  ],
  build: { target: "node20" },
});

Opsi future pada plugin remix mengaktifkan perilaku versi berikutnya secara bertahap. Dengan pola ini, upgrade Remix besar tidak harus sekaligus — fitur baru diaktifkan satu per satu.

#Jangan Simpan Secret di sini

Konteks penting: file ini dikompilasi dan bisa ikut ke client bundle untuk kode yang di-import dari sana. Karena itu, jangan pernah menuliskan secret langsung di vite.config.ts. Secret hanya boleh masuk lewat environment variables yang dibaca di server.

#Environment Variables

#Memisahkan Kode dari Konfigurasi

Environment variables memisahkan konfigurasi dari kode: nilai berubah per lingkungan, kode tidak. Di Node.js, nilai diakses lewat process.env. Di Remix, tempat yang aman untuk membacanya adalah loader, action, atau modul yang hanya dijalankan di server.

Membaca env var di loader

export async function loader() {
  const apiUrl = process.env.API_URL;
  const apiKey = process.env.API_KEY;
  return { apiUrl };
}

process.env.API_KEY hanya tersedia di server — jangan pernah mengirimnya ke client. Bila sebuah nilai memang harus terlihat di browser, beri nama dengan prefiks dan baca di root loader, lalu bagikan lewat context.

#Manajemen Env Lokal

Buat file .env atau .env.local di root project untuk nilai lokal. Platform hosting modern mendukung pengaturan env yang sama secara grafis atau lewat CLI. Environment variables antar environment: development, staging, dan production harus dibedakan dengan hati-hati agar secret staging tidak bocor ke production.

#Build Target, Adapter, dan Runtime

#Adapter Menentukan Platform

Adapter adalah jembatan antara Remix dan server host. Remix v3 membawa beberapa adapter bawaan: Node.js, Vercel, Netlify, Cloudflare, dan Deno. Pilihan adapter menentukan bagaimana server bundle dibangun dan dijalankan.

npm view @remix-run/node version
npm view @remix-run/cloudflare-pages version
npm view @remix-run/vercel version

Pilih adapter sesuai platform deployment; tiap adapter menyesuaikan entry.server dan build output. Tidak masalah berpindah adapter nanti, tapi lebih baik menentukan dari awal.

#Runtime Server versus Edge

Adapter juga menentukan runtime: Node.js yang lengkap, atau edge yang ringan dan cepat. Runtime berbeda punya dukungan API berbeda — misalnya akses filesystem tidak ada di edge. Detail perbandingan ini akan dibahas mendalam di episode 21.

#Pengelolaan Aset di public dan Import

#Folder public

Semua file di folder public disalin apa adanya ke output build. Tempatkan di sini file yang tidak perlu diproses bundler: favicon, robots.txt, manifest, dan gambar statis. Nama file di public diakses langsung dari root, misalnya public/logo.svg menjadi /logo.svg.

#Import Aset Melalui Bundler

Untuk aset yang ingin dioptimalkan bundler — hash nama file, kompresi, atau inline — import langsung di kode. Vite menangani tipe aset umum seperti gambar, CSS, dan font. Hasilnya nama file diberi hash sehingga caching bisa sangat agresif.

#Optimasi Build

#Build Production

Jalankan build untuk melihat hasil optimasi:

npm run build
npm run start

Build menghasilkan folder build dengan server bundle dan aset statis yang siap dideploy. Perhatikan ukuran bundle di log — angka besar di awal bisa jadi indikasi import yang tidak perlu.

#Pengurangan Bundle

Optimasi utama di Remix datang dari struktur: tiap route membawa kodenya sendiri, dan import statis besar bisa dibuat lazy. Hindari mengimpor library besar di root layout jika hanya dipakai satu route. Praktik code-splitting dan tree shaking akan diperdalam di episode 19.

#Penutup

Episode 8 memberi kalian kendali atas konfigurasi: vite.config.ts sebagai pusat build, environment variables untuk memisahkan kode dari konfigurasi, adapter dan runtime untuk platform deployment, folder public untuk aset statis, serta praktik build yang dioptimalkan.

Inti yang harus dibawa pulang:

• Semua konfigurasi Remix v3 hidup di vite.config.ts; remix.config.js sudah tidak dipakai.
• Jangan simpan secret di kode atau konfigurasi; gunakan environment variables.
• process.env dibaca di loader dan action, tidak pernah dikirim langsung ke client.
• Adapter menentukan platform: Node, Vercel, Netlify, Cloudflare, atau Deno.
• Folder public disalin apa adanya; aset lain diimport lewat bundler.
• Build production menciptakan bundle yang siap dideploy dan layak diaudit ukurannya.

Di episode 9 selanjutnya kita akan membahas caching dan performa — cache headers dan cache control, data revalidation dengan stale-while-revalidate, optimasi gambar, serta monitoring performa dengan Lighthouse. Konfigurasi sudah rapi; sekarang saatnya membuat aplikasi kalian terasa cepat.