sibedas/BUILD_GUIDE.md

🚀 Panduan Build untuk Production

📋 Masalah yang Diselesaikan

Aplikasi ini memiliki banyak file JS dan CSS yang harus dibangun semuanya karena:

• Setiap halaman memerlukan file JS/CSS yang spesifik
• Jika ada file yang hilang, halaman akan error (404 Not Found)
• Server dengan RAM terbatas sering mengalami "killed" saat build

🎯 Solusi yang Tersedia

1. Build di Local (RECOMMENDED) 🏆

# Build di local computer Anda
npm run build:local

# Upload ke server
./deploy.sh username server.com /path/to/project

Kelebihan:

• ✅ Tidak ada batasan memory
• ✅ Build lebih cepat
• ✅ Semua file terjamin ter-build

2. Build di Server dengan Optimasi

# Option A: Build dengan memory optimization
npm run build:prod

# Option B: Build dengan retry mechanism
npm run build:chunked

# Option C: Build manual dengan script
./build-production.sh

3. Setup Server untuk Build

# Setup swap memory dan optimasi (run dengan sudo)
sudo ./server-setup.sh

# Kemudian build
npm run build:prod

📁 File yang Akan Dibangun

Semua file ini WAJIB ada karena dibutuhkan oleh halaman-halaman aplikasi:

CSS Files:

• resources/scss/style.scss - Main stylesheet
• resources/scss/icons.scss - Icons
• resources/scss/components/_*.scss - Components
• resources/scss/dashboards/_*.scss - Dashboard styles
• resources/scss/pages/quick-search/*.scss - Quick search pages
• Third-party CSS (Quill, Flatpickr, GridJS, dll)

JS Files:

• Core: app.js, config.js, dashboard.js
• Pages: chart.js, form-*.js, table-*.js, maps-*.js
• Data: data-advertisements.js, data-umkm.js, data-tourisms.js
• Settings: syncronize.js, general-settings.js
• Dashboards: bigdata.js, pbg.js, potentials/*.js
• Users & Roles: users/*.js, roles/*.js, menus/*.js
• Reports: growth-report.js, tourisms/index.js
• Dan semua file lainnya sesuai kebutuhan halaman

⚙️ Konfigurasi Build

Memory Optimization

// vite.config.production.js
export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                manualChunks: {
                    vendor: ['bootstrap', 'moment', 'axios'],
                    charts: ['apexcharts'],
                    maps: ['leaflet', 'jsvectormap', 'gmaps'],
                    ui: ['sweetalert2', 'flatpickr', 'quill']
                }
            },
            maxParallelFileOps: 1 // Untuk server dengan RAM terbatas
        }
    }
})

Memory Limits

# Untuk server dengan RAM 2GB+
NODE_OPTIONS="--max-old-space-size=2048"

# Untuk server dengan RAM 1GB
NODE_OPTIONS="--max-old-space-size=1024"

🔧 Troubleshooting

Build Terkill (Killed)

# Solusi 1: Build di local
npm run build:local
./deploy.sh

# Solusi 2: Tambah swap memory
sudo ./server-setup.sh

# Solusi 3: Gunakan build chunked
npm run build:chunked

File JS/CSS Tidak Ditemukan

# Pastikan semua file ada di vite.config.production.js
# Jangan hapus file apapun dari daftar input!

# Verifikasi build
find public/build -name "*.js" | wc -l
find public/build -name "*.css" | wc -l

Server Kehabisan Memory

# Check memory usage
free -h

# Add swap file
sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

📦 Deployment Flow

Local Build → Server Deploy

# 1. Di local
npm ci
npm run build:local

# 2. Edit deploy.sh dengan info server
# 3. Deploy
./deploy.sh username server.com /path/to/project

Server Build

# 1. Setup server
sudo ./server-setup.sh

# 2. Install dependencies
npm ci --production=false

# 3. Build
npm run build:chunked

# 4. Optimize Laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache

⚠️ Catatan Penting

1. JANGAN HAPUS FILE APAPUN dari vite.config.production.js
2. SEMUA FILE WAJIB ADA karena dibutuhkan oleh halaman-halaman aplikasi
3. BUILD DI LOCAL adalah solusi terbaik untuk server dengan RAM terbatas
4. BACKUP selalu sebelum deploy ke production

🎉 Success Indicators

Build berhasil jika:

• ✅ File public/build/manifest.json ada
• ✅ Folder public/build/assets/ berisi banyak file JS/CSS
• ✅ Tidak ada error 404 saat mengakses halaman
• ✅ Semua halaman dapat memuat JS/CSS yang dibutuhkan