# Build Static Guide - Windows 11

## Panduan Build Static untuk Windows 11

### Prerequisites
- Windows 11
- Node.js (sudah terinstall)
- npm (sudah terinstall)
- PowerShell atau Command Prompt

## Quick Build Commands

### 1. Manual Build (Recommended)
```cmd
# Buka Command Prompt atau PowerShell
# Navigate ke folder frontend
cd frontend

# Install dependencies (jika belum)
npm install

# Build untuk production
npm run build

# Preview hasil build (optional)
npm run preview
```

### 2. Menggunakan Script Otomatis
```cmd
# Double-click file: build_production.bat
# Atau jalankan dari command prompt:
build_production.bat
```

## Step-by-Step Build Process

### Step 1: Persiapan
1. Buka **Command Prompt** atau **PowerShell** sebagai Administrator
2. Navigate ke folder project:
   ```cmd
   cd D:\xampp-win32-5.6.14-0-VC11\htdocs\api.samatortrack.id
   ```

### Step 2: Build Frontend
```cmd
# Masuk ke folder frontend
cd frontend

# Cek Node.js version
node --version
npm --version

# Install dependencies
npm install

# Build production
npm run build
```

### Step 3: Verifikasi Build
```cmd
# Cek folder dist sudah terbuat
dir dist

# File yang harus ada:
# - index.html
# - assets\ (folder dengan CSS/JS)
# - favicon.ico
# - images\ (folder dengan gambar)
```

### Step 4: Deploy ke Public Folder
```cmd
# Kembali ke root project
cd ..

# Copy semua file dari frontend\dist ke public\
xcopy frontend\dist\* public\ /E /Y

# Atau manual copy-paste via Windows Explorer
```

## Environment Configuration

### Production Environment
File: `frontend\.env.production`
```env
VITE_API_BASE_URL=https://api.samatortrack.id
VITE_APP_ENV=production
VITE_APP_NAME=Samatortrack
VITE_DEBUG=false
```

### Local Testing Environment
File: `frontend\.env.development`
```env
VITE_API_BASE_URL=http://localhost:8000
VITE_APP_ENV=development
VITE_APP_NAME=Samatortrack Dev
VITE_DEBUG=true
```

## Build Output Structure
```
frontend\dist\
├── index.html              # Main HTML file
├── favicon.ico             # Favicon
├── images\                 # Static images
│   ├── samator-background.jpg
│   └── samatortrack-logo.png
└── assets\                 # Compiled assets
    ├── index-[hash].js     # Main JavaScript bundle
    ├── index-[hash].css    # Main CSS bundle
    └── vendor-[hash].js    # Vendor libraries
```

## Deployment Options untuk Windows

### Option 1: XAMPP/WAMP Server
```cmd
# 1. Build aplikasi
cd frontend
npm run build

# 2. Copy ke htdocs
xcopy dist\* C:\xampp\htdocs\samatortrack\ /E /Y

# 3. Akses via http://localhost/samatortrack
```

### Option 2: IIS (Internet Information Services)
```cmd
# 1. Build aplikasi
npm run build

# 2. Copy ke IIS wwwroot
xcopy dist\* C:\inetpub\wwwroot\samatortrack\ /E /Y

# 3. Configure IIS untuk SPA routing
```

### Option 3: PHP Built-in Server
```cmd
# 1. Build dan copy ke public folder
npm run build
xcopy dist\* ..\public\ /E /Y

# 2. Jalankan PHP server
cd ..\public
php -S localhost:8000

# 3. Akses via http://localhost:8000
```

## Windows-Specific Commands

### PowerShell Commands
```powershell
# Navigate
Set-Location "D:\xampp-win32-5.6.14-0-VC11\htdocs\api.samatortrack.id\frontend"

# Build
npm run build

# Copy files
Copy-Item -Path "dist\*" -Destination "..\public\" -Recurse -Force

# List files
Get-ChildItem dist
```

### Command Prompt Commands
```cmd
# Navigate
cd /d "D:\xampp-win32-5.6.14-0-VC11\htdocs\api.samatortrack.id\frontend"

# Build
npm run build

# Copy files
xcopy dist\* ..\public\ /E /Y

# List files
dir dist
```

## Troubleshooting Windows Issues

### Issue 1: Permission Denied
```cmd
# Run Command Prompt as Administrator
# Right-click Command Prompt -> "Run as administrator"
```

### Issue 2: Path Too Long
```cmd
# Enable long path support in Windows
# Run as Administrator:
reg add HKLM\SYSTEM\CurrentControlSet\Control\FileSystem /v LongPathsEnabled /t REG_DWORD /d 1
```

### Issue 3: Node.js Not Found
```cmd
# Add Node.js to PATH
# Control Panel -> System -> Advanced -> Environment Variables
# Add: C:\Program Files\nodejs
```

