Tutorial Hosting di Vercel

Persiapan Project untuk Deployment

Pastikan project React Anda sudah siap untuk di-deploy dengan memperhatikan hal-hal berikut:

• Project telah berjalan tanpa error di lingkungan development
• Package.json sudah berisi script build yang benar
• Environment variables sudah dikonfigurasi dengan benar (jika ada)

npm run dev

npm start

Checklist Persiapan

• Aplikasi berjalan tanpa error di local
• Semua dependencies terinstall dengan benar
• File .gitignore sudah include node_modules/ dan .env
• Build script ada di package.json

Membuat Akun dan Repositori GitHub

Sebelum deploy ke Vercel, Anda memerlukan repositori GitHub untuk menyimpan kode Anda.

Langkah-langkah:

1. Buat akun GitHub jika belum memiliki di github.com
2. Buat repositori baru dengan format: uts_pemrograman_web_[NIM]
   • Contoh: uts_pemrograman_web_119140001
3. Push project React Anda ke repositori tersebut

# Inisialisasi Git di folder project
git init

# Tambahkan semua file
git add .

# Commit perubahan
git commit -m "Initial commit: UTS React App"

# Tambahkan remote repository
git remote add origin https://github.com/username/uts_pemrograman_web_[NIM].git

# Push ke branch main
git push -u origin main

Troubleshooting

Jika Anda mendapat error saat push:

# Jika branch default adalah master, bukan main
git branch -M main

# Jika sudah ada remote origin sebelumnya
git remote remove origin
git remote add origin https://github.com/username/repo-name.git

Mendaftar dan Connect ke Vercel

Sekarang saatnya menghubungkan GitHub dengan Vercel untuk deployment.

Langkah-langkah:

1. Kunjungi vercel.com
2. Klik "Sign Up" atau "Start Deploying"
3. Pilih "Continue with GitHub" untuk mendaftar menggunakan akun GitHub
4. Authorize Vercel untuk mengakses repositori GitHub Anda

Setelah Login:

1. Anda akan dibawa ke dashboard Vercel
2. Klik tombol "Add New..." di pojok kanan atas
3. Pilih "Project" dari dropdown menu

Import dan Deploy Project

Sekarang kita akan mengimport project dari GitHub dan melakukan deployment pertama.

Langkah-langkah:

1. Di halaman Import, Vercel akan menampilkan semua repositori GitHub Anda
2. Cari repositori uts_pemrograman_web_[NIM] yang sudah Anda buat
3. Klik "Import" pada repositori tersebut

Konfigurasi Build Settings

Vercel biasanya sudah auto-detect dengan benar, tapi pastikan settingnya seperti ini:

• Framework Preset: Create React App atau Vite (sesuai project Anda)
• Build Command: npm run build atau vite build
• Output Directory: build (untuk CRA) atau dist (untuk Vite)
• Install Command: npm install

Konfigurasi Environment Variables (Opsional)

Jika aplikasi Anda menggunakan environment variables (seperti API keys), Anda perlu menambahkannya di Vercel.

Langkah-langkah:

1. Di halaman konfigurasi, scroll ke bagian "Environment Variables"
2. Tambahkan variable yang diperlukan:
   • Key: nama variable (contoh: REACT_APP_API_KEY)
   • Value: nilai variable (contoh: your-api-key-here)
3. Pilih environment: Production, Preview, dan Development

REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your_api_key_here

Konfigurasi React Router (Jika Menggunakan)

Jika aplikasi Anda menggunakan React Router dengan mode browser history, Anda perlu menambahkan konfigurasi khusus.

Buat file vercel.json

Di root folder project Anda, buat file vercel.json:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Push perubahan

Setelah membuat file vercel.json:

git add vercel.json
git commit -m "Add vercel configuration for React Router"
git push

Vercel akan otomatis detect dan re-deploy dengan konfigurasi baru!

Deploy Project

Sekarang saatnya deploy!

Langkah-langkah:

1. Review semua konfigurasi yang sudah Anda setting
2. Klik tombol "Deploy" untuk memulai proses deployment
3. Tunggu proses build dan deployment selesai (biasanya 1-3 menit)

Proses Deployment

Anda akan melihat log yang menunjukkan:

• Installing dependencies...
• Building project...
• Uploading build files...
• Deployment complete!

Troubleshooting Common Issues

Jika ada masalah:

1. Blank page: Check browser console untuk error
2. 404 on routes: Pastikan vercel.json sudah dikonfigurasi dengan benar
3. API errors: Pastikan environment variables sudah di-set
4. Build fails: Check build logs di Vercel dashboard untuk detail error

Continuous Deployment

Selamat! Deployment pertama Anda berhasil. Sekarang setiap kali Anda push ke GitHub, Vercel akan otomatis deploy versi terbaru.

Cara Kerjanya:

1. Edit kode di local
2. Commit & push ke GitHub

   git add .
   git commit -m "Update: description of changes"
   git push

3. Vercel automatically deploys - Anda akan dapat notification
4. Preview changes di dashboard Vercel
5. Production otomatis updated!

Git Workflow Best Practices:

# 1. Check status
git status

# 2. Add changes
git add .

# 3. Commit dengan pesan yang jelas
git commit -m "feat: add product filtering"

# 4. Push ke GitHub
git push

# Vercel akan otomatis deploy!