Skip to content

QUICK_START.md

Latest commit

 

History

History
123 lines (85 loc) · 2.79 KB

QUICK_START.md

File metadata and controls

123 lines (85 loc) · 2.79 KB

🚀 Quick Start Guide - Image Generation

Panduan cepat untuk menjalankan aplikasi dengan image generation.

⚡ Cara Paling Cepat

1. Setup Environment Variables

Buat file .env di root project:

GEMINI_API_KEY=your_gemini_api_key_here

Dapatkan API key: https://aistudio.google.com/apikey

2. Jalankan Semuanya Bersamaan

npm run dev:full

Ini akan menjalankan:

  • ✅ Backend proxy server di http://localhost:5000
  • ✅ Frontend React di http://localhost:3000 atau http://localhost:5173

📋 Cara Manual (2 Terminal)

Jika npm run dev:full tidak bekerja, gunakan 2 terminal:

Terminal 1: Backend Server

npm run server

Anda akan melihat:

✅ ============================================
🚀 Backend proxy server running at http://localhost:5000
📝 API Key Status: ✅ Found
✅ ============================================

Biarkan terminal ini tetap terbuka! Jangan ditutup.

Terminal 2: Frontend

npm run dev

Ini akan membuka aplikasi di browser.

🔍 Troubleshooting

Error: "Port 5000 is already in use"

Solusi 1: Ganti port di .env:

BACKEND_PORT=5001

Solusi 2: Stop aplikasi lain yang menggunakan port 5000:

# Mac/Linux
lsof -ti:5000 | xargs kill -9

# Windows
netstat -ano | findstr :5000
taskkill /PID <PID> /F

Error: "GEMINI_API_KEY tidak ditemukan"

Solusi:

  1. Pastikan file .env ada di root project (sama level dengan package.json)
  2. Pastikan file .env berisi: GEMINI_API_KEY=your_key_here
  3. Restart backend server setelah menambahkan .env

Error: "Cannot connect to backend server"

Solusi:

  1. Pastikan backend server sedang berjalan (npm run server)
  2. Pastikan backend berjalan di port yang benar (default: 5000)
  3. Cek apakah backend server crash dengan melihat terminal backend

Error: "ERR_CONNECTION_REFUSED"

Ini berarti backend server tidak berjalan.

Solusi:

  1. Buka terminal baru
  2. Masuk ke folder project
  3. Jalankan: npm run server
  4. Pastikan terminal menunjukkan: 🚀 Backend proxy server running at http://localhost:5000
  5. Biarkan terminal tersebut terbuka

✅ Checklist Sebelum Menggunakan

  • File .env sudah dibuat dan berisi GEMINI_API_KEY
  • Backend server berjalan (lihat di terminal)
  • Frontend berjalan (browser sudah terbuka)
  • Tidak ada error di console backend

🎯 Testing

Setelah semua berjalan:

  1. Buka aplikasi di browser
  2. Klik tab "Image Generation"
  3. Masukkan prompt gambar
  4. Klik "Generate Image"
  5. Jika berhasil, gambar akan muncul!

📞 Need Help?

Jika masih error:

  1. Cek console backend (terminal 1) untuk error messages
  2. Cek console browser (F12) untuk error dari frontend
  3. Pastikan .env file sudah benar
  4. Pastikan kedua server berjalan (backend + frontend)