Lewati ke konten utama
menjadi.dev
Chapter 16.18 DevOps Menengah

Deploy React App

Build dan deploy ke production

Tujuan Pembelajaran

  • Memahami React build process
  • Bisa deploy ke Vercel atau Netlify

Analogi

Diagram 

      Dev Server = Workshop (banyak tool debugging)
Production Build = Showroom (rapi, optimized, minimal)

Production build melakukan optimasi: minification, code splitting, tree shaking

Penjelasan Konsep

Production Build

Production Build adalah versi aplikasi yang dioptimasi untuk production. Build tools seperti Vite melakukan beberapa optimasi:

  1. Minification — Hapus whitespace, comments, rename variables jadi pendek.
  2. Tree Shaking — Hapus code yang tidak digunakan.
  3. Code Splitting — Pecah bundle jadi chunks yang di-load on-demand.
  4. Asset Optimization — Minify CSS, optimize images, add content hashes untuk cache busting.
  5. Environment Variables — Ganti import.meta.env dengan actual values.

Deploy Options

  • Vercel — Optimized untuk React/Next.js, auto deploy dari Git.
  • Netlify — Drag & drop atau connect Git repo.
  • Cloudflare Pages — Edge network, fast global.
  • AWS S3 + CloudFront — Scalable, cost-effective untuk static sites.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami React build process., dan bisa deploy ke Vercel atau Netlify. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Deploy React App, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Production build melakukan optimasi: minification, code splitting, tree shaking. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa bash. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Build generate optimized static files. VITE_ prefix untuk env vars.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

bash 
# BUILD
npm run build

# OUTPUT DI dist/
dist/
  ├── assets/
  │   ├── index-abc123.js     # Hashed untuk cache busting
  │   ├── index-xyz789.css
  │   └── vendor-def456.js
  └── index.html

# DEPLOY KE VERCEL
npm i -g vercel
vercel --prod

# ENVIRONMENT VARIABLES
# .env.local (dev only)
VITE_API_URL=http://localhost:8080

# .env.production
VITE_API_URL=https://api.myapp.com

# DI CODE
const apiUrl = import.meta.env.VITE_API_URL;

Penjelasan Kode

Build generate optimized static files. VITE_ prefix untuk env vars.

Prompt AI

Apa yang terjadi saat npm run build di project Vite?

Pertanyaan Reflektif

Deploy aplikasi React ke Vercel atau Netlify. Setup environment variables.