# Direct Dist Access Guide

## Overview
Menggunakan `frontend/dist/` langsung untuk akses static files tanpa perlu copy ke folder lain. Ini adalah pendekatan yang praktis dan efisien.

## Keuntungan Direct Dist Access

### ✅ Advantages
- **No Copy Required**: Tidak perlu copy files setelah build
- **Always Up-to-date**: Selalu menggunakan hasil build terbaru
- **Disk Space Efficient**: Tidak ada duplikasi files
- **Faster Deployment**: Langsung akses setelah build
- **Cleaner Structure**: Tidak ada mixing dengan backend files

### ❌ Alternative Issues
- Copy ke `public/` → mixing dengan PHP backend files
- Copy ke folder lain → duplikasi dan sync issues
- Manual copy → prone to human error

## Implementation

### 1. Build Process (Unchanged)
```cmd
# Build tetap sama
cd frontend
npm run build

# Output ke frontend/dist/ (default Vite)
```

### 2. Server Configuration

#### Option A: Separate Servers (Recommended)
```cmd
# Frontend server (port 3000)
php -S localhost:3000 -t frontend/dist

# Backend server (port 8000) 
php -S localhost:8000 -t public

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

#### Option B: Single Server with Routing
```cmd
# Single server dengan routing logic
php -S localhost:8000 -t public
# Dengan routing logic untuk serve frontend/dist/
```

### 3. Runtime Configuration

#### Copy config.js to dist after build
```cmd
# After build, copy config
copy config-templates\config.development.js frontend\dist\config.js
```

## Updated Build Scripts

### Simple Build Script
```cmd
# build-simple.bat
@echo off
echo Building Samatortrack...
cd frontend
npm run build
copy ..\config-templates\config.development.js dist\config.js
echo Build complete! 
echo Frontend: php -S localhost:3000 -t frontend\dist
echo Backend: php -S localhost:8000 -t public
pause
```

### Production Build Script
```cmd
# build-production.bat
@echo off
echo Building for Production...
cd frontend
npm run build
copy ..\config-templates\config.production.js dist\config.js
echo Production build complete!
echo Deploy frontend\dist\ to web server
pause
```

## Deployment Scenarios

### Scenario 1: Development
```cmd
# 1. Build
cd frontend && npm run build

# 2. Copy dev config
copy config-templates\config.development.js frontend\dist\config.js

# 3. Start servers
php -S localhost:3000 -t frontend\dist    # Frontend
php -S localhost:8000 -t public           # Backend

# 4. Access
# http://localhost:3000 (Frontend)
# http://localhost:8000 (Backend API)
```

### Scenario 2: Production Deployment
```cmd
# 1. Build
cd frontend && npm run build

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

# 3. Deploy
# Upload frontend\dist\ to web server
# Upload public\ (PHP backend) to API server
```

### Scenario 3: Single Server Deployment
```cmd
# 1. Build with production config
cd frontend && npm run build
copy config-templates\config.production.js frontend\dist\config.js

# 2. Configure web server routing
# Serve frontend\dist\ for main site
# Serve public\ for /api/ routes
```

## Web Server Configuration

### Apache Virtual Host
```apache
<VirtualHost *:80>
    ServerName samatortrack.local
    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
        
        # SPA fallback
        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.local;
    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;
        }
    }
}
```

## File Structure
```
project/
├── frontend/
│   ├── dist/                  # ← Direct access here
│   │   ├── index.html
│   │   ├── config.js         # Runtime config
│   │   ├── assets/
│   │   └── images/
│   ├── src/
│   └── package.json
├── public/                    # PHP backend only
│   ├── index.php
│   └── .htaccess
├── app/                       # PHP backend
├── config-templates/          # Config templates
└── build-simple.bat          # Updated build script
```

## Quick Commands

### Development
```cmd
# Build and serve
cd frontend && npm run build && copy ..\config-templates\config.development.js dist\config.js
php -S localhost:3000 -t frontend\dist
```

### Production
```cmd
# Build for production
cd frontend && npm run build && copy ..\config-templates\config.production.js dist\config.js
# Deploy frontend\dist\ to web server
```

### Config Switching
```cmd
# Switch to development
copy config-templates\config.development.js frontend\dist\config.js

# Switch to production  
copy config-templates\config.production.js frontend\dist\config.js

# Switch to staging
copy config-templates\config.staging.js frontend\dist\config.js
```

## Benefits Summary

### 🚀 Performance
- **Faster builds**: No copy step required
- **Less disk I/O**: Direct access to build output
- **Immediate updates**: Changes reflected instantly after build

### 🔧 Maintenance  
- **Simpler workflow**: Build → Configure → Serve
- **No sync issues**: Always using latest build
- **Cleaner separation**: Frontend and backend completely separate

### 📁 Organization
- **Clear structure**: `frontend/dist/` for static, `public/` for PHP
- **No mixing**: Frontend and backend files don't mix
- **Easy deployment**: Each part can be deployed independently

## Migration from Current Setup

### From public/ to frontend/dist/
```cmd
# 1. Stop using public/ for frontend
# 2. Use frontend/dist/ directly
# 3. Update server configuration
# 4. Update deployment scripts
```

### Updated Scripts Needed
- `build-simple.bat` - Quick development build
- `build-production.bat` - Production build with config
- `serve-dev.bat` - Start development servers
- `serve-prod.bat` - Start production server

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

## Date
January 20, 2026

## Status
✅ **RECOMMENDED** - Direct dist access is the best approach