Belajar Remix - Memulai Proyek Remix

#Pendahuluan

Dua episode pertama membangun pemahaman. Mulai episode ini, kalian akan mengetik sendiri. Tujuan akhirnya sederhana: sebuah project Remix yang berjalan, tersusun rapi, dan siap diisi konsep-konsep berikutnya.

Remix memakai scaffolder resmi create-remix untuk membangun kerangka project. Yang menarik, hasil scaffolding-nya minimal: bukan boilerplate raksasa dengan ratusan file, melainkan struktur ramping yang bisa kalian pahami file per file. Ini sejalan dengan filosofi Remix yang menekankan pemahaman alur dibanding abstraksi berlapis.

Episode 3 akan membawa kalian dari kosong menjadi project berjalan: membuat project, membaca struktur folder, menjalankan dev server, lalu merapikan konfigurasi TypeScript, ESLint, dan Prettier.

#Membuat Project dengan npx create-remix

#Menjalankan Wizard

Buka terminal, pindah ke folder tempat kalian menyimpan project, lalu jalankan perintah berikut:

npx create-remix@latest belajar-remix-app

Perintah npx create-remix@latest belajar-remix-app akan men-download scaffolder dan menampilkan wizard interaktif. npx memastikan kalian memakai versi terbaru, jadi tidak perlu menginstall scaffolder secara global.

#Pilihan Penting dalam Wizard

Wizard akan menanyakan beberapa opsi yang memengaruhi struktur project:

• Deploy target: pilih platform tujuan. Untuk belajar lokal, opsi yang berbasis Node.js atau self-hosted paling nyaman. Adapter lain akan dibahas di episode 20.
• TypeScript atau JavaScript: pilih TypeScript untuk mendapatkan type safety sejak awal — ini rekomendasi resmi Remix.
• Apakah langsung install dependency: pilih ya, atau jalankan npm install secara manual setelah scaffolding selesai.

#Struktur Folder dan Konfigurasi Awal

#Membaca Struktur Project

Setelah scaffolding selesai, buka folder yang dihasilkan:

belajar-remix-app/
  app/
    routes/
    entry.client.tsx
    entry.server.tsx
    root.tsx
  public/
  .eslintrc.cjs
  .prettierrc
  package.json
  tsconfig.json
  vite.config.ts

Perhatikan bahwa tidak ada remix.config.js — sejak Remix v3, konfigurasi memakai vite.config.ts. File entry.client.tsx dan entry.server.tsx adalah titik masuk aplikasi di browser dan server.

#vite.config.ts

Buka vite.config.ts. Isinya ringkas: plugin Remix dan deklarasi server eksperimental jika dipakai.

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

Konfigurasi ini memberitahu Vite untuk memakai plugin Remix sebagai bundler utama. Plugin remix() dari @remix-run/dev mengelola seluruh build, dev server, dan route manifest.

#Menjalankan Dev Server dan Hot Reload

#Memulai Dev Server

Dengan dependency terinstall, jalankan perintah berikut:

npm run dev

Setelah beberapa detik, Vite akan menyiapkan server dan menampilkan URL. Buka http://localhost:3000 di browser. Jika halaman awal Remix muncul, project kalian berjalan dengan benar.

#Hot Module Replacement

Ubah teks pada halaman beranda, misalnya di app/routes/_index.tsx, lalu simpan. Browser langsung memperbarui tanpa reload penuh. Ini kerja Hot Module Replacement (HMR): perubahan modul di-send ke browser secara real-time, sementara state halaman yang tidak berubah tetap dipertahankan.

Dev server Remix berbasis Vite ini juga menangani perubahan file di server — loader, action, dan modul server lain ikut di-reload otomatis. Tidak perlu memulai ulang server secara manual.

#TypeScript, ESLint, dan Prettier

#TypeScript dengan Mode Ketat

Project hasil scaffolding sudah memakai TypeScript dengan strict: true di tsconfig.json. strict: true memaksa kalian menulis tipe secara eksplisit, sehingga bug di loaders, actions, dan props komponen tertangkap sejak waktu menulis. Kebiasaan mengetik semua data yang keluar dari loader akan sangat membantu di episode 10 dan 18.

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "types": ["@remix-run/node"]
  },
  "include": ["**/*.ts", "**/*.tsx"]
}

#ESLint dan Prettier

Scaffolder menyediakan konfigurasi ESLint berbasis eslint-config-react-app dari Remix. Jalankan pemeriksaan dan perbaikan otomatis lewat script yang tersedia:

npm run lint
npx prettier --write .

Perintah npm run lint memeriksa potensi bug dan pola tidak konsisten, sedangkan npx prettier --write . merapikan format seluruh file. Biasakan menjalankan keduanya sebelum commit — lint dan format yang rapi akan mempermudah review kode di project tim.

#Penutup

Episode 3 menuntaskan setup: project Remix v3 berbasis Vite sudah berjalan dengan dev server, struktur folder dipahami, dan TypeScript, ESLint, serta Prettier siap menemani pengembangan. Fondasi teknis sekarang benar-benar siap.

Inti yang harus dibawa pulang:

• npx create-remix@latest nama-app membangun project lewat wizard interaktif.
• Struktur inti ada di app/routes, app/root.tsx, dan entry files.
• Konfigurasi build berada di vite.config.ts, bukan remix.config.js.
• npm run dev menjalankan dev server dengan HMR untuk client dan server.
• TypeScript dengan strict mode aktif sejak scaffolding.
• Jalankan npm run lint dan npx prettier --write . sebelum commit.

Di episode 4 selanjutnya kita akan membahas routing dan nested routes — dasar routing Remix, layout sharing dengan Outlet, dynamic routes dan catch-all routes, konvensi route lanjutan, serta navigasi dengan Link dan NavLink. Di sinilah struktur folder yang baru kita buat mulai menunjukkan kekuatannya.