### Issue 4: npm Install Fails
```cmd
# Clear npm cache
npm cache clean --force

# Delete node_modules and reinstall
rmdir /s node_modules
npm install
```

## Performance Tips untuk Windows

### 1. Antivirus Exclusion
- Tambahkan folder project ke antivirus exclusion
- Exclude: `node_modules`, `dist`, `.git`

### 2. Windows Defender
```cmd
# Add exclusion via PowerShell (as Administrator)
Add-MpPreference -ExclusionPath "D:\xampp-win32-5.6.14-0-VC11\htdocs\api.samatortrack.id"
```

### 3. SSD Optimization
- Pastikan project di SSD untuk build speed optimal
- Defragment HDD jika menggunakan HDD

## Testing Build di Windows

### 1. Local Testing
```cmd
# Build dan preview
cd frontend
npm run build
npm run preview

# Buka browser: http://localhost:4173
```

### 2. PHP Server Testing
```cmd
# Copy ke public dan test
xcopy dist\* ..\public\ /E /Y
cd ..\public
php -S localhost:8000

# Buka browser: http://localhost:8000
```

### 3. XAMPP Testing
```cmd
# Copy ke XAMPP htdocs
xcopy dist\* C:\xampp\htdocs\samatortrack\ /E /Y

# Start XAMPP Apache
# Buka browser: http://localhost/samatortrack
```

## Build Automation Script

### Enhanced build_production.bat
```batch
@echo off
title Samatortrack Production Build

echo ===================================
echo    SAMATORTRACK PRODUCTION BUILD
echo ===================================
echo.

REM Check if we're in the right directory
if not exist "frontend" (
    echo ERROR: Please run this script from the project root directory
    echo Current directory: %CD%
    pause
    exit /b 1
)

echo [1/7] Checking Node.js installation...
node --version >nul 2>&1
if errorlevel 1 (
    echo ERROR: Node.js not found! Please install Node.js first.
    echo Download from: https://nodejs.org/
    pause
    exit /b 1
)
echo Node.js: OK

echo.
echo [2/7] Checking npm installation...
npm --version >nul 2>&1
if errorlevel 1 (
    echo ERROR: npm not found!
    pause
    exit /b 1
)
echo npm: OK

echo.
echo [3/7] Navigating to frontend directory...
cd frontend
echo Directory: %CD%

echo.
echo [4/7] Installing dependencies...
echo This may take a few minutes...
npm install
if errorlevel 1 (
    echo ERROR: Failed to install dependencies!
    echo Try running: npm cache clean --force
    pause
    exit /b 1
)
echo Dependencies: OK

echo.
echo [5/7] Building for production...
echo This may take a few minutes...
npm run build
if errorlevel 1 (
    echo ERROR: Build failed!
    echo Check the error messages above
    pause
    exit /b 1
)
echo Build: OK

echo.
echo [6/7] Verifying build output...
if not exist "dist\index.html" (
    echo ERROR: Build output not found!
    echo Expected: dist\index.html
    pause
    exit /b 1
)
echo Build output: OK

echo.
echo [7/7] Copying to public directory...
cd ..
if exist "public\index.html" (
    echo Backing up existing files...
    if not exist "public\backup" mkdir "public\backup"
    xcopy "public\*" "public\backup\" /E /Y /Q >nul 2>&1
    echo Backup: OK
)

echo Copying new files...
xcopy "frontend\dist\*" "public\" /E /Y /Q
if errorlevel 1 (
    echo ERROR: Failed to copy files!
    echo Check file permissions
    pause
    exit /b 1
)
echo Copy: OK

echo.
echo ===================================
echo       BUILD COMPLETED SUCCESSFULLY!
echo ===================================
echo.
echo Build output: frontend\dist\
echo Deployed to: public\
echo Backup: public\backup\
echo.
echo File sizes:
dir public\assets\*.js /B 2>nul | find /c /v "" > temp.txt
set /p jsfiles=<temp.txt
del temp.txt
echo - JavaScript files: %jsfiles%
echo.
echo Next steps:
echo 1. Start PHP server: php -S localhost:8000 -t public
echo 2. Open browser: http://localhost:8000
echo 3. Test all application features
echo 4. Deploy to production server
echo.
pause
```

## Quick Commands Summary

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

# Build and copy
cd frontend && npm run build && xcopy dist\* ..\public\ /E /Y

# Build, copy, and start server
cd frontend && npm run build && xcopy dist\* ..\public\ /E /Y && cd ..\public && php -S localhost:8000

# Full automated build
build_production.bat
```

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

## Date
January 20, 2026

## Status
✅ **READY** - Windows 11 build guide lengkap dan tested