# Runtime Configuration System - COMPLETE

## Overview
Sistem runtime configuration telah selesai diimplementasikan dengan pendekatan **Direct Dist Access**. Sistem ini memungkinkan perubahan konfigurasi API dan pengaturan lainnya tanpa perlu rebuild aplikasi.

## ✅ Status: COMPLETE

### Implementasi Selesai:
- ✅ Runtime configuration system dengan config.js
- ✅ Direct dist access (frontend/dist/) 
- ✅ Config templates untuk semua environment
- ✅ Build scripts yang terintegrasi
- ✅ Server scripts untuk development
- ✅ Config switcher untuk mudah ganti environment
- ✅ API service integration dengan runtime config
- ✅ Dokumentasi lengkap

## File Structure Final

```
project/
├── frontend/
│   ├── dist/                     # ← AKSES LANGSUNG DI SINI
│   │   ├── index.html           # Include config.js
│   │   ├── config.js            # Runtime configuration
│   │   ├── assets/              # Built assets
│   │   └── images/              # Static images
│   ├── src/
│   │   └── services/api.js      # Runtime config integration
│   └── package.json
├── public/                       # PHP backend only
│   ├── index.php
│   └── .htaccess
├── config-templates/             # Config templates
│   ├── config.development.js
│   ├── config.staging.js
│   └── config.production.js
├── build-simple.bat             # Quick build
├── build-and-serve.bat          # Build + serve
├── serve-dev.bat                # Serve only
└── switch-config.bat            # Config switcher
```

## Cara Penggunaan

### 1. Development (Quick Start)
```cmd
# Build + serve sekaligus
build-and-serve.bat

# Atau manual:
build-simple.bat
serve-dev.bat
```

### 2. Production Deployment
```cmd
# Build untuk production
cd frontend
npm run build

# Copy production config
copy config-templates\config.production.js frontend\dist\config.js

# Deploy frontend\dist\ ke web server
```

### 3. Switch Environment
```cmd
# Ganti config dengan mudah
switch-config.bat

# Pilih:
# 1. Development (localhost:8000)
# 2. Staging (staging-api.samatortrack.id)
# 3. Production (api.samatortrack.id)
# 4. Custom (manual edit)
```

## Server Configuration

### Development Servers
```cmd
# Frontend server
php -S localhost:3000 -t frontend\dist

# Backend server  
php -S localhost:8000 -t public

# Access:
# Frontend: http://localhost:3000
# Backend:  http://localhost:8000/api/
```

### Production Web Server

#### Apache Virtual Host
```apache
<VirtualHost *:80>
    ServerName samatortrack.com
    DocumentRoot /path/to/project/frontend/dist
    
    # API routes to PHP backend
    Alias /api /path/to/project/public
    <Directory "/path/to/project/public">
        AllowOverride All
        Require all granted
    </Directory>
    
    # Frontend SPA routing
    <Directory "/path/to/project/frontend/dist">
        AllowOverride All
        Require all granted
        
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    </Directory>
</VirtualHost>
```

#### Nginx Configuration
```nginx
server {
    listen 80;
    server_name samatortrack.com;
    root /path/to/project/frontend/dist;
    index index.html;

    # Frontend SPA routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API routes to PHP backend
    location /api/ {
        root /path/to/project/public;
        try_files $uri $uri/ /index.php?$query_string;
        
        location ~ \.php$ {
            fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
        }
    }
}
```

## Configuration Templates

### Development Config
```javascript
window.APP_CONFIG = {
  API_BASE_URL: 'http://localhost:8000',
  APP_ENV: 'development',
  DEBUG: true,
  FEATURES: {
    DEV_INDICATOR: true
  }
}
```

### Staging Config
```javascript
window.APP_CONFIG = {
  API_BASE_URL: 'https://staging-api.samatortrack.id',
  APP_ENV: 'staging', 
  DEBUG: true,
  FEATURES: {
    DEV_INDICATOR: true
  }
}
```

### Production Config
```javascript
window.APP_CONFIG = {
  API_BASE_URL: 'https://api.samatortrack.id',
  APP_ENV: 'production',
  DEBUG: false,
  FEATURES: {
    DEV_INDICATOR: false
  }
}
```

## API Service Integration

API service (`frontend/src/services/api.js`) sudah terintegrasi dengan runtime config:

```javascript
// Get runtime configuration
const getConfig = () => {
  return window.APP_CONFIG || {
    API_BASE_URL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000'
  }
}

// Create axios instance with runtime configuration
const api = axios.create({
  get baseURL() {
    return getConfig().API_BASE_URL
  }
})
```

## Benefits Direct Dist Access

### ✅ Keuntungan
- **No Copy Step**: Tidak perlu copy files setelah build
- **Always Updated**: Selalu menggunakan hasil build terbaru
- **Disk Efficient**: Tidak ada duplikasi files
- **Fast Deploy**: Langsung akses setelah build
- **Clean Separation**: Frontend dan backend terpisah jelas
- **Easy Maintenance**: Mudah maintain dan update

### 🚀 Performance
- Build time lebih cepat (no copy step)
- Deployment lebih cepat
- Disk I/O lebih sedikit

### 🔧 Maintenance
- Workflow lebih simple: Build → Configure → Serve
- Tidak ada sync issues
- Struktur project lebih bersih

## Quick Commands Reference

```cmd
# Build only
cd frontend && npm run build

# Build + config + serve
build-and-serve.bat

# Serve existing build
serve-dev.bat

# Switch config
switch-config.bat

# Build for production
cd frontend && npm run build && copy config-templates\config.production.js frontend\dist\config.js
```

## Deployment Scenarios

### Scenario 1: Local Development
```cmd
1. build-and-serve.bat
2. Access: http://localhost:3000
```

### Scenario 2: Staging Deployment
```cmd
1. cd frontend && npm run build
2. copy config-templates\config.staging.js frontend\dist\config.js
3. Upload frontend\dist\ to staging server
```

### Scenario 3: Production Deployment
```cmd
1. cd frontend && npm run build
2. copy config-templates\config.production.js frontend\dist\config.js
3. Upload frontend\dist\ to production server
```

## Troubleshooting

### Config tidak berubah?
```cmd
# Clear browser cache atau hard refresh (Ctrl+F5)
# Atau check console untuk config loading
```

### Server tidak jalan?
```cmd
# Check port conflicts
netstat -an | findstr :3000
netstat -an | findstr :8000

# Kill existing PHP processes
taskkill /f /im php.exe
```

### Build error?
```cmd
# Clear node_modules dan reinstall
cd frontend
rmdir /s node_modules
npm install
npm run build
```

## Migration Complete

✅ **MIGRASI SELESAI** dari approach sebelumnya:
- ❌ Copy ke `public/` → ✅ Direct access `frontend/dist/`
- ❌ Manual config → ✅ Runtime config system
- ❌ Mixed files → ✅ Clean separation

## Kesimpulan

**Direct Dist Access** adalah pendekatan terbaik untuk project ini karena:

1. **Praktis**: Tidak perlu copy files
2. **Efisien**: Hemat disk space dan waktu
3. **Maintainable**: Mudah maintain dan update
4. **Scalable**: Mudah deploy ke berbagai environment
5. **Clean**: Struktur project bersih dan terorganisir

## Author
**Rodhi** - Full Stack Developer

## Date
January 20, 2026

## Status
✅ **COMPLETE** - Runtime Configuration System dengan Direct Dist Access siap production!