forked from jsnbuchanan/crowd-funder-for-time-pwa
docs: reorganize documentation structure with 7-item folder limits
- Create logical sub-folder classification for all documentation - Organize 91 migration files into component-specific folders - Separate user guides, build system, migration, and development docs - Maintain maximum 7 items per folder for easy navigation - Add comprehensive README and reorganization summary - Ensure all changes tracked in git with proper versioning Structure: - user-guides/ (3 items): user-facing documentation - build-system/ (3 items): core, platforms, automation - migration/ (6 items): assessments, testing, templates - development/ (4 items): tools and standards - architecture/, testing/, examples/ (ready for future docs) Total: 24 folders created, all within 7-item limits
This commit is contained in:
Matthew Raymer
405
docs/build-system/automation/auto-run-guide.md
Normal file
405
docs/build-system/automation/auto-run-guide.md
Normal file
@@ -0,0 +1,405 @@
|
||||
# Auto-Run Guide
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-12
|
||||
**Status**: 🎯 **ACTIVE** - In Use
|
||||
|
||||
## Overview
|
||||
|
||||
The TimeSafari auto-run system intelligently detects available devices and
|
||||
automatically builds and launches the app on the best available target. It
|
||||
supports Android devices/emulators, iOS devices/simulators, and Electron
|
||||
desktop apps.
|
||||
|
||||
## Features
|
||||
|
||||
### Smart Device Detection
|
||||
- **Android**: Detects real devices vs emulators using ADB
|
||||
- **iOS**: Detects real devices vs simulators using xcrun
|
||||
- **Electron**: Checks for Electron availability
|
||||
- **Priority**: Real devices preferred over simulators/emulators
|
||||
|
||||
### Build Mode Support
|
||||
- **Development**: Default mode for daily development
|
||||
- **Test**: Optimized for testing with test data
|
||||
- **Production**: Production-ready builds
|
||||
|
||||
### Platform Targeting
|
||||
- **All platforms**: Automatically detects and runs on all available
|
||||
- **Specific platform**: Target only iOS, Android, or Electron
|
||||
- **Cross-platform**: Works on macOS, Linux, and Windows
|
||||
|
||||
### Auto-Run Options
|
||||
- **Build + Auto-Run**: Single command to build and launch
|
||||
- **Smart Detection**: Automatically chooses best available target
|
||||
- **Error Handling**: Graceful fallbacks when devices unavailable
|
||||
|
||||
## Usage
|
||||
|
||||
### Auto-Run Script (Recommended)
|
||||
|
||||
```bash
|
||||
# Auto-detect and run on all available platforms (development mode)
|
||||
npm run auto-run
|
||||
|
||||
# Run in test mode
|
||||
npm run auto-run:test
|
||||
|
||||
# Run in production mode
|
||||
npm run auto-run:prod
|
||||
|
||||
# Target specific platforms
|
||||
npm run auto-run:ios
|
||||
npm run auto-run:android
|
||||
npm run auto-run:electron
|
||||
```
|
||||
|
||||
### Build Script Auto-Run
|
||||
|
||||
#### iOS Auto-Run Commands
|
||||
|
||||
```bash
|
||||
# Test build + auto-run
|
||||
npm run build:ios:test:run
|
||||
|
||||
# Production build + auto-run
|
||||
npm run build:ios:prod:run
|
||||
|
||||
# Debug build + auto-run
|
||||
npm run build:ios:debug:run
|
||||
|
||||
# Release build + auto-run
|
||||
npm run build:ios:release:run
|
||||
```
|
||||
|
||||
#### Android Auto-Run Commands
|
||||
|
||||
```bash
|
||||
# Test build + auto-run
|
||||
npm run build:android:test:run
|
||||
|
||||
# Production build + auto-run
|
||||
npm run build:android:prod:run
|
||||
|
||||
# Debug build + auto-run
|
||||
npm run build:android:debug:run
|
||||
|
||||
# Release build + auto-run
|
||||
npm run build:android:release:run
|
||||
```
|
||||
|
||||
#### Electron Auto-Run Commands
|
||||
|
||||
```bash
|
||||
# Development build + auto-run
|
||||
npm run build:electron:dev:run
|
||||
|
||||
# Test build + auto-run
|
||||
npm run build:electron:test:run
|
||||
|
||||
# Production build + auto-run
|
||||
npm run build:electron:prod:run
|
||||
```
|
||||
|
||||
### Advanced Usage
|
||||
|
||||
```bash
|
||||
# Direct script usage with options
|
||||
./scripts/auto-run.sh --test --platform=ios
|
||||
./scripts/auto-run.sh --prod --platform=android
|
||||
./scripts/auto-run.sh --auto # Skip confirmation prompts
|
||||
|
||||
# Build script with auto-run flag
|
||||
./scripts/build-ios.sh --test --auto-run
|
||||
./scripts/build-android.sh --prod --auto-run
|
||||
./scripts/build-electron.sh --test --auto-run
|
||||
|
||||
# Combine options
|
||||
./scripts/auto-run.sh --test --platform=all --auto
|
||||
```
|
||||
|
||||
### Command Line Options
|
||||
|
||||
| Option | Description | Example |
|
||||
|--------|-------------|---------|
|
||||
| `--test` | Build and run in test mode | `--test` |
|
||||
| `--prod` | Build and run in production mode | `--prod` |
|
||||
| `--platform=PLATFORM` | Target specific platform | `--platform=ios` |
|
||||
| `--auto` | Skip confirmation prompts | `--auto` |
|
||||
| `--auto-run` | Auto-run after build | `--auto-run` |
|
||||
| `--help` | Show help message | `--help` |
|
||||
|
||||
**Platform Options:**
|
||||
- `ios` - iOS devices/simulators only
|
||||
- `android` - Android devices/emulators only
|
||||
- `electron` - Electron desktop app only
|
||||
- `all` - All available platforms (default)
|
||||
|
||||
## How It Works
|
||||
|
||||
### 1. Device Detection
|
||||
|
||||
**Android Detection:**
|
||||
```bash
|
||||
# Uses ADB to list devices
|
||||
adb devices
|
||||
|
||||
# Parses output to distinguish:
|
||||
# - Real devices: Physical Android phones/tablets
|
||||
# - Emulators: Android emulator instances
|
||||
```
|
||||
|
||||
**iOS Detection:**
|
||||
```bash
|
||||
# Uses xcrun to list devices
|
||||
xcrun xctrace list devices
|
||||
|
||||
# Parses output to distinguish:
|
||||
# - Real devices: Physical iPhones/iPads
|
||||
# - Simulators: iOS Simulator instances
|
||||
```
|
||||
|
||||
### 2. Build Process
|
||||
|
||||
The script automatically calls the appropriate build commands:
|
||||
|
||||
```bash
|
||||
# Development mode
|
||||
npm run build:ios:dev
|
||||
npm run build:android:dev
|
||||
npm run build:electron:dev
|
||||
|
||||
# Test mode
|
||||
npm run build:ios:test
|
||||
npm run build:android:test
|
||||
npm run build:electron:test
|
||||
|
||||
# Production mode
|
||||
npm run build:ios:prod
|
||||
npm run build:android:prod
|
||||
npm run build:electron:prod
|
||||
```
|
||||
|
||||
### 3. Launch Process
|
||||
|
||||
**Android:**
|
||||
- Real devices: Install APK and launch via ADB
|
||||
- Emulators: Use `npx cap run android`
|
||||
|
||||
**iOS:**
|
||||
- Real devices: Build release version (requires Xcode setup)
|
||||
- Simulators: Use `npx cap run ios`
|
||||
|
||||
**Electron:**
|
||||
- Launch via `npm run electron:start`
|
||||
|
||||
## Examples
|
||||
|
||||
### Development Workflow
|
||||
|
||||
```bash
|
||||
# Quick development run
|
||||
npm run auto-run
|
||||
|
||||
# Output:
|
||||
# ✅ Found 1 real Android device: ABC123DEF456
|
||||
# ✅ Found 1 iOS simulator: iPhone 15 Pro
|
||||
# ✅ Electron: available
|
||||
#
|
||||
# Available targets:
|
||||
# Android: real:ABC123DEF456
|
||||
# iOS: simulator:iPhone 15 Pro
|
||||
# Electron: available
|
||||
#
|
||||
# Continue with auto-run? (y/N): y
|
||||
#
|
||||
# 🔄 Building and running Android (real: ABC123DEF456)...
|
||||
# 🔄 Building and running iOS (simulator: iPhone 15 Pro)...
|
||||
# 🔄 Building and running Electron...
|
||||
#
|
||||
# ✅ Auto-run completed successfully! 3 platform(s) launched.
|
||||
```
|
||||
|
||||
### Test Mode with Build Scripts
|
||||
|
||||
```bash
|
||||
# iOS test build + auto-run
|
||||
npm run build:ios:test:run
|
||||
|
||||
# Android test build + auto-run
|
||||
npm run build:android:test:run
|
||||
|
||||
# Electron test build + auto-run
|
||||
npm run build:electron:test:run
|
||||
|
||||
# Output:
|
||||
# === TimeSafari iOS Build Process ===
|
||||
# 🔄 Building Capacitor version (test)...
|
||||
# 🔄 Syncing with Capacitor...
|
||||
# 🔄 Building iOS app...
|
||||
# 🔄 Auto-running iOS app...
|
||||
# ✅ iOS app launched successfully!
|
||||
# ✅ iOS build completed successfully!
|
||||
```
|
||||
|
||||
### Production Mode
|
||||
|
||||
```bash
|
||||
# Production build and run
|
||||
npm run auto-run:prod
|
||||
|
||||
# Output:
|
||||
# 🔄 Building Android (production)...
|
||||
# 🔄 Building iOS (production)...
|
||||
# 🔄 Building Electron (production)...
|
||||
#
|
||||
# ✅ Auto-run completed successfully! 3 platform(s) launched.
|
||||
```
|
||||
|
||||
## Comparison: Auto-Run Script vs Build Scripts
|
||||
|
||||
### Auto-Run Script (`auto-run.sh`)
|
||||
**Best for:**
|
||||
- Multi-platform development
|
||||
- Quick testing across devices
|
||||
- Automated workflows
|
||||
- CI/CD integration
|
||||
|
||||
**Features:**
|
||||
- Smart device detection
|
||||
- Multi-platform support
|
||||
- Interactive confirmation
|
||||
- Error recovery
|
||||
|
||||
### Build Scripts with `--auto-run`
|
||||
**Best for:**
|
||||
- Single platform development
|
||||
- Specific build configurations
|
||||
- Non-interactive workflows
|
||||
- Build customization
|
||||
|
||||
**Features:**
|
||||
- Platform-specific optimization
|
||||
- Build customization options
|
||||
- Direct control over build process
|
||||
- Integration with existing workflows
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
**No devices detected:**
|
||||
```bash
|
||||
# Check Android devices
|
||||
adb devices
|
||||
|
||||
# Check iOS devices (macOS only)
|
||||
xcrun xctrace list devices
|
||||
|
||||
# Check Electron availability
|
||||
which electron
|
||||
```
|
||||
|
||||
**Build failures:**
|
||||
```bash
|
||||
# Clean and rebuild
|
||||
npm run clean:android
|
||||
npm run clean:ios
|
||||
npm run clean:electron
|
||||
|
||||
# Then retry auto-run
|
||||
npm run auto-run
|
||||
```
|
||||
|
||||
**Permission issues:**
|
||||
```bash
|
||||
# Make script executable
|
||||
chmod +x scripts/auto-run.sh
|
||||
|
||||
# Check ADB permissions (Android)
|
||||
adb kill-server
|
||||
adb start-server
|
||||
```
|
||||
|
||||
### Platform-Specific Issues
|
||||
|
||||
**Android:**
|
||||
- Ensure ADB is in PATH
|
||||
- Enable USB debugging on device
|
||||
- Accept device authorization prompt
|
||||
- Check device is in "device" state (not "unauthorized")
|
||||
|
||||
**iOS:**
|
||||
- Requires macOS with Xcode
|
||||
- Ensure Xcode command line tools installed
|
||||
- Check iOS Simulator is available
|
||||
- For real devices: Requires proper certificates
|
||||
|
||||
**Electron:**
|
||||
- Ensure Electron is installed globally or locally
|
||||
- Check Node.js version compatibility
|
||||
- Verify build dependencies are installed
|
||||
|
||||
### Debug Mode
|
||||
|
||||
Enable verbose logging by modifying the script:
|
||||
|
||||
```bash
|
||||
# Add debug logging to auto-run.sh
|
||||
set -x # Enable debug mode
|
||||
```
|
||||
|
||||
## Integration with CI/CD
|
||||
|
||||
The auto-run script can be integrated into CI/CD pipelines:
|
||||
|
||||
```yaml
|
||||
# Example GitHub Actions workflow
|
||||
- name: Auto-run tests
|
||||
run: |
|
||||
npm run auto-run:test --auto
|
||||
env:
|
||||
# Set environment variables for CI
|
||||
CI: true
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Development Workflow
|
||||
1. **Daily development**: Use `npm run auto-run` for quick testing
|
||||
2. **Testing**: Use `npm run auto-run:test` before commits
|
||||
3. **Production**: Use `npm run auto-run:prod` for final testing
|
||||
4. **Single platform**: Use `npm run build:ios:test:run` for focused work
|
||||
|
||||
### Device Management
|
||||
1. **Keep devices connected**: Reduces detection time
|
||||
2. **Use consistent device names**: Helps with identification
|
||||
3. **Regular cleanup**: Clear old builds and caches
|
||||
|
||||
### Performance Tips
|
||||
1. **Use --auto flag**: Skip prompts in automated workflows
|
||||
2. **Target specific platforms**: Use `--platform=ios` for faster runs
|
||||
3. **Parallel execution**: Script runs platforms in sequence (can be optimized)
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
### Planned Features
|
||||
- **Parallel execution**: Run multiple platforms simultaneously
|
||||
- **Device selection**: Choose specific devices when multiple available
|
||||
- **Custom build configurations**: Support for custom build modes
|
||||
- **Integration with IDEs**: VS Code and other IDE integration
|
||||
- **Performance monitoring**: Track build and launch times
|
||||
|
||||
### Contributing
|
||||
To add new features or fix issues:
|
||||
1. Modify `scripts/auto-run.sh`
|
||||
2. Update this documentation
|
||||
3. Test on multiple platforms
|
||||
4. Submit pull request
|
||||
|
||||
## Related Documentation
|
||||
|
||||
- [iOS Simulator Build and Icons](./ios-simulator-build-and-icons.md)
|
||||
- [Android Build Guide](./android-build-guide.md)
|
||||
- [Electron Build Guide](./electron-build-guide.md)
|
||||
- [Testing Guide](./testing-guide.md)
|
||||
379
docs/build-system/automation/cefpython-implementation-guide.md
Normal file
379
docs/build-system/automation/cefpython-implementation-guide.md
Normal file
@@ -0,0 +1,379 @@
|
||||
# CEFPython Implementation Guide (Revised)
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-12
|
||||
**Status**: ✨ **PLANNING** - Ready for Implementation
|
||||
|
||||
## Overview
|
||||
|
||||
This guide outlines the implementation of CEFPython to deliver the TimeSafari Vue.js application as a native desktop experience. It details the integration of Chromium Embedded Framework (CEF) with a Python backend for desktop-specific operations.
|
||||
|
||||
## Architecture
|
||||
|
||||
### High-Level Diagram
|
||||
|
||||
```
|
||||
TimeSafari CEFPython Architecture
|
||||
├── Python Backend (CEFPython)
|
||||
│ ├── CEF Browser Window
|
||||
│ ├── SQLite Database Access
|
||||
│ ├── File System Operations
|
||||
│ └── Native OS Integration
|
||||
├── Vue.js Frontend (Unchanged)
|
||||
│ ├── Existing Components
|
||||
│ ├── Platform Service Integration
|
||||
│ └── Database Operations
|
||||
└── Platform Service Bridge
|
||||
├── CEFPython Platform Service
|
||||
├── IPC Communication
|
||||
└── Native API Exposure
|
||||
```
|
||||
|
||||
### Platform Service
|
||||
|
||||
A TypeScript class will act as the interface between the Vue frontend and the Python backend:
|
||||
|
||||
```typescript
|
||||
export class CEFPythonPlatformService implements PlatformService {
|
||||
async dbQuery(sql: string, params?: any[]): Promise<any[]> {
|
||||
// Call Python backend via IPC
|
||||
}
|
||||
|
||||
async exportData(fileName: string, data: string): Promise<ExportResult> {
|
||||
// Call file export via IPC
|
||||
}
|
||||
|
||||
async getPlatformInfo(): Promise<PlatformInfo> {
|
||||
return {
|
||||
platform: 'cefpython',
|
||||
capabilities: ['sqlite', 'filesystem', 'native-ui']
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Implementation Plan
|
||||
|
||||
### Phase 1: Foundation Setup (Week 1)
|
||||
- [ ] Install CEFPython dependencies
|
||||
- [ ] Create Python virtual environment
|
||||
- [ ] Set up development and build tools
|
||||
- [ ] Create and test minimal CEFPython app
|
||||
- [ ] Create IPC and platform service skeleton
|
||||
|
||||
### Phase 2: SQLite Database (Week 2)
|
||||
- [ ] Implement Python SQLite wrapper
|
||||
- [ ] Setup schema initialization
|
||||
- [ ] Bridge database ops over IPC
|
||||
- [ ] Test queries and data integrity
|
||||
|
||||
### Phase 3: Native OS Integration (Week 3)
|
||||
- [ ] Implement file import/export
|
||||
- [ ] Add system tray and notifications
|
||||
- [ ] Test native menu hooks and permissions
|
||||
|
||||
### Phase 4: Build & Packaging (Week 4)
|
||||
- [ ] Create packaging and build scripts
|
||||
- [ ] Integrate with existing npm build
|
||||
- [ ] Automate cross-platform distribution
|
||||
|
||||
## Backend Implementation
|
||||
|
||||
### Main Entry
|
||||
|
||||
```python
|
||||
# main.py
|
||||
import cefpython3.cefpython as cef
|
||||
from platform_service import CEFPythonPlatformService
|
||||
from ipc_bridge import IPCBridge
|
||||
|
||||
class TimeSafariApp:
|
||||
def __init__(self):
|
||||
self.platform_service = CEFPythonPlatformService()
|
||||
self.cef_settings = {
|
||||
"debug": False,
|
||||
"log_severity": cef.LOGSEVERITY_ERROR,
|
||||
"log_file": "cef.log",
|
||||
"multi_threaded_message_loop": True,
|
||||
}
|
||||
|
||||
def initialize(self):
|
||||
cef.Initialize(settings=self.cef_settings)
|
||||
self.browser = cef.CreateBrowserSync(
|
||||
url=f"file://{os.path.abspath('dist/index.html')}"
|
||||
)
|
||||
self.ipc = IPCBridge(self.browser, self.platform_service)
|
||||
|
||||
def run(self):
|
||||
cef.MessageLoop()
|
||||
cef.Shutdown()
|
||||
```
|
||||
|
||||
### Platform Service (Python)
|
||||
|
||||
Handles local database and file system access:
|
||||
|
||||
```python
|
||||
class CEFPythonPlatformService:
|
||||
def __init__(self):
|
||||
self.db_path = self._get_db_path()
|
||||
self._init_schema()
|
||||
|
||||
def db_query(self, sql, params=None):
|
||||
with sqlite3.connect(self.db_path, check_same_thread=False) as conn:
|
||||
conn.row_factory = sqlite3.Row
|
||||
return [dict(row) for row in conn.execute(sql, params or [])]
|
||||
|
||||
def db_exec(self, sql, params=None):
|
||||
with sqlite3.connect(self.db_path, check_same_thread=False) as conn:
|
||||
cur = conn.execute(sql, params or [])
|
||||
conn.commit()
|
||||
return {"changes": cur.rowcount, "lastId": cur.lastrowid}
|
||||
|
||||
def export_data(self, file_name, data):
|
||||
try:
|
||||
path = os.path.join(self._get_downloads(), file_name)
|
||||
with open(path, 'w') as f:
|
||||
f.write(data)
|
||||
return {"success": True, "path": path}
|
||||
except Exception as e:
|
||||
return {"success": False, "error": str(e)}
|
||||
```
|
||||
|
||||
### IPC Bridge
|
||||
|
||||
Handles communication from JavaScript:
|
||||
|
||||
```python
|
||||
class IPCBridge:
|
||||
def __init__(self, browser, platform_service):
|
||||
self.browser = browser
|
||||
self.platform_service = platform_service
|
||||
bindings = cef.JavascriptBindings()
|
||||
bindings.SetFunction("callPython", self.call)
|
||||
self.browser.SetJavascriptBindings(bindings)
|
||||
|
||||
def call(self, name, args):
|
||||
handlers = {
|
||||
"dbQuery": self.platform_service.db_query,
|
||||
"dbExec": self.platform_service.db_exec,
|
||||
"exportData": self.platform_service.export_data
|
||||
}
|
||||
try:
|
||||
return {"success": True, "data": handlers[name](*args)}
|
||||
except Exception as e:
|
||||
return {"success": False, "error": str(e)}
|
||||
```
|
||||
|
||||
## Build & Packaging
|
||||
|
||||
Shell script with build modes:
|
||||
|
||||
```bash
|
||||
npm run build:web:dev
|
||||
./scripts/build-cefpython.sh --dev
|
||||
```
|
||||
|
||||
Includes PyInstaller packaging:
|
||||
|
||||
```bash
|
||||
pyinstaller --onefile --windowed --name TimeSafari main.py
|
||||
```
|
||||
|
||||
## Package.json Integration
|
||||
|
||||
### CEFPython Build Scripts
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
// CEFPython builds
|
||||
"build:cefpython": "./scripts/build-cefpython.sh",
|
||||
"build:cefpython:dev": "./scripts/build-cefpython.sh --dev",
|
||||
"build:cefpython:test": "./scripts/build-cefpython.sh --test",
|
||||
"build:cefpython:prod": "./scripts/build-cefpython.sh --prod",
|
||||
"build:cefpython:package": "./scripts/build-cefpython.sh --prod --package",
|
||||
|
||||
// Legacy aliases
|
||||
"build:desktop:cef": "npm run build:cefpython",
|
||||
"build:desktop:cef:dev": "npm run build:cefpython:dev",
|
||||
"build:desktop:cef:prod": "npm run build:cefpython:prod"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Platform Service Factory Integration
|
||||
|
||||
### Update PlatformServiceFactory
|
||||
|
||||
```typescript
|
||||
// src/services/PlatformServiceFactory.ts
|
||||
export class PlatformServiceFactory {
|
||||
private static instance: PlatformService | null = null;
|
||||
|
||||
public static getInstance(): PlatformService {
|
||||
if (!PlatformServiceFactory.instance) {
|
||||
const platform = process.env.VITE_PLATFORM || "web";
|
||||
|
||||
switch (platform) {
|
||||
case "cefpython":
|
||||
PlatformServiceFactory.instance = new CEFPythonPlatformService();
|
||||
break;
|
||||
case "electron":
|
||||
PlatformServiceFactory.instance = new ElectronPlatformService();
|
||||
break;
|
||||
case "capacitor":
|
||||
PlatformServiceFactory.instance = new CapacitorPlatformService();
|
||||
break;
|
||||
default:
|
||||
PlatformServiceFactory.instance = new WebPlatformService();
|
||||
}
|
||||
}
|
||||
return PlatformServiceFactory.instance;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Development Workflow
|
||||
|
||||
```bash
|
||||
cd cefpython
|
||||
pip install -r requirements.txt
|
||||
npm run build:cefpython:dev
|
||||
```
|
||||
|
||||
## Platform Considerations
|
||||
|
||||
### Windows
|
||||
- VC++ Redistributable
|
||||
- Registry for settings
|
||||
|
||||
### macOS
|
||||
- macOS 10.14+
|
||||
- Handle App Sandbox
|
||||
|
||||
### Linux
|
||||
- GTK dependencies
|
||||
- Provide `.desktop` launcher
|
||||
|
||||
## Security Considerations
|
||||
|
||||
- CEF sandboxing
|
||||
- File and IPC validation
|
||||
- Data encryption & key management
|
||||
- Code signing & integrity checks
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### 1. Memory Management
|
||||
|
||||
- Implement proper cleanup
|
||||
- Monitor memory usage
|
||||
- Optimize database queries
|
||||
- Handle large datasets
|
||||
|
||||
### 2. Startup Time
|
||||
|
||||
- Optimize application startup
|
||||
- Implement lazy loading
|
||||
- Cache frequently used data
|
||||
- Minimize initialization overhead
|
||||
|
||||
### 3. Resource Usage
|
||||
|
||||
- Monitor CPU usage
|
||||
- Optimize rendering
|
||||
- Handle background tasks
|
||||
- Implement resource limits
|
||||
|
||||
## Testing
|
||||
|
||||
- Unit tests for each service
|
||||
- Integration for IPC and file access
|
||||
- End-to-end for user workflows
|
||||
|
||||
## Issues & Suggestions for Improvement
|
||||
|
||||
### 1. IPC Registration Missing in Initial Version
|
||||
You must explicitly bind Python functions to JS:
|
||||
```python
|
||||
bindings.SetFunction("callPython", self.call)
|
||||
```
|
||||
|
||||
### 2. Incorrect `IPCBridge` Constructor in Early Draft
|
||||
Original:
|
||||
```python
|
||||
def __init__(self, browser):
|
||||
```
|
||||
Fixed:
|
||||
```python
|
||||
def __init__(self, browser, platform_service):
|
||||
```
|
||||
|
||||
### 3. SQLite Threading Caveat
|
||||
Add `check_same_thread=False` or use a threading queue to avoid crashes from multi-threaded access.
|
||||
|
||||
### 4. No Vue IPC Access Description
|
||||
Specify the frontend JS API for calling Python:
|
||||
```javascript
|
||||
window.callPython('dbQuery', ['SELECT * FROM accounts'])
|
||||
```
|
||||
|
||||
### 5. Missing Cleanup in Unit Tests
|
||||
Add teardown for exported files to avoid clutter and permissions issues.
|
||||
|
||||
### 6. Logging
|
||||
Add `logging` or `structlog` to the Python service and bridge for auditability.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
#### 1. CEF Initialization Failures
|
||||
|
||||
```bash
|
||||
# Check CEF installation
|
||||
python -c "import cefpython3; print('CEF installed')"
|
||||
|
||||
# Verify dependencies
|
||||
pip list | grep cefpython3
|
||||
```
|
||||
|
||||
#### 2. Database Access Issues
|
||||
|
||||
```bash
|
||||
# Check database permissions
|
||||
ls -la ~/.local/share/timesafari/
|
||||
|
||||
# Verify SQLite installation
|
||||
python -c "import sqlite3; print('SQLite available')"
|
||||
```
|
||||
|
||||
#### 3. Build Failures
|
||||
|
||||
```bash
|
||||
# Clean and rebuild
|
||||
rm -rf cefpython/dist/
|
||||
rm -rf cefpython/build/
|
||||
npm run build:cefpython:dev
|
||||
```
|
||||
|
||||
### Debug Mode
|
||||
|
||||
```python
|
||||
# Enable debug logging
|
||||
cef_settings = {
|
||||
"debug": True,
|
||||
"log_severity": cef.LOGSEVERITY_VERBOSE,
|
||||
"log_file": "cef_debug.log",
|
||||
}
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
This guide offers a clear and technically complete roadmap for integrating CEFPython with TimeSafari. By implementing the suggestions above, the solution will be production-ready with complete platform service integration, desktop capability, and a stable build process.
|
||||
|
||||
**Effort**: 4 weeks
|
||||
**Priority**: Medium
|
||||
**Dependencies**: Python 3.8+, CEFPython
|
||||
**Stakeholders**: Desktop development team, users
|
||||
616
docs/build-system/core/build-pattern-conversion-plan.md
Normal file
616
docs/build-system/core/build-pattern-conversion-plan.md
Normal file
@@ -0,0 +1,616 @@
|
||||
# Build Pattern Conversion Plan
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-09
|
||||
**Status**: **PLANNING** - Ready for Implementation
|
||||
|
||||
## Overview
|
||||
|
||||
Convert TimeSafari's build instruction pattern from the current script-based
|
||||
approach to a new Vite `mode`-based pattern that provides better environment
|
||||
management and consistency across all build targets.
|
||||
|
||||
## Why Vite Mode Instead of NODE_ENV?
|
||||
|
||||
### Vite's Native Mode System
|
||||
|
||||
Vite is designed to work with `mode`, which:
|
||||
|
||||
- Determines the `.env` file to load (e.g. `.env.production`, `.env.test`, etc.)
|
||||
- Is passed to `defineConfig(({ mode }) => {...})` in `vite.config.ts`
|
||||
- Is used to set behavior for dev/prod/test at config level
|
||||
- Provides better integration with Vite's build system
|
||||
|
||||
### NODE_ENV Limitations
|
||||
|
||||
`NODE_ENV` is legacy from Webpack-era tooling:
|
||||
|
||||
- You can't change `NODE_ENV` manually and expect Vite to adapt
|
||||
- Vite does not map `NODE_ENV` back to `mode`
|
||||
- It's redundant with `mode` and might conflict with assumptions
|
||||
- Limited integration with Vite's environment loading system
|
||||
|
||||
### Usage Pattern
|
||||
|
||||
```bash
|
||||
# Correct: Use Vite's mode system
|
||||
vite build --mode production
|
||||
vite build --mode development
|
||||
vite build --mode test
|
||||
|
||||
# Only if third-party libraries require NODE_ENV
|
||||
NODE_ENV=production vite build --mode production
|
||||
```
|
||||
|
||||
### Development vs Build Environments
|
||||
|
||||
**Development Environment:**
|
||||
|
||||
- **Build with defaults**: `npm run build:*` - Uses `--mode development` by default
|
||||
- **Purpose**: Development builds for testing and debugging
|
||||
- **Output**: Bundled files with development optimizations
|
||||
|
||||
**Testing/Production Environments:**
|
||||
|
||||
- **Build with explicit mode**: `npm run build:* -- --mode test/production`
|
||||
- **Purpose**: Validate and deploy the bundled application
|
||||
- **Output**: Optimized, bundled files for specific environment
|
||||
|
||||
### Mode Override Behavior
|
||||
|
||||
**How `--mode` Override Works:**
|
||||
|
||||
```bash
|
||||
# Base script (no hardcoded mode)
|
||||
"build:electron": "vite build --config vite.config.electron.mts"
|
||||
|
||||
# Development (uses Vite's default: --mode development)
|
||||
npm run build:electron
|
||||
# Executes: vite build --config vite.config.electron.mts
|
||||
|
||||
# Testing (explicitly overrides with --mode test)
|
||||
npm run build:electron -- --mode test
|
||||
# Executes: vite build --config vite.config.electron.mts --mode test
|
||||
|
||||
# Production (explicitly overrides with --mode production)
|
||||
npm run build:electron -- --mode production
|
||||
# Executes: vite build --config vite.config.electron.mts --mode production
|
||||
```
|
||||
|
||||
**Key Points:**
|
||||
|
||||
- Base scripts have **no hardcoded `--mode`** to allow override
|
||||
- `npm run build:electron` defaults to `--mode development`
|
||||
- `npm run build:electron -- --mode test` overrides to `--mode test`
|
||||
- Vite uses the **last `--mode` argument** if multiple are provided
|
||||
|
||||
### Capacitor Platform-Specific Commands
|
||||
|
||||
Capacitor requires platform-specific sync commands after building:
|
||||
|
||||
```bash
|
||||
# General sync (copies web assets to all platforms)
|
||||
npm run build:capacitor && npx cap sync
|
||||
|
||||
# Platform-specific sync
|
||||
npm run build:capacitor && npx cap sync android
|
||||
npm run build:capacitor && npx cap sync ios
|
||||
|
||||
# Environment-specific with platform sync
|
||||
npm run build:capacitor -- --mode production && npx cap sync android
|
||||
npm run build:capacitor -- --mode development && npx cap sync ios
|
||||
```
|
||||
|
||||
### Docker Build Commands
|
||||
|
||||
Docker builds include both Vite asset generation and Docker image creation:
|
||||
|
||||
```bash
|
||||
# General Docker build (Vite build + Docker image)
|
||||
npm run build:web:docker
|
||||
|
||||
# Environment-specific Docker builds
|
||||
npm run build:web:docker:test # Test environment + Docker image
|
||||
npm run build:web:docker:prod # Production environment + Docker image
|
||||
|
||||
# Manual mode overrides for Docker builds
|
||||
npm run build:web:docker -- --mode test
|
||||
npm run build:web:docker -- --mode production
|
||||
```
|
||||
|
||||
**Docker Build Process:**
|
||||
|
||||
1. **Vite Build**: Creates optimized web assets with environment-specific variables
|
||||
2. **Docker Build**: Creates Docker image using `Dockerfile` in project root
|
||||
3. **Image Tagging**: Images are tagged as `timesafari-web` for consistent management
|
||||
|
||||
**Key Features:**
|
||||
|
||||
- Complete end-to-end Docker workflow in single command
|
||||
- Environment-aware builds (test/production configurations)
|
||||
- Consistent image tagging for deployment
|
||||
- Mode override flexibility for custom environments
|
||||
|
||||
### Electron Platform-Specific Commands
|
||||
|
||||
Electron requires platform-specific build commands after the Vite build:
|
||||
|
||||
```bash
|
||||
# General Electron build (Vite build only)
|
||||
npm run build:electron
|
||||
|
||||
# Platform-specific builds
|
||||
npm run build:electron:windows # Windows executable
|
||||
npm run build:electron:mac # macOS app bundle
|
||||
npm run build:electron:linux # Linux executable
|
||||
|
||||
# Package-specific builds
|
||||
npm run build:electron:appimage # Linux AppImage
|
||||
npm run build:electron:dmg # macOS DMG installer
|
||||
|
||||
# Environment-specific builds
|
||||
npm run build:electron -- --mode development
|
||||
npm run build:electron -- --mode test
|
||||
npm run build:electron -- --mode production
|
||||
|
||||
# Environment-specific with platform builds
|
||||
npm run build:electron:windows -- --mode development
|
||||
npm run build:electron:windows -- --mode test
|
||||
npm run build:electron:windows -- --mode production
|
||||
|
||||
npm run build:electron:mac -- --mode development
|
||||
npm run build:electron:mac -- --mode test
|
||||
npm run build:electron:mac -- --mode production
|
||||
|
||||
npm run build:electron:linux -- --mode development
|
||||
npm run build:electron:linux -- --mode test
|
||||
npm run build:electron:linux -- --mode production
|
||||
|
||||
# Environment-specific with package builds
|
||||
npm run build:electron:appimage -- --mode development
|
||||
npm run build:electron:appimage -- --mode test
|
||||
npm run build:electron:appimage -- --mode production
|
||||
|
||||
npm run build:electron:dmg -- --mode development
|
||||
npm run build:electron:dmg -- --mode test
|
||||
npm run build:electron:dmg -- --mode production
|
||||
```
|
||||
|
||||
## Current State Analysis
|
||||
|
||||
### Existing Build Scripts
|
||||
|
||||
- **Web**: `build:web` - Uses vite.config.web.mts
|
||||
- **Capacitor**: `build:capacitor` - Uses vite.config.capacitor.mts
|
||||
- **Android**: `build:android` - Shell script wrapper
|
||||
- **iOS**: `build:ios` - Shell script wrapper
|
||||
- **Electron**: `build:electron` - Uses vite.config.electron.mts
|
||||
- **Windows**: `build:electron:windows` - Windows executable
|
||||
- **macOS**: `build:electron:mac` - macOS app bundle
|
||||
- **Linux**: `build:electron:linux` - Linux executable
|
||||
- **AppImage**: `build:electron:appimage` - Linux AppImage
|
||||
- **DMG**: `build:electron:dmg` - macOS DMG installer
|
||||
|
||||
### Current `package.json` Scripts
|
||||
|
||||
```json
|
||||
{
|
||||
"build:capacitor": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --mode capacitor --config vite.config.capacitor.mts",
|
||||
"build:web": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.web.mts",
|
||||
"build:electron": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --mode electron --config vite.config.electron.mts"
|
||||
}
|
||||
```
|
||||
|
||||
## Target Pattern
|
||||
|
||||
### New Vite Mode-Based Pattern
|
||||
|
||||
```bash
|
||||
# Development builds (defaults to --mode development)
|
||||
npm run build:web-dev
|
||||
npm run build:capacitor-dev
|
||||
npm run build:electron-dev
|
||||
|
||||
# Testing builds (bundle required)
|
||||
npm run build:web -- --mode test
|
||||
npm run build:capacitor -- --mode test && npx cap sync
|
||||
npm run build:electron -- --mode test
|
||||
|
||||
# Production builds (bundle required)
|
||||
npm run build:web -- --mode production
|
||||
npm run build:capacitor -- --mode production && npx cap sync
|
||||
npm run build:electron -- --mode production
|
||||
|
||||
# Docker builds
|
||||
npm run build:web:docker -- --mode test
|
||||
npm run build:web:docker -- --mode production
|
||||
|
||||
# Docker environment-specific builds
|
||||
npm run build:web:docker:test
|
||||
npm run build:web:docker:prod
|
||||
|
||||
# Capacitor platform-specific builds
|
||||
npm run build:capacitor:android -- --mode test
|
||||
npm run build:capacitor:android -- --mode production
|
||||
|
||||
npm run build:capacitor:ios -- --mode test
|
||||
npm run build:capacitor:ios -- --mode production
|
||||
|
||||
# Electron platform-specific builds
|
||||
npm run build:electron:windows -- --mode test
|
||||
npm run build:electron:windows -- --mode production
|
||||
|
||||
npm run build:electron:mac -- --mode test
|
||||
npm run build:electron:mac -- --mode production
|
||||
|
||||
npm run build:electron:linux -- --mode test
|
||||
npm run build:electron:linux -- --mode production
|
||||
|
||||
# Electron package-specific builds
|
||||
npm run build:electron:appimage -- --mode test
|
||||
npm run build:electron:appimage -- --mode production
|
||||
|
||||
npm run build:electron:dmg -- --mode test
|
||||
npm run build:electron:dmg -- --mode production
|
||||
```
|
||||
|
||||
### New `package.json` Scripts Structure
|
||||
|
||||
```json
|
||||
{
|
||||
"build:web": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite --mode development --config vite.config.web.mts",
|
||||
"build:web:dev": "npm run build:web",
|
||||
"build:web:build": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --mode development --config vite.config.web.mts",
|
||||
"build:web:test": "npm run build:web:build -- --mode test",
|
||||
"build:web:prod": "npm run build:web:build -- --mode production",
|
||||
"build:web:docker": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.web.mts && docker build -t timesafari-web .",
|
||||
"build:web:docker:test": "npm run build:web:docker -- --mode test",
|
||||
"build:web:docker:prod": "npm run build:web:docker -- --mode production",
|
||||
|
||||
"build:capacitor": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --mode capacitor --config vite.config.capacitor.mts",
|
||||
"build:capacitor-dev": "npm run build:capacitor",
|
||||
"build:capacitor:sync": "npm run build:capacitor && npx cap sync",
|
||||
"build:capacitor:android": "npm run build:capacitor:sync && npx cap sync android",
|
||||
"build:capacitor:ios": "npm run build:capacitor:sync && npx cap sync ios",
|
||||
|
||||
"build:electron": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.electron.mts",
|
||||
"build:electron:dev": "npm run build:electron && cd electron && npm run electron:start",
|
||||
"build:electron:windows": "npm run build:electron && cd electron && npm run build:windows",
|
||||
"build:electron:mac": "npm run build:electron && cd electron && npm run build:mac",
|
||||
"build:electron:linux": "npm run build:electron && cd electron && npm run build:linux",
|
||||
"build:electron:appimage": "npm run build:electron:linux && cd electron && npm run build:appimage",
|
||||
"build:electron:dmg": "npm run build:electron:mac && cd electron && npm run build:dmg"
|
||||
}
|
||||
```
|
||||
|
||||
## Implementation Plan
|
||||
|
||||
### Phase 1: Environment Configuration (Day 1)
|
||||
|
||||
#### 1.1 Update Vite Configurations
|
||||
|
||||
- [ ] **vite.config.web.mts**: Add mode-based configuration
|
||||
- [ ] **vite.config.capacitor.mts**: Add mode-based configuration
|
||||
- [ ] **vite.config.electron.mts**: Add mode-based configuration
|
||||
- [ ] **vite.config.common.mts**: Add environment-specific variables
|
||||
|
||||
#### 1.2 Environment Variables Setup
|
||||
|
||||
- [ ] Create `.env.development` file for development settings
|
||||
- [ ] Create `.env.test` file for testing settings
|
||||
- [ ] Create `.env.production` file for production settings
|
||||
- [ ] Update `.env.example` with new pattern
|
||||
|
||||
#### 1.3 Environment Detection Logic
|
||||
|
||||
```typescript
|
||||
// vite.config.common.mts
|
||||
export default defineConfig(({ mode }) => {
|
||||
const getEnvironmentConfig = (mode: string) => {
|
||||
switch (mode) {
|
||||
case 'production':
|
||||
return { /* production settings */ };
|
||||
case 'test':
|
||||
return { /* testing settings */ };
|
||||
default:
|
||||
return { /* development settings */ };
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
define: {
|
||||
__DEV__: mode === 'development',
|
||||
__TEST__: mode === 'test',
|
||||
__PROD__: mode === 'production'
|
||||
},
|
||||
// ... other config
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
### Phase 2: Package.json Scripts Update (Day 1)
|
||||
|
||||
#### 2.1 Web Build Scripts
|
||||
|
||||
```json
|
||||
{
|
||||
"build:web": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.web.mts",
|
||||
"build:web-dev": "npm run build:web",
|
||||
"build:web-test": "npm run build:web -- --mode test",
|
||||
"build:web-prod": "npm run build:web -- --mode production"
|
||||
}
|
||||
```
|
||||
|
||||
#### 2.2 Capacitor Build Scripts
|
||||
|
||||
```json
|
||||
{
|
||||
"build:capacitor": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --mode capacitor --config vite.config.capacitor.mts",
|
||||
"build:capacitor-dev": "npm run build:capacitor",
|
||||
"build:capacitor:sync": "npm run build:capacitor && npx cap sync",
|
||||
"build:capacitor:android": "npm run build:capacitor:sync && npx cap sync android",
|
||||
"build:capacitor:ios": "npm run build:capacitor:sync && npx cap sync ios",
|
||||
"build:capacitor-test": "npm run build:capacitor -- --mode test && npx cap sync",
|
||||
"build:capacitor-prod": "npm run build:capacitor -- --mode production && npx cap sync",
|
||||
"build:capacitor:android-test": "npm run build:capacitor -- --mode test && npx cap sync android",
|
||||
"build:capacitor:android-prod": "npm run build:capacitor -- --mode production && npx cap sync android",
|
||||
"build:capacitor:ios-test": "npm run build:capacitor -- --mode test && npx cap sync ios",
|
||||
"build:capacitor:ios-prod": "npm run build:capacitor -- --mode production && npx cap sync ios"
|
||||
}
|
||||
```
|
||||
|
||||
#### 2.3 Electron Build Scripts
|
||||
|
||||
```json
|
||||
{
|
||||
"build:electron": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.electron.mts",
|
||||
"build:electron-dev": "npm run build:electron",
|
||||
"build:electron:windows": "npm run build:electron && cd electron && npm run build:windows",
|
||||
"build:electron:mac": "npm run build:electron && cd electron && npm run build:mac",
|
||||
"build:electron:linux": "npm run build:electron && cd electron && npm run build:linux",
|
||||
"build:electron:appimage": "npm run build:electron:linux && cd electron && npm run build:appimage",
|
||||
"build:electron:dmg": "npm run build:electron:mac && cd electron && npm run build:dmg",
|
||||
"build:electron-test": "npm run build:electron -- --mode test",
|
||||
"build:electron-prod": "npm run build:electron -- --mode production",
|
||||
"build:electron:windows-test": "npm run build:electron -- --mode test && cd electron && npm run build:windows",
|
||||
"build:electron:windows-prod": "npm run build:electron -- --mode production && cd electron && npm run build:windows",
|
||||
"build:electron:mac-dev": "npm run build:electron -- --mode development && cd electron && npm run build:mac",
|
||||
"build:electron:mac-test": "npm run build:electron -- --mode test && cd electron && npm run build:mac",
|
||||
"build:electron:mac-prod": "npm run build:electron -- --mode production && cd electron && npm run build:mac",
|
||||
"build:electron:linux-test": "npm run build:electron -- --mode test && cd electron && npm run build:linux",
|
||||
"build:electron:linux-prod": "npm run build:electron -- --mode production && cd electron && npm run build:linux"
|
||||
}
|
||||
```
|
||||
|
||||
#### 2.4 Docker Build Scripts
|
||||
|
||||
```json
|
||||
{
|
||||
"build:web:docker": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.web.mts && docker build -t timesafari-web .",
|
||||
"build:web:docker:test": "npm run build:web:docker -- --mode test",
|
||||
"build:web:docker:prod": "npm run build:web:docker -- --mode production"
|
||||
}
|
||||
```
|
||||
|
||||
**Docker Build Features:**
|
||||
|
||||
- Complete Vite build + Docker image creation workflow
|
||||
- Environment-specific configurations (test/production)
|
||||
- Consistent image tagging (`timesafari-web`)
|
||||
- Mode override flexibility for custom environments
|
||||
|
||||
### Phase 3: Shell Script Updates (Day 2)
|
||||
|
||||
#### 3.1 Update build-electron.sh
|
||||
|
||||
- [ ] Add mode-based environment support
|
||||
- [ ] Update environment loading logic
|
||||
- [ ] Add environment-specific build paths
|
||||
- [ ] Update logging to show environment
|
||||
|
||||
#### 3.2 Update build-android.sh
|
||||
|
||||
- [ ] Add mode-based environment support
|
||||
- [ ] Update environment detection
|
||||
- [ ] Add environment-specific configurations
|
||||
|
||||
#### 3.3 Update build-ios.sh
|
||||
|
||||
- [ ] Add mode-based environment support
|
||||
- [ ] Update environment detection
|
||||
- [ ] Add environment-specific configurations
|
||||
|
||||
### Phase 4: Documentation Updates (Day 2)
|
||||
|
||||
#### 4.1 Update BUILDING.md
|
||||
|
||||
- [ ] Document new Vite mode-based pattern
|
||||
- [ ] Update build instructions
|
||||
- [ ] Add environment-specific examples
|
||||
- [ ] Update troubleshooting section
|
||||
|
||||
#### 4.2 Update scripts/README.md
|
||||
|
||||
- [ ] Document new Vite mode-based build patterns
|
||||
- [ ] Update usage examples
|
||||
- [ ] Add environment configuration guide
|
||||
|
||||
#### 4.3 Update CI/CD Documentation
|
||||
|
||||
- [ ] Update GitHub Actions workflows
|
||||
- [ ] Update Docker build instructions
|
||||
- [ ] Update deployment guides
|
||||
|
||||
### Phase 5: Testing & Validation (Day 3)
|
||||
|
||||
#### 5.1 Environment Testing
|
||||
|
||||
- [ ] Test dev environment builds
|
||||
- [ ] Test test environment builds
|
||||
- [ ] Test prod environment builds
|
||||
- [ ] Validate environment variables
|
||||
|
||||
#### 5.2 Platform Testing
|
||||
|
||||
- [ ] Test web builds across environments
|
||||
- [ ] Test capacitor builds across environments
|
||||
- [ ] Test capacitor android sync across environments
|
||||
- [ ] Test capacitor ios sync across environments
|
||||
- [ ] Test electron builds across environments
|
||||
- [ ] Test electron windows builds across environments
|
||||
- [ ] Test electron mac builds across environments
|
||||
- [ ] Test electron linux builds across environments
|
||||
- [ ] Test electron appimage builds across environments
|
||||
- [ ] Test electron dmg builds across environments
|
||||
- [ ] Test docker builds across environments
|
||||
- [ ] Test docker image creation and tagging
|
||||
- [ ] Test docker environment-specific configurations
|
||||
|
||||
#### 5.3 Integration Testing
|
||||
|
||||
- [ ] Test with existing CI/CD pipelines
|
||||
- [ ] Test with existing deployment scripts
|
||||
- [ ] Test with existing development workflows
|
||||
|
||||
## Environment-Specific Configurations
|
||||
|
||||
### Development Environment (--mode development)
|
||||
|
||||
```typescript
|
||||
{
|
||||
VITE_API_URL: 'http://localhost:3000',
|
||||
VITE_DEBUG: 'true',
|
||||
VITE_LOG_LEVEL: 'debug',
|
||||
VITE_ENABLE_DEV_TOOLS: 'true'
|
||||
}
|
||||
```
|
||||
|
||||
### Testing Environment (--mode test)
|
||||
|
||||
```typescript
|
||||
{
|
||||
VITE_API_URL: 'https://test-api.timesafari.com',
|
||||
VITE_DEBUG: 'false',
|
||||
VITE_LOG_LEVEL: 'info',
|
||||
VITE_ENABLE_DEV_TOOLS: 'false'
|
||||
}
|
||||
```
|
||||
|
||||
### Production Environment (--mode production)
|
||||
|
||||
```typescript
|
||||
{
|
||||
VITE_API_URL: 'https://api.timesafari.com',
|
||||
VITE_DEBUG: 'false',
|
||||
VITE_LOG_LEVEL: 'warn',
|
||||
VITE_ENABLE_DEV_TOOLS: 'false'
|
||||
}
|
||||
```
|
||||
|
||||
## Migration Strategy
|
||||
|
||||
### Backward Compatibility
|
||||
|
||||
- [ ] Keep existing script names as aliases
|
||||
- [ ] Add deprecation warnings for old scripts
|
||||
- [ ] Maintain existing CI/CD compatibility
|
||||
- [ ] Provide migration guide for users
|
||||
|
||||
### Gradual Rollout
|
||||
|
||||
1. **Week 1**: Implement new scripts alongside existing ones
|
||||
2. **Week 2**: Update CI/CD to use new pattern
|
||||
3. **Week 3**: Update documentation and guides
|
||||
4. **Week 4**: Deprecate old scripts with warnings
|
||||
|
||||
## Success Metrics
|
||||
|
||||
### Technical Metrics
|
||||
|
||||
- [ ] All builds work with Vite mode-based pattern
|
||||
- [ ] Environment variables properly loaded
|
||||
- [ ] Build artifacts correctly generated
|
||||
- [ ] No regression in existing functionality
|
||||
|
||||
### Process Metrics
|
||||
|
||||
- [ ] Reduced build script complexity
|
||||
- [ ] Improved environment management
|
||||
- [ ] Better developer experience
|
||||
- [ ] Consistent build patterns
|
||||
|
||||
## Risk Assessment
|
||||
|
||||
### Low Risk
|
||||
|
||||
- [ ] Environment variable changes
|
||||
- [ ] Package.json script updates
|
||||
- [ ] Documentation updates
|
||||
|
||||
### Medium Risk
|
||||
|
||||
- [ ] Vite configuration changes (mode-based)
|
||||
- [ ] Shell script modifications
|
||||
- [ ] CI/CD pipeline updates
|
||||
|
||||
### High Risk
|
||||
|
||||
- [ ] Breaking existing build processes
|
||||
- [ ] Environment-specific bugs
|
||||
- [ ] Deployment failures
|
||||
|
||||
## Rollback Plan
|
||||
|
||||
### Immediate Rollback
|
||||
|
||||
- [ ] Revert package.json changes
|
||||
- [ ] Restore original vite configs
|
||||
- [ ] Restore original shell scripts
|
||||
|
||||
### Gradual Rollback
|
||||
|
||||
- [ ] Keep old scripts as primary
|
||||
- [ ] Use new scripts as experimental
|
||||
- [ ] Gather feedback before full migration
|
||||
|
||||
## Timeline
|
||||
|
||||
### Day 1: Foundation
|
||||
|
||||
- [ ] Environment configuration setup
|
||||
- [ ] Package.json script updates
|
||||
- [ ] Basic testing
|
||||
|
||||
### Day 2: Integration
|
||||
|
||||
- [ ] Shell script updates
|
||||
- [ ] Documentation updates
|
||||
- [ ] Integration testing
|
||||
|
||||
### Day 3: Validation
|
||||
|
||||
- [ ] Comprehensive testing
|
||||
- [ ] Performance validation
|
||||
- [ ] Documentation review
|
||||
|
||||
### Day 4: Deployment
|
||||
|
||||
- [ ] CI/CD updates
|
||||
- [ ] Production validation
|
||||
- [ ] User communication
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. **Review and approve plan**
|
||||
2. **Set up development environment**
|
||||
3. **Begin Phase 1 implementation**
|
||||
4. **Create test cases**
|
||||
5. **Start implementation**
|
||||
|
||||
---
|
||||
|
||||
**Status**: Ready for implementation
|
||||
**Priority**: Medium
|
||||
**Estimated Effort**: 3-4 days
|
||||
**Dependencies**: None
|
||||
**Stakeholders**: Development team, DevOps team
|
||||
470
docs/build-system/core/build-systems-overview.md
Normal file
470
docs/build-system/core/build-systems-overview.md
Normal file
@@ -0,0 +1,470 @@
|
||||
# TimeSafari Build Systems Overview
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-11
|
||||
**Status**: ✅ **COMPLETE** - All build systems documented and integrated
|
||||
|
||||
## Overview
|
||||
|
||||
TimeSafari supports multiple platforms and build targets through a unified build system architecture. This document provides a comprehensive overview of all build systems, their purposes, and how they work together.
|
||||
|
||||
## Build System Architecture
|
||||
|
||||
### Platform Support Matrix
|
||||
|
||||
| Platform | Build Script | Development | Testing | Production | Package Types |
|
||||
|----------|--------------|-------------|---------|------------|---------------|
|
||||
| **Web** | `build-web.sh` | ✅ Dev Server | ✅ Test Build | ✅ Prod Build | Docker Images |
|
||||
| **Android** | `build-android.sh` | ✅ Debug APK | ✅ Test APK | ✅ Release APK/AAB | APK, AAB |
|
||||
| **iOS** | `build-ios.sh` | ✅ Debug App | ✅ Test App | ✅ Release App | IPA |
|
||||
| **Electron** | `build-electron.sh` | ✅ Dev App | ✅ Test App | ✅ Prod App | AppImage, DEB, DMG, EXE |
|
||||
|
||||
### Build Script Locations
|
||||
|
||||
```bash
|
||||
scripts/
|
||||
├── build-web.sh # Web/PWA builds
|
||||
├── build-android.sh # Android mobile builds
|
||||
├── build-ios.sh # iOS mobile builds (future)
|
||||
├── build-electron.sh # Desktop builds
|
||||
└── common.sh # Shared build utilities
|
||||
```
|
||||
|
||||
## Unified Build Pattern
|
||||
|
||||
All build scripts follow a consistent pattern:
|
||||
|
||||
### 1. **Environment Setup**
|
||||
```bash
|
||||
# Set platform-specific environment variables
|
||||
VITE_PLATFORM=<platform>
|
||||
PWA: automatically enabled for web platforms
|
||||
VITE_GIT_HASH=<git-commit-hash>
|
||||
```
|
||||
|
||||
### 2. **Argument Parsing**
|
||||
```bash
|
||||
# Consistent command-line interface
|
||||
./scripts/build-<platform>.sh [--dev|--test|--prod] [options]
|
||||
```
|
||||
|
||||
### 3. **Build Process**
|
||||
```bash
|
||||
# Standard build flow
|
||||
1. Validate environment
|
||||
2. Clean build artifacts
|
||||
3. Build web assets (Vite)
|
||||
4. Platform-specific build
|
||||
5. Generate assets
|
||||
6. Create packages (if requested)
|
||||
```
|
||||
|
||||
### 4. **Error Handling**
|
||||
```bash
|
||||
# Consistent exit codes
|
||||
1: Cleanup failed
|
||||
2: Web build failed
|
||||
3: Platform build failed
|
||||
4: Asset generation failed
|
||||
5: Package creation failed
|
||||
```
|
||||
|
||||
## Web Build System
|
||||
|
||||
### Purpose
|
||||
Builds the web application for browser and PWA deployment.
|
||||
|
||||
### Key Features
|
||||
- **Development Server**: Hot reload with Vite
|
||||
- **PWA Support**: Service workers and manifest generation
|
||||
- **Docker Integration**: Containerized deployment
|
||||
- **Environment Modes**: Development, test, production
|
||||
|
||||
### Usage Examples
|
||||
```bash
|
||||
# Development (starts dev server)
|
||||
npm run build:web:dev
|
||||
|
||||
# Production build
|
||||
npm run build:web:prod
|
||||
|
||||
# Docker deployment
|
||||
npm run build:web:docker:prod
|
||||
```
|
||||
|
||||
### Output
|
||||
- **Development**: Vite dev server at http://localhost:8080
|
||||
- **Production**: Static files in `dist/` directory
|
||||
- **Docker**: Containerized application image
|
||||
|
||||
**Documentation**: [Web Build Scripts Guide](build-web-script-integration.md)
|
||||
|
||||
## Android Build System
|
||||
|
||||
### Purpose
|
||||
Builds Android mobile applications using Capacitor and Gradle.
|
||||
|
||||
### Key Features
|
||||
- **Capacitor Integration**: Web-to-native bridge
|
||||
- **Gradle Builds**: APK and AAB generation
|
||||
- **Asset Generation**: Icons and splash screens
|
||||
- **Device Deployment**: Direct APK installation
|
||||
|
||||
### Usage Examples
|
||||
```bash
|
||||
# Development build
|
||||
npm run build:android:dev
|
||||
|
||||
# Production APK
|
||||
npm run build:android:prod
|
||||
|
||||
# Deploy to device
|
||||
npm run build:android:deploy
|
||||
```
|
||||
|
||||
### Output
|
||||
- **Debug APK**: `android/app/build/outputs/apk/debug/app-debug.apk`
|
||||
- **Release APK**: `android/app/build/outputs/apk/release/app-release.apk`
|
||||
- **AAB Bundle**: `android/app/build/outputs/bundle/release/app-release.aab`
|
||||
|
||||
### Device Deployment
|
||||
```bash
|
||||
# Automatic deployment to connected device
|
||||
npm run build:android:deploy
|
||||
|
||||
# Manual deployment
|
||||
adb install -r android/app/build/outputs/apk/debug/app-debug.apk
|
||||
```
|
||||
|
||||
**Documentation**: [Android Build Scripts Guide](android-build-scripts.md)
|
||||
|
||||
## iOS Build System
|
||||
|
||||
### Purpose
|
||||
Builds iOS mobile applications using Capacitor and Xcode.
|
||||
|
||||
### Key Features
|
||||
- **Capacitor Integration**: Web-to-native bridge
|
||||
- **Xcode Integration**: Native iOS builds
|
||||
- **Asset Generation**: Icons and splash screens
|
||||
- **Simulator Support**: iOS simulator testing
|
||||
|
||||
### Usage Examples
|
||||
```bash
|
||||
# Development build
|
||||
npm run build:ios:dev
|
||||
|
||||
# Production build
|
||||
npm run build:ios:prod
|
||||
|
||||
# Open Xcode
|
||||
npm run build:ios:studio
|
||||
```
|
||||
|
||||
### Output
|
||||
- **Debug App**: `ios/App/build/Debug-iphonesimulator/App.app`
|
||||
- **Release App**: `ios/App/build/Release-iphoneos/App.app`
|
||||
- **IPA Package**: `ios/App/build/Release-iphoneos/App.ipa`
|
||||
|
||||
**Documentation**: [iOS Build Scripts Guide](ios-build-scripts.md) *(Future)*
|
||||
|
||||
## Electron Build System
|
||||
|
||||
### Purpose
|
||||
Builds desktop applications for Windows, macOS, and Linux.
|
||||
|
||||
### Key Features
|
||||
- **Cross-Platform**: Windows, macOS, Linux support
|
||||
- **Package Formats**: AppImage, DEB, DMG, EXE
|
||||
- **Development Mode**: Direct app execution
|
||||
- **Single Instance**: Prevents multiple app instances
|
||||
|
||||
### Usage Examples
|
||||
```bash
|
||||
# Development (runs app directly)
|
||||
npm run build:electron:dev
|
||||
|
||||
# Production AppImage
|
||||
npm run build:electron:appimage:prod
|
||||
|
||||
# Production DMG
|
||||
npm run build:electron:dmg:prod
|
||||
```
|
||||
|
||||
### Output
|
||||
- **Development**: App runs directly (no files created)
|
||||
- **Packages**: Executables in `electron/dist/` directory
|
||||
- **AppImage**: `TimeSafari-1.0.3-beta.AppImage`
|
||||
- **DEB**: `TimeSafari_1.0.3-beta_amd64.deb`
|
||||
- **DMG**: `TimeSafari-1.0.3-beta.dmg`
|
||||
- **EXE**: `TimeSafari Setup 1.0.3-beta.exe`
|
||||
|
||||
**Documentation**: [Electron Build Scripts Guide](electron-build-scripts.md)
|
||||
|
||||
## Environment Management
|
||||
|
||||
### Environment Variables
|
||||
|
||||
All build systems use consistent environment variable patterns:
|
||||
|
||||
```bash
|
||||
# Platform identification
|
||||
VITE_PLATFORM=web|capacitor|electron
|
||||
|
||||
# PWA configuration
|
||||
PWA: automatically enabled for web platforms
|
||||
|
||||
# Build information
|
||||
VITE_GIT_HASH=<git-commit-hash>
|
||||
DEBUG_MIGRATIONS=0|1
|
||||
```
|
||||
|
||||
### Environment Files
|
||||
|
||||
```bash
|
||||
.env.development # Development environment
|
||||
.env.test # Testing environment
|
||||
.env.production # Production environment
|
||||
```
|
||||
|
||||
### Mode-Specific Configuration
|
||||
|
||||
Each build mode loads appropriate environment configuration:
|
||||
|
||||
- **Development**: Local development settings
|
||||
- **Test**: Testing environment with test APIs
|
||||
- **Production**: Production environment with live APIs
|
||||
|
||||
## Package.json Integration
|
||||
|
||||
### Script Organization
|
||||
|
||||
All build scripts are integrated into `package.json` with consistent naming:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
// Web builds
|
||||
"build:web": "./scripts/build-web.sh",
|
||||
"build:web:dev": "./scripts/build-web.sh --dev",
|
||||
"build:web:test": "./scripts/build-web.sh --test",
|
||||
"build:web:prod": "./scripts/build-web.sh --prod",
|
||||
|
||||
// Android builds
|
||||
"build:android": "./scripts/build-android.sh",
|
||||
"build:android:dev": "./scripts/build-android.sh --dev",
|
||||
"build:android:test": "./scripts/build-android.sh --test",
|
||||
"build:android:prod": "./scripts/build-android.sh --prod",
|
||||
|
||||
// iOS builds
|
||||
"build:ios": "./scripts/build-ios.sh",
|
||||
"build:ios:dev": "./scripts/build-ios.sh --dev",
|
||||
"build:ios:test": "./scripts/build-ios.sh --test",
|
||||
"build:ios:prod": "./scripts/build-ios.sh --prod",
|
||||
|
||||
// Electron builds
|
||||
"build:electron:dev": "./scripts/build-electron.sh --dev",
|
||||
"build:electron:test": "./scripts/build-electron.sh --test",
|
||||
"build:electron:prod": "./scripts/build-electron.sh --prod"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Legacy Compatibility
|
||||
|
||||
Legacy scripts are maintained as aliases for backward compatibility:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
// Legacy Android scripts (aliases)
|
||||
"build:capacitor:android": "npm run build:android",
|
||||
"build:capacitor:android:dev": "npm run build:android:dev",
|
||||
"build:capacitor:android:test": "npm run build:android:test",
|
||||
"build:capacitor:android:prod": "npm run build:android:prod"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Build Artifacts
|
||||
|
||||
### Common Artifacts
|
||||
|
||||
All build systems generate consistent artifacts:
|
||||
|
||||
```bash
|
||||
dist/ # Web build output
|
||||
├── index.html # Main HTML file
|
||||
├── assets/ # Compiled assets
|
||||
├── manifest.webmanifest # PWA manifest
|
||||
└── sw.js # Service worker
|
||||
|
||||
android/app/build/ # Android build output
|
||||
├── outputs/apk/debug/ # Debug APKs
|
||||
├── outputs/apk/release/ # Release APKs
|
||||
└── outputs/bundle/release/ # AAB bundles
|
||||
|
||||
ios/App/build/ # iOS build output
|
||||
├── Debug-iphonesimulator/ # Debug builds
|
||||
└── Release-iphoneos/ # Release builds
|
||||
|
||||
electron/dist/ # Electron packages
|
||||
├── *.AppImage # Linux AppImages
|
||||
├── *.deb # Linux DEB packages
|
||||
├── *.dmg # macOS DMG packages
|
||||
└── *.exe # Windows installers
|
||||
```
|
||||
|
||||
### Asset Generation
|
||||
|
||||
All platforms generate platform-specific assets:
|
||||
|
||||
```bash
|
||||
# Icons and splash screens
|
||||
npx capacitor-assets generate --android
|
||||
npx capacitor-assets generate --ios
|
||||
|
||||
# PWA assets
|
||||
npx vite build --config vite.config.web.mts
|
||||
```
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### Daily Development
|
||||
|
||||
```bash
|
||||
# Web development
|
||||
npm run build:web:dev # Starts dev server
|
||||
|
||||
# Android development
|
||||
npm run build:android:dev # Builds debug APK
|
||||
npm run build:android:deploy # Deploy to device
|
||||
|
||||
# Electron development
|
||||
npm run build:electron:dev # Runs app directly
|
||||
```
|
||||
|
||||
### Testing Workflow
|
||||
|
||||
```bash
|
||||
# Test all platforms
|
||||
npm run build:web:test
|
||||
npm run build:android:test
|
||||
npm run build:ios:test
|
||||
npm run build:electron:test
|
||||
```
|
||||
|
||||
### Production Workflow
|
||||
|
||||
```bash
|
||||
# Build all platforms for production
|
||||
npm run build:web:prod
|
||||
npm run build:android:prod
|
||||
npm run build:ios:prod
|
||||
npm run build:electron:prod
|
||||
|
||||
# Create distribution packages
|
||||
npm run build:electron:appimage:prod
|
||||
npm run build:electron:dmg:prod
|
||||
npm run build:electron:deb:prod
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
#### Build Failures
|
||||
```bash
|
||||
# Clean all build artifacts
|
||||
npm run clean:all
|
||||
|
||||
# Rebuild from scratch
|
||||
npm run build:<platform>:dev
|
||||
```
|
||||
|
||||
#### Device Connection Issues
|
||||
```bash
|
||||
# Check Android device connection
|
||||
adb devices
|
||||
|
||||
# Check iOS device connection
|
||||
xcrun devicectl list devices
|
||||
```
|
||||
|
||||
#### Environment Issues
|
||||
```bash
|
||||
# Verify environment variables
|
||||
echo $VITE_PLATFORM
|
||||
echo "PWA: automatically enabled for web platforms"
|
||||
|
||||
# Check environment files
|
||||
ls -la .env*
|
||||
```
|
||||
|
||||
### Debug Mode
|
||||
|
||||
Enable verbose logging for all build scripts:
|
||||
|
||||
```bash
|
||||
# Verbose mode
|
||||
./scripts/build-<platform>.sh --verbose
|
||||
|
||||
# Debug environment
|
||||
DEBUG_MIGRATIONS=1 npm run build:<platform>:dev
|
||||
```
|
||||
|
||||
## Performance Metrics
|
||||
|
||||
### Build Times (Typical)
|
||||
|
||||
| Platform | Development | Production | Package |
|
||||
|----------|-------------|------------|---------|
|
||||
| **Web** | 350ms | 8s | 12s |
|
||||
| **Android** | 45s | 60s | 75s |
|
||||
| **iOS** | 60s | 90s | 120s |
|
||||
| **Electron** | 15s | 25s | 45s |
|
||||
|
||||
### Optimization Features
|
||||
|
||||
- **Incremental Builds**: Only rebuild changed files
|
||||
- **Parallel Processing**: Multi-core build optimization
|
||||
- **Caching**: Build artifact caching
|
||||
- **Asset Optimization**: Image and code minification
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Build Security
|
||||
|
||||
- **Environment Isolation**: Separate dev/test/prod environments
|
||||
- **Secret Management**: Secure handling of API keys
|
||||
- **Code Signing**: Digital signatures for packages
|
||||
- **Dependency Scanning**: Regular security audits
|
||||
|
||||
### Distribution Security
|
||||
|
||||
- **Package Verification**: Checksum validation
|
||||
- **Code Signing**: Digital certificates for packages
|
||||
- **Update Security**: Secure update mechanisms
|
||||
- **Sandboxing**: Platform-specific security isolation
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
### Planned Improvements
|
||||
|
||||
- **CI/CD Integration**: Automated build pipelines
|
||||
- **Cross-Platform Testing**: Unified test framework
|
||||
- **Performance Monitoring**: Build performance tracking
|
||||
- **Asset Optimization**: Advanced image and code optimization
|
||||
|
||||
### Platform Expansion
|
||||
|
||||
- **Windows Store**: Microsoft Store packages
|
||||
- **Mac App Store**: App Store distribution
|
||||
- **Google Play**: Play Store optimization
|
||||
- **App Store**: iOS App Store distribution
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2025-07-11
|
||||
**Version**: 1.0.3-beta
|
||||
**Status**: Production Ready
|
||||
722
docs/build-system/core/build-troubleshooting.md
Normal file
722
docs/build-system/core/build-troubleshooting.md
Normal file
@@ -0,0 +1,722 @@
|
||||
# Build Systems Troubleshooting Guide
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-11
|
||||
**Status**: ✅ **COMPLETE** - Comprehensive troubleshooting for all build systems
|
||||
|
||||
## Overview
|
||||
|
||||
This guide provides comprehensive troubleshooting for all TimeSafari build systems, including common issues, solutions, and debugging techniques for web, Android, iOS, and Electron builds.
|
||||
|
||||
## Quick Diagnostic Commands
|
||||
|
||||
### Environment Check
|
||||
```bash
|
||||
# Check Node.js and npm versions
|
||||
node --version
|
||||
npm --version
|
||||
|
||||
# Check platform-specific tools
|
||||
npx cap --version
|
||||
npx vite --version
|
||||
|
||||
# Check environment variables
|
||||
echo $VITE_PLATFORM
|
||||
echo "PWA: automatically enabled for web platforms"
|
||||
```
|
||||
|
||||
### Build System Status
|
||||
```bash
|
||||
# Check all build scripts exist
|
||||
ls -la scripts/build-*.sh
|
||||
|
||||
# Check package.json scripts
|
||||
npm run | grep build:
|
||||
|
||||
# Check build artifacts
|
||||
ls -la dist/
|
||||
ls -la android/app/build/
|
||||
ls -la electron/dist/
|
||||
```
|
||||
|
||||
## Web Build Issues
|
||||
|
||||
### Development Server Problems
|
||||
|
||||
#### Port Already in Use
|
||||
```bash
|
||||
# Check what's using port 8080
|
||||
lsof -i :8080
|
||||
|
||||
# Kill the process
|
||||
kill -9 <PID>
|
||||
|
||||
# Or use different port
|
||||
npm run build:web:dev -- --port 8081
|
||||
```
|
||||
|
||||
#### Hot Reload Not Working
|
||||
```bash
|
||||
# Clear browser cache
|
||||
# DevTools > Application > Storage > Clear site data
|
||||
|
||||
# Restart dev server
|
||||
npm run build:web:dev
|
||||
|
||||
# Check file watching
|
||||
# Ensure no file system watcher limits
|
||||
```
|
||||
|
||||
#### PWA Issues in Development
|
||||
```bash
|
||||
# Clear service worker
|
||||
# DevTools > Application > Service Workers > Unregister
|
||||
|
||||
# Clear browser cache
|
||||
# DevTools > Application > Storage > Clear site data
|
||||
|
||||
# Restart development server
|
||||
npm run build:web:dev
|
||||
```
|
||||
|
||||
### Production Build Issues
|
||||
|
||||
#### Build Fails with Errors
|
||||
```bash
|
||||
# Clean build artifacts
|
||||
rm -rf dist/
|
||||
|
||||
# Clear npm cache
|
||||
npm cache clean --force
|
||||
|
||||
# Reinstall dependencies
|
||||
rm -rf node_modules/
|
||||
npm install
|
||||
|
||||
# Rebuild
|
||||
npm run build:web:prod
|
||||
```
|
||||
|
||||
#### Large Bundle Size
|
||||
```bash
|
||||
# Analyze bundle
|
||||
npm run build:web:prod
|
||||
# Check dist/assets/ for large files
|
||||
|
||||
# Enable bundle analysis
|
||||
npm install --save-dev vite-bundle-analyzer
|
||||
# Add to vite.config.web.mts
|
||||
```
|
||||
|
||||
#### PWA Not Working in Production
|
||||
```bash
|
||||
# Check manifest generation
|
||||
ls -la dist/manifest.webmanifest
|
||||
|
||||
# Check service worker
|
||||
ls -la dist/sw.js
|
||||
|
||||
# Verify HTTPS (required for PWA)
|
||||
# Ensure site is served over HTTPS
|
||||
```
|
||||
|
||||
### Docker Build Issues
|
||||
|
||||
#### Docker Build Fails
|
||||
```bash
|
||||
# Check Docker is running
|
||||
docker --version
|
||||
docker ps
|
||||
|
||||
# Clean Docker cache
|
||||
docker system prune -a
|
||||
|
||||
# Rebuild without cache
|
||||
docker build --no-cache -t timesafari-web:production .
|
||||
```
|
||||
|
||||
#### Docker Image Too Large
|
||||
```bash
|
||||
# Use multi-stage builds
|
||||
# Optimize base images
|
||||
# Remove unnecessary files
|
||||
|
||||
# Analyze image layers
|
||||
docker history timesafari-web:production
|
||||
```
|
||||
|
||||
## Android Build Issues
|
||||
|
||||
### Build Process Failures
|
||||
|
||||
#### Gradle Build Fails
|
||||
```bash
|
||||
# Clean Gradle cache
|
||||
cd android && ./gradlew clean && cd ..
|
||||
|
||||
# Clear Android build cache
|
||||
rm -rf android/app/build/
|
||||
rm -rf android/.gradle/
|
||||
|
||||
# Rebuild
|
||||
npm run build:android:dev
|
||||
```
|
||||
|
||||
#### Capacitor Sync Issues
|
||||
```bash
|
||||
# Clean Capacitor
|
||||
npx cap clean android
|
||||
|
||||
# Reinstall Android platform
|
||||
npx cap remove android
|
||||
npx cap add android
|
||||
|
||||
# Sync manually
|
||||
npx cap sync android
|
||||
```
|
||||
|
||||
#### Resource Generation Fails
|
||||
```bash
|
||||
# Check source assets
|
||||
ls -la assets/icon.png
|
||||
ls -la assets/splash.png
|
||||
|
||||
# Regenerate assets
|
||||
npx capacitor-assets generate --android
|
||||
|
||||
# Check generated resources
|
||||
ls -la android/app/src/main/res/
|
||||
```
|
||||
|
||||
### Device Deployment Issues
|
||||
|
||||
#### No Device Connected
|
||||
```bash
|
||||
# Check device connection
|
||||
adb devices
|
||||
|
||||
# Enable USB debugging
|
||||
# Settings > Developer options > USB debugging
|
||||
|
||||
# Install ADB drivers (Windows)
|
||||
# Download from Google USB drivers
|
||||
```
|
||||
|
||||
#### Device Unauthorized
|
||||
```bash
|
||||
# Check device for authorization dialog
|
||||
# Tap "Allow USB debugging"
|
||||
|
||||
# Reset ADB
|
||||
adb kill-server
|
||||
adb start-server
|
||||
|
||||
# Check device again
|
||||
adb devices
|
||||
```
|
||||
|
||||
#### APK Installation Fails
|
||||
```bash
|
||||
# Uninstall existing app
|
||||
adb uninstall app.timesafari.app
|
||||
|
||||
# Install fresh APK
|
||||
adb install -r android/app/build/outputs/apk/debug/app-debug.apk
|
||||
|
||||
# Check installation
|
||||
adb shell pm list packages | grep timesafari
|
||||
```
|
||||
|
||||
### Performance Issues
|
||||
|
||||
#### Slow Build Times
|
||||
```bash
|
||||
# Enable Gradle daemon
|
||||
# Add to ~/.gradle/gradle.properties:
|
||||
org.gradle.daemon=true
|
||||
org.gradle.parallel=true
|
||||
org.gradle.configureondemand=true
|
||||
|
||||
# Use incremental builds
|
||||
# Only rebuild changed files
|
||||
```
|
||||
|
||||
#### Large APK Size
|
||||
```bash
|
||||
# Enable APK splitting
|
||||
# Add to android/app/build.gradle:
|
||||
android {
|
||||
splits {
|
||||
abi {
|
||||
enable true
|
||||
reset()
|
||||
include 'x86', 'x86_64', 'arm64-v8a', 'armeabi-v7a'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Electron Build Issues
|
||||
|
||||
### Development Issues
|
||||
|
||||
#### App Won't Start
|
||||
```bash
|
||||
# Check Electron installation
|
||||
npm list electron
|
||||
|
||||
# Clear Electron cache
|
||||
rm -rf ~/.config/TimeSafari/
|
||||
rm -rf ~/Library/Application\ Support/TimeSafari/
|
||||
rm -rf %APPDATA%\TimeSafari
|
||||
|
||||
# Reinstall Electron
|
||||
npm install electron
|
||||
```
|
||||
|
||||
#### Single Instance Lock Issues
|
||||
```bash
|
||||
# Check lock file
|
||||
ls -la ~/.timesafari-lock
|
||||
|
||||
# Remove lock file manually
|
||||
rm -f ~/.timesafari-lock
|
||||
|
||||
# Restart app
|
||||
npm run build:electron:dev
|
||||
```
|
||||
|
||||
#### Database Issues
|
||||
```bash
|
||||
# Clear database
|
||||
./scripts/clear-database.sh
|
||||
|
||||
# Check database files
|
||||
ls -la ~/.config/TimeSafari/
|
||||
ls -la ~/Library/Application\ Support/TimeSafari/
|
||||
|
||||
# Rebuild database
|
||||
npm run build:electron:dev
|
||||
```
|
||||
|
||||
### Package Build Issues
|
||||
|
||||
#### Package Creation Fails
|
||||
```bash
|
||||
# Check electron-builder
|
||||
npm list electron-builder
|
||||
|
||||
# Clean package cache
|
||||
rm -rf electron/dist/
|
||||
rm -rf electron/node_modules/
|
||||
|
||||
# Reinstall dependencies
|
||||
cd electron && npm install && cd ..
|
||||
|
||||
# Rebuild package
|
||||
npm run build:electron:appimage:prod
|
||||
```
|
||||
|
||||
#### Code Signing Issues
|
||||
```bash
|
||||
# Check certificates
|
||||
# macOS: Keychain Access
|
||||
# Windows: Certificate Manager
|
||||
# Linux: Check certificate files
|
||||
|
||||
# Skip code signing for testing
|
||||
# Add to electron-builder.config.json:
|
||||
"forceCodeSigning": false
|
||||
```
|
||||
|
||||
#### Platform-Specific Issues
|
||||
|
||||
##### Linux AppImage Issues
|
||||
```bash
|
||||
# Check AppImage creation
|
||||
file electron/dist/*.AppImage
|
||||
|
||||
# Make executable
|
||||
chmod +x electron/dist/*.AppImage
|
||||
|
||||
# Test AppImage
|
||||
./electron/dist/*.AppImage
|
||||
```
|
||||
|
||||
##### macOS DMG Issues
|
||||
```bash
|
||||
# Check DMG creation
|
||||
file electron/dist/*.dmg
|
||||
|
||||
# Mount DMG
|
||||
hdiutil attach electron/dist/*.dmg
|
||||
|
||||
# Check contents
|
||||
ls -la /Volumes/TimeSafari/
|
||||
```
|
||||
|
||||
##### Windows EXE Issues
|
||||
```bash
|
||||
# Check EXE creation
|
||||
file electron/dist/*.exe
|
||||
|
||||
# Test installer
|
||||
# Run the EXE file
|
||||
# Check installation directory
|
||||
```
|
||||
|
||||
## iOS Build Issues (Future)
|
||||
|
||||
### Xcode Issues
|
||||
```bash
|
||||
# Check Xcode installation
|
||||
xcode-select --print-path
|
||||
|
||||
# Install command line tools
|
||||
xcode-select --install
|
||||
|
||||
# Accept Xcode license
|
||||
sudo xcodebuild -license accept
|
||||
```
|
||||
|
||||
### Simulator Issues
|
||||
```bash
|
||||
# List available simulators
|
||||
xcrun simctl list devices
|
||||
|
||||
# Boot simulator
|
||||
xcrun simctl boot "iPhone 15 Pro"
|
||||
|
||||
# Reset simulator
|
||||
xcrun simctl erase all
|
||||
```
|
||||
|
||||
### Code Signing Issues
|
||||
```bash
|
||||
# Check certificates
|
||||
security find-identity -v -p codesigning
|
||||
|
||||
# Check provisioning profiles
|
||||
ls ~/Library/MobileDevice/Provisioning\ Profiles/
|
||||
|
||||
# Install certificate
|
||||
# Use Keychain Access or Xcode
|
||||
```
|
||||
|
||||
## Environment Issues
|
||||
|
||||
### Environment Variables
|
||||
|
||||
#### Missing Environment Variables
|
||||
```bash
|
||||
# Check environment files
|
||||
ls -la .env*
|
||||
|
||||
# Set required variables
|
||||
export VITE_PLATFORM=web
|
||||
|
||||
# Check in build script
|
||||
echo $VITE_PLATFORM
|
||||
echo "PWA: automatically enabled for web platforms"
|
||||
```
|
||||
|
||||
#### Wrong Environment Loaded
|
||||
```bash
|
||||
# Check current environment
|
||||
echo $NODE_ENV
|
||||
|
||||
# Force environment
|
||||
NODE_ENV=production npm run build:web:prod
|
||||
|
||||
# Check environment file loading
|
||||
# Verify .env.production exists
|
||||
```
|
||||
|
||||
### Dependency Issues
|
||||
|
||||
#### Missing Dependencies
|
||||
```bash
|
||||
# Check package.json
|
||||
cat package.json | grep -A 10 "dependencies"
|
||||
|
||||
# Install missing dependencies
|
||||
npm install
|
||||
|
||||
# Check for peer dependencies
|
||||
npm ls
|
||||
```
|
||||
|
||||
#### Version Conflicts
|
||||
```bash
|
||||
# Check for conflicts
|
||||
npm ls
|
||||
|
||||
# Update dependencies
|
||||
npm update
|
||||
|
||||
# Force resolution
|
||||
npm install --force
|
||||
```
|
||||
|
||||
#### Platform-Specific Dependencies
|
||||
```bash
|
||||
# Check Capacitor plugins
|
||||
npx cap ls
|
||||
|
||||
# Install missing plugins
|
||||
npm install @capacitor/core @capacitor/cli
|
||||
|
||||
# Sync plugins
|
||||
npx cap sync
|
||||
```
|
||||
|
||||
## Performance Issues
|
||||
|
||||
### Build Performance
|
||||
|
||||
#### Slow Build Times
|
||||
```bash
|
||||
# Enable parallel processing
|
||||
# Add to package.json scripts:
|
||||
"build:parallel": "npm run build:web:prod & npm run build:android:prod & wait"
|
||||
|
||||
# Use incremental builds
|
||||
# Only rebuild changed files
|
||||
|
||||
# Optimize file watching
|
||||
# Increase file watcher limits
|
||||
```
|
||||
|
||||
#### Memory Issues
|
||||
```bash
|
||||
# Increase Node.js memory
|
||||
NODE_OPTIONS="--max-old-space-size=4096" npm run build:web:prod
|
||||
|
||||
# Check memory usage
|
||||
top -p $(pgrep node)
|
||||
|
||||
# Optimize build process
|
||||
# Use streaming builds
|
||||
# Minimize memory usage
|
||||
```
|
||||
|
||||
### Runtime Performance
|
||||
|
||||
#### App Performance Issues
|
||||
```bash
|
||||
# Profile application
|
||||
# Use browser DevTools > Performance
|
||||
# Use React/Vue DevTools
|
||||
|
||||
# Check bundle size
|
||||
npm run build:web:prod
|
||||
# Analyze dist/assets/
|
||||
|
||||
# Optimize code splitting
|
||||
# Implement lazy loading
|
||||
```
|
||||
|
||||
## Debugging Techniques
|
||||
|
||||
### Verbose Logging
|
||||
|
||||
#### Enable Verbose Mode
|
||||
```bash
|
||||
# Web builds
|
||||
./scripts/build-web.sh --verbose
|
||||
|
||||
# Android builds
|
||||
./scripts/build-android.sh --verbose
|
||||
|
||||
# Electron builds
|
||||
./scripts/build-electron.sh --verbose
|
||||
```
|
||||
|
||||
#### Debug Environment
|
||||
```bash
|
||||
# Enable debug logging
|
||||
DEBUG_MIGRATIONS=1 npm run build:web:dev
|
||||
|
||||
# Check debug output
|
||||
# Look for detailed error messages
|
||||
# Check console output
|
||||
```
|
||||
|
||||
### Log Analysis
|
||||
|
||||
#### Build Logs
|
||||
```bash
|
||||
# Capture build logs
|
||||
npm run build:web:prod > build.log 2>&1
|
||||
|
||||
# Analyze logs
|
||||
grep -i error build.log
|
||||
grep -i warning build.log
|
||||
|
||||
# Check for specific issues
|
||||
grep -i "failed\|error\|exception" build.log
|
||||
```
|
||||
|
||||
#### Runtime Logs
|
||||
|
||||
##### Web Browser
|
||||
```bash
|
||||
# Open DevTools
|
||||
# Console tab for JavaScript errors
|
||||
# Network tab for API issues
|
||||
# Application tab for storage issues
|
||||
```
|
||||
|
||||
##### Android
|
||||
```bash
|
||||
# View Android logs
|
||||
adb logcat | grep -i timesafari
|
||||
|
||||
# Filter by app
|
||||
adb logcat | grep -i "app.timesafari.app"
|
||||
```
|
||||
|
||||
##### Electron
|
||||
```bash
|
||||
# View Electron logs
|
||||
# Check console output
|
||||
# Check DevTools console
|
||||
# Check main process logs
|
||||
```
|
||||
|
||||
## Common Error Messages
|
||||
|
||||
### Web Build Errors
|
||||
|
||||
#### "Module not found"
|
||||
```bash
|
||||
# Check import paths
|
||||
# Verify file exists
|
||||
# Check case sensitivity
|
||||
# Update import statements
|
||||
```
|
||||
|
||||
#### "Port already in use"
|
||||
```bash
|
||||
# Kill existing process
|
||||
lsof -i :8080
|
||||
kill -9 <PID>
|
||||
|
||||
# Use different port
|
||||
npm run build:web:dev -- --port 8081
|
||||
```
|
||||
|
||||
### Android Build Errors
|
||||
|
||||
#### "Gradle build failed"
|
||||
```bash
|
||||
# Clean Gradle cache
|
||||
cd android && ./gradlew clean && cd ..
|
||||
|
||||
# Check Gradle version
|
||||
./android/gradlew --version
|
||||
|
||||
# Update Gradle wrapper
|
||||
cd android && ./gradlew wrapper --gradle-version 8.13 && cd ..
|
||||
```
|
||||
|
||||
#### "Device not found"
|
||||
```bash
|
||||
# Check device connection
|
||||
adb devices
|
||||
|
||||
# Enable USB debugging
|
||||
# Settings > Developer options > USB debugging
|
||||
|
||||
# Install drivers (Windows)
|
||||
# Download Google USB drivers
|
||||
```
|
||||
|
||||
### Electron Build Errors
|
||||
|
||||
#### "App already running"
|
||||
```bash
|
||||
# Remove lock file
|
||||
rm -f ~/.timesafari-lock
|
||||
|
||||
# Kill existing processes
|
||||
pkill -f "TimeSafari"
|
||||
|
||||
# Restart app
|
||||
npm run build:electron:dev
|
||||
```
|
||||
|
||||
#### "Code signing failed"
|
||||
```bash
|
||||
# Check certificates
|
||||
# macOS: Keychain Access
|
||||
# Windows: Certificate Manager
|
||||
|
||||
# Skip code signing for testing
|
||||
# Add to electron-builder.config.json:
|
||||
"forceCodeSigning": false
|
||||
```
|
||||
|
||||
## Prevention Strategies
|
||||
|
||||
### Best Practices
|
||||
|
||||
#### Regular Maintenance
|
||||
```bash
|
||||
# Update dependencies regularly
|
||||
npm update
|
||||
|
||||
# Clean build artifacts
|
||||
npm run clean:all
|
||||
|
||||
# Check for security vulnerabilities
|
||||
npm audit
|
||||
|
||||
# Update build tools
|
||||
npm update -g @capacitor/cli
|
||||
npm update -g electron-builder
|
||||
```
|
||||
|
||||
#### Environment Management
|
||||
```bash
|
||||
# Use consistent environments
|
||||
# Separate dev/test/prod configurations
|
||||
# Version control environment files
|
||||
# Document environment requirements
|
||||
```
|
||||
|
||||
#### Testing
|
||||
```bash
|
||||
# Test builds regularly
|
||||
npm run build:web:prod
|
||||
npm run build:android:prod
|
||||
npm run build:electron:prod
|
||||
|
||||
# Test on different platforms
|
||||
# Verify all features work
|
||||
# Check performance metrics
|
||||
```
|
||||
|
||||
### Monitoring
|
||||
|
||||
#### Build Monitoring
|
||||
```bash
|
||||
# Track build times
|
||||
# Monitor build success rates
|
||||
# Check for performance regressions
|
||||
# Monitor bundle sizes
|
||||
```
|
||||
|
||||
#### Runtime Monitoring
|
||||
```bash
|
||||
# Monitor app performance
|
||||
# Track error rates
|
||||
# Monitor user experience
|
||||
# Check platform-specific issues
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2025-07-11
|
||||
**Version**: 1.0.3-beta
|
||||
**Status**: Production Ready
|
||||
363
docs/build-system/core/build-web-script-integration.md
Normal file
363
docs/build-system/core/build-web-script-integration.md
Normal file
@@ -0,0 +1,363 @@
|
||||
# Build Web Script Integration
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-11
|
||||
**Status**: ✅ **COMPLETE** - Successfully implemented and tested
|
||||
|
||||
## Overview
|
||||
|
||||
The `build-web.sh` script has been successfully integrated into the TimeSafari build system, providing a unified approach to web builds that eliminates the need for multiple commands with flags in npm scripts.
|
||||
|
||||
## Problem Solved
|
||||
|
||||
### Previous Issue: Multiple Commands with Flags
|
||||
|
||||
The original package.json scripts had complex command chains that made debugging and maintenance difficult:
|
||||
|
||||
```json
|
||||
// OLD PATTERN - Multiple commands with flags
|
||||
"build:web:test": "npm run build:web:build -- --mode test",
|
||||
"build:web:prod": "npm run build:web:build -- --mode production",
|
||||
"build:web:docker:test": "npm run build:web:docker -- --mode test",
|
||||
"build:web:docker:prod": "npm run build:web:docker -- --mode production"
|
||||
```
|
||||
|
||||
### New Solution: Single Script with Arguments
|
||||
|
||||
The new approach uses a single shell script that handles all build modes and options:
|
||||
|
||||
```json
|
||||
// NEW PATTERN - Single script calls
|
||||
"build:web": "./scripts/build-web.sh",
|
||||
"build:web:dev": "./scripts/build-web.sh --dev",
|
||||
"build:web:test": "./scripts/build-web.sh --test",
|
||||
"build:web:prod": "./scripts/build-web.sh --prod",
|
||||
"build:web:docker": "./scripts/build-web.sh --docker",
|
||||
"build:web:docker:test": "./scripts/build-web.sh --docker:test",
|
||||
"build:web:docker:prod": "./scripts/build-web.sh --docker:prod",
|
||||
"build:web:serve": "./scripts/build-web.sh --serve"
|
||||
```
|
||||
|
||||
## Script Architecture
|
||||
|
||||
### Design Principles
|
||||
|
||||
1. **Single Responsibility**: Each npm script calls exactly one command
|
||||
2. **Argument Parsing**: All complexity handled within the shell script
|
||||
3. **Consistent Interface**: Follows the same pattern as other build scripts
|
||||
4. **Environment Management**: Proper environment variable handling
|
||||
5. **Error Handling**: Comprehensive error checking and reporting
|
||||
6. **Development-First**: Development mode starts dev server instead of building
|
||||
|
||||
### Script Structure
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# build-web.sh
|
||||
# Author: Matthew Raymer
|
||||
# Description: Web build script for TimeSafari application
|
||||
|
||||
# Exit on any error
|
||||
set -e
|
||||
|
||||
# Source common utilities
|
||||
source "$(dirname "$0")/common.sh"
|
||||
|
||||
# Parse arguments and set build mode
|
||||
parse_web_args "$@"
|
||||
|
||||
# Validate environment
|
||||
validate_web_environment
|
||||
|
||||
# Setup environment
|
||||
setup_build_env "web"
|
||||
setup_web_environment
|
||||
|
||||
# Execute build steps
|
||||
clean_build_artifacts "dist"
|
||||
execute_vite_build "$BUILD_MODE"
|
||||
|
||||
# Optional steps
|
||||
if [ "$DOCKER_BUILD" = true ]; then
|
||||
execute_docker_build "$BUILD_MODE"
|
||||
fi
|
||||
|
||||
if [ "$SERVE_BUILD" = true ]; then
|
||||
serve_build
|
||||
fi
|
||||
```
|
||||
|
||||
## Build Modes Supported
|
||||
|
||||
### Development Mode (Default)
|
||||
```bash
|
||||
./scripts/build-web.sh
|
||||
./scripts/build-web.sh --dev
|
||||
```
|
||||
- Starts Vite development server with hot reload
|
||||
- No build step - runs development server directly
|
||||
- Fast startup with live reload capabilities
|
||||
- Available at http://localhost:8080
|
||||
- **Source maps enabled** for debugging
|
||||
- **PWA enabled** for development testing
|
||||
|
||||
### Test Mode
|
||||
```bash
|
||||
./scripts/build-web.sh --test
|
||||
```
|
||||
- Test environment configuration
|
||||
- Minimal minification
|
||||
- Source maps enabled
|
||||
- Uses `.env.test` file
|
||||
- **PWA enabled** for testing
|
||||
|
||||
### Production Mode
|
||||
```bash
|
||||
./scripts/build-web.sh --prod
|
||||
```
|
||||
- Full production optimizations
|
||||
- Maximum minification
|
||||
- Source maps disabled
|
||||
- Uses `.env.production` file
|
||||
- **PWA enabled** with full caching strategies
|
||||
|
||||
## Docker Integration
|
||||
|
||||
### Docker Build Options
|
||||
```bash
|
||||
# Development + Docker
|
||||
./scripts/build-web.sh --docker
|
||||
|
||||
# Test + Docker
|
||||
./scripts/build-web.sh --docker:test
|
||||
|
||||
# Production + Docker
|
||||
./scripts/build-web.sh --docker:prod
|
||||
```
|
||||
|
||||
### Docker Features
|
||||
- Automatic image tagging (`timesafari-web:mode`)
|
||||
- Build argument passing
|
||||
- Environment-specific configurations
|
||||
- Consistent image naming
|
||||
|
||||
## Local Development
|
||||
|
||||
### Development Server
|
||||
```bash
|
||||
./scripts/build-web.sh
|
||||
./scripts/build-web.sh --dev
|
||||
```
|
||||
- Starts Vite development server with hot reload
|
||||
- No build step required
|
||||
- Fast startup (~350ms)
|
||||
- Available at http://localhost:8080
|
||||
- Supports live reload and HMR
|
||||
- **Source maps enabled** for debugging
|
||||
|
||||
### Serve Build Locally
|
||||
```bash
|
||||
./scripts/build-web.sh --serve
|
||||
```
|
||||
- Builds the application first
|
||||
- Starts a local HTTP server to serve the built files
|
||||
- Supports Python HTTP server or npx serve
|
||||
- Runs on port 8080
|
||||
|
||||
## PWA Configuration
|
||||
|
||||
### PWA Best Practices Implementation
|
||||
|
||||
The TimeSafari web build follows PWA best practices by enabling PWA functionality across all environments:
|
||||
|
||||
#### ✅ **Development Mode**
|
||||
- PWA enabled for development testing
|
||||
- Service worker registration active
|
||||
- Manifest generation enabled
|
||||
- Hot reload compatible
|
||||
|
||||
#### ✅ **Test Mode**
|
||||
- PWA enabled for QA testing
|
||||
- Service worker registration active
|
||||
- Manifest generation enabled
|
||||
- Full PWA feature testing
|
||||
|
||||
#### ✅ **Production Mode**
|
||||
- PWA enabled with full caching strategies
|
||||
- Service worker registration active
|
||||
- Manifest generation enabled
|
||||
- Runtime caching for API calls
|
||||
- Optimized for production performance
|
||||
|
||||
### PWA Features Generated
|
||||
- `manifest.webmanifest` - PWA manifest with app metadata
|
||||
- `sw.js` - Service worker for offline functionality
|
||||
- `workbox-*.js` - Workbox library for caching strategies
|
||||
- Share target support for image sharing
|
||||
- Offline-first architecture
|
||||
|
||||
### Visual Confirmations of PWA Installation
|
||||
|
||||
#### ✅ **Automatic Browser Prompts**
|
||||
- **Chrome**: Install banner in address bar with install button
|
||||
- **Safari**: "Add to Home Screen" prompt
|
||||
- **Edge**: Install button in toolbar
|
||||
- **Firefox**: Install button in address bar
|
||||
|
||||
#### ✅ **Custom Install Prompt**
|
||||
- **PWAInstallPrompt Component**: Shows when PWA can be installed
|
||||
- **Install Button**: Prominent blue "Install" button
|
||||
- **Dismiss Options**: "Later" button and close button
|
||||
- **Success Notification**: Confirms successful installation
|
||||
|
||||
#### ✅ **Post-Installation Indicators**
|
||||
- **App Icon**: Appears on device home screen/start menu
|
||||
- **Standalone Window**: Opens without browser UI
|
||||
- **Native Experience**: Full-screen app-like behavior
|
||||
- **Offline Capability**: Works without internet connection
|
||||
|
||||
#### ✅ **Installation Status Detection**
|
||||
- **Display Mode Detection**: Checks for standalone/fullscreen modes
|
||||
- **Service Worker Status**: Monitors service worker registration
|
||||
- **Install Event Handling**: Listens for successful installation
|
||||
- **Environment Awareness**: Only shows when PWA is enabled
|
||||
|
||||
### Environment Variables Set
|
||||
- `VITE_PLATFORM=web`
|
||||
- `VITE_PWA_ENABLED=true`
|
||||
- `VITE_DISABLE_PWA=false`
|
||||
- `NODE_ENV` (based on build mode)
|
||||
- `VITE_GIT_HASH` (from git)
|
||||
|
||||
## Environment Management
|
||||
|
||||
### Environment File Loading
|
||||
The script automatically loads environment files based on build mode:
|
||||
|
||||
1. `.env.{mode}` (e.g., `.env.test`, `.env.production`)
|
||||
2. `.env` (fallback)
|
||||
|
||||
## Integration with Existing System
|
||||
|
||||
### Common Utilities
|
||||
The script leverages the existing `common.sh` utilities:
|
||||
- `log_info`, `log_success`, `log_error` - Consistent logging
|
||||
- `measure_time` - Performance tracking
|
||||
- `safe_execute` - Error handling
|
||||
- `setup_build_env` - Environment setup
|
||||
- `clean_build_artifacts` - Cleanup operations
|
||||
|
||||
### Consistent Patterns
|
||||
Follows the same patterns as other build scripts:
|
||||
- `build-electron.sh` - Electron builds
|
||||
- `build-android.sh` - Android builds
|
||||
- `build-ios.sh` - iOS builds
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Builds
|
||||
```bash
|
||||
# Development server (starts dev server)
|
||||
npm run build:web
|
||||
|
||||
# Test environment build
|
||||
npm run build:web:test
|
||||
|
||||
# Production build
|
||||
npm run build:web:prod
|
||||
```
|
||||
|
||||
### Docker Builds
|
||||
```bash
|
||||
# Development + Docker
|
||||
npm run build:web:docker
|
||||
|
||||
# Test + Docker
|
||||
npm run build:web:docker:test
|
||||
|
||||
# Production + Docker
|
||||
npm run build:web:docker:prod
|
||||
```
|
||||
|
||||
### Direct Script Usage
|
||||
```bash
|
||||
# Show help
|
||||
./scripts/build-web.sh --help
|
||||
|
||||
# Show environment variables
|
||||
./scripts/build-web.sh --env
|
||||
|
||||
# Verbose logging
|
||||
./scripts/build-web.sh --test --verbose
|
||||
```
|
||||
|
||||
## Benefits Achieved
|
||||
|
||||
### 1. Simplified NPM Scripts
|
||||
- No more complex command chains
|
||||
- Single command per script
|
||||
- Easy to understand and maintain
|
||||
|
||||
### 2. Better Error Handling
|
||||
- Comprehensive error checking
|
||||
- Clear error messages
|
||||
- Proper exit codes
|
||||
|
||||
### 3. Consistent Logging
|
||||
- Structured log output
|
||||
- Performance timing
|
||||
- Build step tracking
|
||||
|
||||
### 4. Environment Management
|
||||
- Automatic environment file loading
|
||||
- Platform-specific configurations
|
||||
- Git hash integration
|
||||
|
||||
### 5. Docker Integration
|
||||
- Seamless Docker builds
|
||||
- Environment-aware containerization
|
||||
- Consistent image tagging
|
||||
|
||||
## Testing Results
|
||||
|
||||
### Build Performance
|
||||
- **Development Mode**: ~350ms startup time (dev server)
|
||||
- **Test Mode**: ~11 seconds build time
|
||||
- **Production Mode**: ~12 seconds build time
|
||||
|
||||
### Environment Loading
|
||||
- Successfully loads `.env.test` for test builds
|
||||
- Properly sets `NODE_ENV` based on build mode
|
||||
- Correctly applies Vite mode configurations
|
||||
|
||||
### Docker Integration
|
||||
- Docker builds complete successfully
|
||||
- Images tagged correctly (`timesafari-web:test`, etc.)
|
||||
- Build arguments passed properly
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
### Potential Improvements
|
||||
1. **Parallel Builds**: Support for parallel asset processing
|
||||
2. **Build Caching**: Implement build caching for faster rebuilds
|
||||
3. **Custom Ports**: Allow custom port specification for serve mode
|
||||
4. **Build Profiles**: Support for custom build profiles
|
||||
5. **Watch Mode**: Add development watch mode support
|
||||
|
||||
### Integration Opportunities
|
||||
1. **CI/CD Integration**: Easy integration with GitHub Actions
|
||||
2. **Multi-Platform Builds**: Extend to support other platforms
|
||||
3. **Build Analytics**: Add build performance analytics
|
||||
4. **Dependency Checking**: Automatic dependency validation
|
||||
|
||||
## Conclusion
|
||||
|
||||
The `build-web.sh` script successfully addresses the requirement to prevent scripts from having multiple commands with flags while providing a robust, maintainable, and feature-rich build system for the TimeSafari web application.
|
||||
|
||||
The implementation follows established patterns in the codebase, leverages existing utilities, and provides a consistent developer experience across all build modes and platforms.
|
||||
|
||||
---
|
||||
|
||||
**Status**: ✅ **COMPLETE** - Ready for production use
|
||||
**Test Coverage**: 100% - All build modes tested and working
|
||||
**Documentation**: Complete with usage examples and integration guide
|
||||
594
docs/build-system/core/electron-build-patterns.md
Normal file
594
docs/build-system/core/electron-build-patterns.md
Normal file
@@ -0,0 +1,594 @@
|
||||
# Electron Build Patterns
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-01-27
|
||||
**Status**: 🎯 **ACTIVE** - Current Implementation
|
||||
|
||||
## Overview
|
||||
|
||||
TimeSafari's Electron build system provides comprehensive packaging and
|
||||
distribution capabilities across Windows, macOS, and Linux platforms. The
|
||||
system supports multiple build modes, environment configurations, and
|
||||
package formats for different deployment scenarios.
|
||||
|
||||
## Build Architecture
|
||||
|
||||
### Multi-Stage Build Process
|
||||
|
||||
```
|
||||
1. Web Build (Vite) → 2. Capacitor Sync → 3. TypeScript Compile → 4. Package
|
||||
```
|
||||
|
||||
**Stage 1: Web Build**
|
||||
- Vite builds web assets with Electron-specific configuration
|
||||
- Environment variables loaded based on build mode
|
||||
- Assets optimized for desktop application
|
||||
|
||||
**Stage 2: Capacitor Sync**
|
||||
- Copies web assets to Electron app directory
|
||||
- Syncs Capacitor configuration and plugins
|
||||
- Prepares native module bindings
|
||||
|
||||
**Stage 3: TypeScript Compile**
|
||||
- Compiles Electron main process TypeScript
|
||||
- Rebuilds native modules for target platform
|
||||
- Generates production-ready JavaScript
|
||||
|
||||
**Stage 4: Package Creation**
|
||||
- Creates platform-specific installers
|
||||
- Generates distribution packages
|
||||
- Signs applications (when configured)
|
||||
|
||||
## Build Modes
|
||||
|
||||
### Development Mode (--mode development)
|
||||
|
||||
**Purpose**: Local development and testing
|
||||
**Configuration**: Development environment variables
|
||||
**Output**: Unpacked application for testing
|
||||
|
||||
```bash
|
||||
# Development build (runs app)
|
||||
npm run build:electron:dev
|
||||
|
||||
# Development build with explicit mode
|
||||
npm run build:electron -- --mode development
|
||||
```
|
||||
|
||||
**Features**:
|
||||
- Hot reload enabled
|
||||
- Debug tools available
|
||||
- Development logging
|
||||
- Unoptimized assets
|
||||
|
||||
### Testing Mode (--mode test)
|
||||
|
||||
**Purpose**: Staging and testing environments
|
||||
**Configuration**: Test environment variables
|
||||
**Output**: Packaged application for testing
|
||||
|
||||
```bash
|
||||
# Test build
|
||||
npm run build:electron -- --mode test
|
||||
|
||||
# Test build with specific platform
|
||||
npm run build:electron:windows -- --mode test
|
||||
npm run build:electron:mac -- --mode test
|
||||
npm run build:electron:linux -- --mode test
|
||||
```
|
||||
|
||||
**Features**:
|
||||
- Test API endpoints
|
||||
- Staging configurations
|
||||
- Optimized for testing
|
||||
- Debug information available
|
||||
|
||||
### Production Mode (--mode production)
|
||||
|
||||
**Purpose**: Production deployment
|
||||
**Configuration**: Production environment variables
|
||||
**Output**: Optimized distribution packages
|
||||
|
||||
```bash
|
||||
# Production build
|
||||
npm run build:electron -- --mode production
|
||||
|
||||
# Production build with specific platform
|
||||
npm run build:electron:windows -- --mode production
|
||||
npm run build:electron:mac -- --mode production
|
||||
npm run build:electron:linux -- --mode production
|
||||
```
|
||||
|
||||
**Features**:
|
||||
- Production optimizations
|
||||
- Code minification
|
||||
- Security hardening
|
||||
- Performance optimizations
|
||||
|
||||
## Platform-Specific Builds
|
||||
|
||||
### Windows Builds
|
||||
|
||||
**Target Platforms**: Windows 10/11 (x64)
|
||||
**Package Formats**: NSIS installer, portable executable
|
||||
|
||||
```bash
|
||||
# Windows development build
|
||||
npm run build:electron:windows -- --mode development
|
||||
|
||||
# Windows test build
|
||||
npm run build:electron:windows -- --mode test
|
||||
|
||||
# Windows production build
|
||||
npm run build:electron:windows -- --mode production
|
||||
```
|
||||
|
||||
**Configuration**:
|
||||
- NSIS installer with custom options
|
||||
- Desktop and Start Menu shortcuts
|
||||
- Elevation permissions for installation
|
||||
- Custom installation directory support
|
||||
|
||||
### macOS Builds
|
||||
|
||||
**Target Platforms**: macOS 10.15+ (x64, arm64)
|
||||
**Package Formats**: DMG installer, app bundle
|
||||
|
||||
```bash
|
||||
# macOS development build
|
||||
npm run build:electron:mac -- --mode development
|
||||
|
||||
# macOS test build
|
||||
npm run build:electron:mac -- --mode test
|
||||
|
||||
# macOS production build
|
||||
npm run build:electron:mac -- --mode production
|
||||
```
|
||||
|
||||
**Configuration**:
|
||||
- Universal binary (x64 + arm64)
|
||||
- DMG installer with custom branding
|
||||
- App Store compliance (when configured)
|
||||
- Code signing support
|
||||
|
||||
### Linux Builds
|
||||
|
||||
**Target Platforms**: Ubuntu 18.04+, Debian 10+, Arch Linux
|
||||
**Package Formats**: AppImage, DEB, RPM
|
||||
|
||||
```bash
|
||||
# Linux development build
|
||||
npm run build:electron:linux -- --mode development
|
||||
|
||||
# Linux test build
|
||||
npm run build:electron:linux -- --mode test
|
||||
|
||||
# Linux production build
|
||||
npm run build:electron:linux -- --mode production
|
||||
```
|
||||
|
||||
**Configuration**:
|
||||
- AppImage for universal distribution
|
||||
- DEB package for Debian-based systems
|
||||
- RPM package for Red Hat-based systems
|
||||
- Desktop integration
|
||||
|
||||
## Package-Specific Builds
|
||||
|
||||
### AppImage Package
|
||||
|
||||
**Format**: Self-contained Linux executable
|
||||
**Distribution**: Universal Linux distribution
|
||||
|
||||
```bash
|
||||
# AppImage development build
|
||||
npm run build:electron:appimage -- --mode development
|
||||
|
||||
# AppImage test build
|
||||
npm run build:electron:appimage -- --mode test
|
||||
|
||||
# AppImage production build
|
||||
npm run build:electron:appimage -- --mode production
|
||||
```
|
||||
|
||||
**Features**:
|
||||
- Single file distribution
|
||||
- No installation required
|
||||
- Portable across Linux distributions
|
||||
- Automatic updates support
|
||||
|
||||
### DEB Package
|
||||
|
||||
**Format**: Debian package installer
|
||||
**Distribution**: Debian-based Linux systems
|
||||
|
||||
```bash
|
||||
# DEB development build
|
||||
npm run build:electron:deb -- --mode development
|
||||
|
||||
# DEB test build
|
||||
npm run build:electron:deb -- --mode test
|
||||
|
||||
# DEB production build
|
||||
npm run build:electron:deb -- --mode production
|
||||
```
|
||||
|
||||
**Features**:
|
||||
- Native package management
|
||||
- Dependency resolution
|
||||
- System integration
|
||||
- Easy installation/uninstallation
|
||||
|
||||
### DMG Package
|
||||
|
||||
**Format**: macOS disk image
|
||||
**Distribution**: macOS systems
|
||||
|
||||
```bash
|
||||
# DMG development build
|
||||
npm run build:electron:dmg -- --mode development
|
||||
|
||||
# DMG test build
|
||||
npm run build:electron:dmg -- --mode test
|
||||
|
||||
# DMG production build
|
||||
npm run build:electron:dmg -- --mode production
|
||||
```
|
||||
|
||||
**Features**:
|
||||
- Native macOS installer
|
||||
- Custom branding and layout
|
||||
- Drag-and-drop installation
|
||||
- Code signing support
|
||||
|
||||
## Environment Configuration
|
||||
|
||||
### Environment Variables
|
||||
|
||||
**Development Environment**:
|
||||
```bash
|
||||
VITE_API_URL=http://localhost:3000
|
||||
VITE_DEBUG=true
|
||||
VITE_LOG_LEVEL=debug
|
||||
VITE_ENABLE_DEV_TOOLS=true
|
||||
```
|
||||
|
||||
**Testing Environment**:
|
||||
```bash
|
||||
VITE_API_URL=https://test-api.timesafari.com
|
||||
VITE_DEBUG=false
|
||||
VITE_LOG_LEVEL=info
|
||||
VITE_ENABLE_DEV_TOOLS=false
|
||||
```
|
||||
|
||||
**Production Environment**:
|
||||
```bash
|
||||
VITE_API_URL=https://api.timesafari.com
|
||||
VITE_DEBUG=false
|
||||
VITE_LOG_LEVEL=warn
|
||||
VITE_ENABLE_DEV_TOOLS=false
|
||||
```
|
||||
|
||||
### Build Configuration
|
||||
|
||||
**Vite Configuration** (`vite.config.electron.mts`):
|
||||
```typescript
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd(), '');
|
||||
|
||||
return {
|
||||
mode,
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
emptyOutDir: true,
|
||||
sourcemap: mode === 'development',
|
||||
minify: mode === 'production'
|
||||
},
|
||||
define: {
|
||||
__DEV__: mode === 'development',
|
||||
__TEST__: mode === 'test',
|
||||
__PROD__: mode === 'production'
|
||||
}
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
**Electron Builder Configuration** (`electron-builder.config.json`):
|
||||
```json
|
||||
{
|
||||
"appId": "app.timesafari.desktop",
|
||||
"productName": "TimeSafari",
|
||||
"directories": {
|
||||
"buildResources": "resources",
|
||||
"output": "dist"
|
||||
},
|
||||
"files": [
|
||||
"assets/**/*",
|
||||
"build/**/*",
|
||||
"capacitor.config.*",
|
||||
"app/**/*"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Build Scripts Reference
|
||||
|
||||
### Main Build Scripts
|
||||
|
||||
```bash
|
||||
# Development builds
|
||||
npm run build:electron:dev # Development build and run
|
||||
npm run build:electron --dev # Development build only
|
||||
|
||||
# Testing builds
|
||||
npm run build:electron:test # Test environment build
|
||||
|
||||
# Production builds
|
||||
npm run build:electron:prod # Production environment build
|
||||
```
|
||||
|
||||
### Platform-Specific Scripts
|
||||
|
||||
```bash
|
||||
# Windows builds
|
||||
npm run build:electron:windows # Windows production build
|
||||
npm run build:electron:windows:dev # Windows development build
|
||||
npm run build:electron:windows:test # Windows test build
|
||||
npm run build:electron:windows:prod # Windows production build
|
||||
|
||||
# macOS builds
|
||||
npm run build:electron:mac # macOS production build
|
||||
npm run build:electron:mac:dev # macOS development build
|
||||
npm run build:electron:mac:test # macOS test build
|
||||
npm run build:electron:mac:prod # macOS production build
|
||||
|
||||
# Linux builds
|
||||
npm run build:electron:linux # Linux production build
|
||||
npm run build:electron:linux:dev # Linux development build
|
||||
npm run build:electron:linux:test # Linux test build
|
||||
npm run build:electron:linux:prod # Linux production build
|
||||
```
|
||||
|
||||
### Package-Specific Scripts
|
||||
|
||||
```bash
|
||||
# AppImage builds
|
||||
npm run build:electron:appimage # Linux AppImage production build
|
||||
npm run build:electron:appimage:dev # AppImage development build
|
||||
npm run build:electron:appimage:test # AppImage test build
|
||||
npm run build:electron:appimage:prod # AppImage production build
|
||||
|
||||
# DEB builds
|
||||
npm run build:electron:deb # Debian package production build
|
||||
npm run build:electron:deb:dev # DEB development build
|
||||
npm run build:electron:deb:test # DEB test build
|
||||
npm run build:electron:deb:prod # DEB production build
|
||||
|
||||
# DMG builds
|
||||
npm run build:electron:dmg # macOS DMG production build
|
||||
npm run build:electron:dmg:dev # DMG development build
|
||||
npm run build:electron:dmg:test # DMG test build
|
||||
npm run build:electron:dmg:prod # DMG production build
|
||||
```
|
||||
|
||||
### Direct Script Usage
|
||||
|
||||
All npm scripts use the underlying `./scripts/build-electron.sh` script:
|
||||
|
||||
```bash
|
||||
# Direct script usage examples
|
||||
./scripts/build-electron.sh --dev # Development build
|
||||
./scripts/build-electron.sh --test # Test build
|
||||
./scripts/build-electron.sh --prod # Production build
|
||||
./scripts/build-electron.sh --prod --windows # Windows production
|
||||
./scripts/build-electron.sh --test --appimage # Linux AppImage test
|
||||
./scripts/build-electron.sh --dev --mac # macOS development
|
||||
./scripts/build-electron.sh --prod --dmg # macOS DMG production
|
||||
```
|
||||
|
||||
### Utility Scripts
|
||||
|
||||
```bash
|
||||
# Cleanup scripts
|
||||
npm run clean:electron # Clean Electron build artifacts
|
||||
|
||||
# Development scripts
|
||||
npm run electron:dev # Start development server
|
||||
npm run electron:dev-full # Full development workflow
|
||||
```
|
||||
|
||||
## Build Output Structure
|
||||
|
||||
### Development Build
|
||||
|
||||
```
|
||||
electron/
|
||||
├── app/ # Web assets
|
||||
├── build/ # Compiled TypeScript
|
||||
├── dist/ # Build artifacts (empty in dev)
|
||||
└── node_modules/ # Dependencies
|
||||
```
|
||||
|
||||
### Production Build
|
||||
|
||||
```
|
||||
electron/
|
||||
├── app/ # Web assets
|
||||
├── build/ # Compiled TypeScript
|
||||
├── dist/ # Distribution packages
|
||||
│ ├── TimeSafari.exe # Windows executable
|
||||
│ ├── TimeSafari.dmg # macOS installer
|
||||
│ ├── TimeSafari.AppImage # Linux AppImage
|
||||
│ └── TimeSafari.deb # Debian package
|
||||
└── node_modules/ # Dependencies
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Build Issues
|
||||
|
||||
**TypeScript Compilation Errors**:
|
||||
```bash
|
||||
# Clean and rebuild
|
||||
npm run clean:electron
|
||||
cd electron && npm run build
|
||||
```
|
||||
|
||||
**Native Module Issues**:
|
||||
```bash
|
||||
# Rebuild native modules
|
||||
cd electron && npm run build
|
||||
```
|
||||
|
||||
**Asset Copy Issues**:
|
||||
```bash
|
||||
# Verify Capacitor sync
|
||||
npx cap sync electron
|
||||
```
|
||||
|
||||
**Package Creation Failures**:
|
||||
```bash
|
||||
# Check electron-builder configuration
|
||||
# Verify platform-specific requirements
|
||||
# Check signing certificates (macOS/Windows)
|
||||
```
|
||||
|
||||
### Platform-Specific Issues
|
||||
|
||||
**Windows**:
|
||||
- Ensure Windows Build Tools installed
|
||||
- Check NSIS installation
|
||||
- Verify code signing certificates
|
||||
|
||||
**macOS**:
|
||||
- Install Xcode Command Line Tools
|
||||
- Configure code signing certificates
|
||||
- Check app notarization requirements
|
||||
|
||||
**Linux**:
|
||||
- Install required packages (rpm-tools, etc.)
|
||||
- Check AppImage dependencies
|
||||
- Verify desktop integration
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### Build Performance
|
||||
|
||||
**Parallel Builds**:
|
||||
- Use concurrent TypeScript compilation
|
||||
- Optimize asset copying
|
||||
- Minimize file system operations
|
||||
|
||||
**Caching Strategies**:
|
||||
- Cache node_modules between builds
|
||||
- Cache compiled TypeScript
|
||||
- Cache web assets when unchanged
|
||||
|
||||
### Runtime Performance
|
||||
|
||||
**Application Startup**:
|
||||
- Optimize main process initialization
|
||||
- Minimize startup dependencies
|
||||
- Use lazy loading for features
|
||||
|
||||
**Memory Management**:
|
||||
- Monitor memory usage
|
||||
- Implement proper cleanup
|
||||
- Optimize asset loading
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Code Signing
|
||||
|
||||
**Windows**:
|
||||
- Authenticode code signing
|
||||
- EV certificate for SmartScreen
|
||||
- Timestamp server configuration
|
||||
|
||||
**macOS**:
|
||||
- Developer ID code signing
|
||||
- App notarization
|
||||
- Hardened runtime
|
||||
|
||||
**Linux**:
|
||||
- GPG signing for packages
|
||||
- AppImage signing
|
||||
- Package verification
|
||||
|
||||
### Security Hardening
|
||||
|
||||
**Production Builds**:
|
||||
- Disable developer tools
|
||||
- Remove debug information
|
||||
- Enable security policies
|
||||
- Implement sandboxing
|
||||
|
||||
**Update Security**:
|
||||
- Secure update channels
|
||||
- Package integrity verification
|
||||
- Rollback capabilities
|
||||
|
||||
## CI/CD Integration
|
||||
|
||||
### GitHub Actions
|
||||
|
||||
```yaml
|
||||
# Example workflow for Electron builds
|
||||
- name: Build Electron
|
||||
run: |
|
||||
npm run build:electron -- --mode production
|
||||
npm run build:electron:windows -- --mode production
|
||||
npm run build:electron:mac -- --mode production
|
||||
npm run build:electron:linux -- --mode production
|
||||
```
|
||||
|
||||
### Automated Testing
|
||||
|
||||
```yaml
|
||||
# Test Electron builds
|
||||
- name: Test Electron
|
||||
run: |
|
||||
npm run build:electron -- --mode test
|
||||
# Run automated tests
|
||||
```
|
||||
|
||||
### Release Management
|
||||
|
||||
```yaml
|
||||
# Create releases with assets
|
||||
- name: Create Release
|
||||
run: |
|
||||
# Upload built packages
|
||||
# Create GitHub release
|
||||
# Publish to distribution channels
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Development Workflow
|
||||
|
||||
1. **Use development mode for local testing**
|
||||
2. **Test builds in all environments**
|
||||
3. **Validate packages before distribution**
|
||||
4. **Maintain consistent versioning**
|
||||
|
||||
### Build Optimization
|
||||
|
||||
1. **Minimize build dependencies**
|
||||
2. **Use efficient asset processing**
|
||||
3. **Implement proper caching**
|
||||
4. **Optimize for target platforms**
|
||||
|
||||
### Quality Assurance
|
||||
|
||||
1. **Test on all target platforms**
|
||||
2. **Validate installation processes**
|
||||
3. **Check update mechanisms**
|
||||
4. **Verify security configurations**
|
||||
|
||||
---
|
||||
|
||||
**Status**: Active implementation
|
||||
**Last Updated**: 2025-01-27
|
||||
**Version**: 1.0
|
||||
**Maintainer**: Matthew Raymer
|
||||
422
docs/build-system/platforms/android-build-scripts.md
Normal file
422
docs/build-system/platforms/android-build-scripts.md
Normal file
@@ -0,0 +1,422 @@
|
||||
# Android Build Scripts Documentation
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-11
|
||||
**Status**: ✅ **COMPLETE** - Full Android build system integration
|
||||
|
||||
## Overview
|
||||
|
||||
The Android build system for TimeSafari has been integrated with the Vite
|
||||
mode-based pattern, providing consistent environment management and flexible
|
||||
build options across development, testing, and production environments.
|
||||
|
||||
**Note:** All Android builds should be invoked via `npm run build:android*` scripts for consistency. The legacy `build:capacitor:android*` scripts are now aliases for the corresponding `build:android*` scripts.
|
||||
|
||||
## Build Script Integration
|
||||
|
||||
### Package.json Scripts
|
||||
|
||||
The Android build system is fully integrated into `package.json` with the
|
||||
following scripts:
|
||||
|
||||
#### Basic Build Commands
|
||||
|
||||
```bash
|
||||
# Development builds (defaults to --mode development)
|
||||
npm run build:android:dev # Development build
|
||||
npm run build:android:test # Testing build
|
||||
npm run build:android:prod # Production build
|
||||
```
|
||||
|
||||
#### Build Type Commands
|
||||
|
||||
```bash
|
||||
# Debug builds
|
||||
npm run build:android:debug # Debug APK build
|
||||
|
||||
# Release builds
|
||||
npm run build:android:release # Release APK build
|
||||
```
|
||||
|
||||
#### Specialized Commands
|
||||
|
||||
```bash
|
||||
# Android Studio integration
|
||||
npm run build:android:studio # Build + open Android Studio
|
||||
|
||||
# Package builds
|
||||
npm run build:android:apk # Build APK file
|
||||
npm run build:android:aab # Build AAB (Android App Bundle)
|
||||
|
||||
# Utility commands
|
||||
npm run build:android:clean # Clean build artifacts only
|
||||
npm run build:android:sync # Sync Capacitor only
|
||||
npm run build:android:assets # Generate assets only
|
||||
```
|
||||
|
||||
#### Legacy Command
|
||||
|
||||
```bash
|
||||
# Original script (maintains backward compatibility)
|
||||
npm run build:android # Full build process
|
||||
```
|
||||
|
||||
## Script Usage
|
||||
|
||||
### Direct Script Usage
|
||||
|
||||
The `build-android.sh` script supports comprehensive command-line options:
|
||||
|
||||
```bash
|
||||
# Basic usage
|
||||
./scripts/build-android.sh [options]
|
||||
|
||||
# Environment-specific builds
|
||||
./scripts/build-android.sh --dev --studio # Development + open studio
|
||||
./scripts/build-android.sh --test --apk # Testing APK build
|
||||
./scripts/build-android.sh --prod --aab # Production AAB build
|
||||
|
||||
# Utility operations
|
||||
./scripts/build-android.sh --clean # Clean only
|
||||
./scripts/build-android.sh --sync # Sync only
|
||||
./scripts/build-android.sh --assets # Assets only
|
||||
```
|
||||
|
||||
### Command-Line Options
|
||||
|
||||
| Option | Description | Default |
|
||||
|--------|-------------|---------|
|
||||
| `--dev`, `--development` | Build for development environment | ✅ |
|
||||
| `--test` | Build for testing environment | |
|
||||
| `--prod`, `--production` | Build for production environment | |
|
||||
| `--debug` | Build debug APK | ✅ |
|
||||
| `--release` | Build release APK | |
|
||||
| `--studio` | Open Android Studio after build | |
|
||||
| `--apk` | Build APK file | |
|
||||
| `--aab` | Build AAB (Android App Bundle) | |
|
||||
| `--clean` | Clean build artifacts only | |
|
||||
| `--sync` | Sync Capacitor only | |
|
||||
| `--assets` | Generate assets only | |
|
||||
| `-h`, `--help` | Show help message | |
|
||||
| `-v`, `--verbose` | Enable verbose logging | |
|
||||
|
||||
## Build Process
|
||||
|
||||
### Complete Build Flow
|
||||
|
||||
1. **Resource Check**: Validate Android resources
|
||||
2. **Cleanup**: Clean Android app and build artifacts
|
||||
3. **Capacitor Build**: Build web assets with environment-specific mode
|
||||
4. **Gradle Clean**: Clean Gradle build cache
|
||||
5. **Gradle Build**: Assemble debug/release APK
|
||||
6. **Capacitor Sync**: Sync web assets to Android platform
|
||||
7. **Asset Generation**: Generate Android-specific assets
|
||||
8. **Package Build**: Build APK/AAB if requested
|
||||
9. **Studio Launch**: Open Android Studio if requested
|
||||
|
||||
### Environment-Specific Builds
|
||||
|
||||
#### Development Environment (`--dev`)
|
||||
|
||||
```bash
|
||||
# Uses --mode development
|
||||
npm run build:capacitor
|
||||
# Builds with development optimizations and debugging enabled
|
||||
```
|
||||
|
||||
#### Testing Environment (`--test`)
|
||||
|
||||
```bash
|
||||
# Uses --mode test
|
||||
npm run build:capacitor -- --mode test
|
||||
# Builds with testing configurations and test API endpoints
|
||||
```
|
||||
|
||||
#### Production Environment (`--prod`)
|
||||
|
||||
```bash
|
||||
# Uses --mode production
|
||||
npm run build:capacitor -- --mode production
|
||||
# Builds with production optimizations and live API endpoints
|
||||
```
|
||||
|
||||
## Build Artifacts
|
||||
|
||||
### APK Files
|
||||
|
||||
- **Debug APK**: `android/app/build/outputs/apk/debug/app-debug.apk`
|
||||
- **Release APK**: `android/app/build/outputs/apk/release/app-release.apk`
|
||||
|
||||
### AAB Files
|
||||
|
||||
- **Release AAB**: `android/app/build/outputs/bundle/release/app-release.aab`
|
||||
|
||||
### Build Locations
|
||||
|
||||
```bash
|
||||
# APK files
|
||||
android/app/build/outputs/apk/debug/
|
||||
android/app/build/outputs/apk/release/
|
||||
|
||||
# AAB files
|
||||
android/app/build/outputs/bundle/release/
|
||||
|
||||
# Gradle build cache
|
||||
android/app/build/
|
||||
android/.gradle/
|
||||
```
|
||||
|
||||
## Environment Variables
|
||||
|
||||
The build system automatically sets environment variables based on the build
|
||||
type:
|
||||
|
||||
### Capacitor Environment
|
||||
|
||||
```bash
|
||||
VITE_PLATFORM=capacitor
|
||||
VITE_PWA_ENABLED=false
|
||||
VITE_DISABLE_PWA=true
|
||||
DEBUG_MIGRATIONS=0
|
||||
```
|
||||
|
||||
### Git Integration
|
||||
|
||||
```bash
|
||||
VITE_GIT_HASH=<git-commit-hash>
|
||||
# Automatically set from current git commit
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Exit Codes
|
||||
|
||||
| Code | Description |
|
||||
|------|-------------|
|
||||
| 1 | Android cleanup failed |
|
||||
| 2 | Web build failed |
|
||||
| 3 | Capacitor build failed |
|
||||
| 4 | Gradle clean failed |
|
||||
| 5 | Gradle assemble failed |
|
||||
| 6 | Capacitor sync failed |
|
||||
| 7 | Asset generation failed |
|
||||
| 8 | Android Studio launch failed |
|
||||
| 9 | Resource check failed |
|
||||
|
||||
### Common Issues
|
||||
|
||||
#### Resource Check Failures
|
||||
|
||||
```bash
|
||||
# Resource check may find issues but continues build
|
||||
log_warning "Resource check found issues, but continuing with build..."
|
||||
```
|
||||
|
||||
#### Gradle Build Failures
|
||||
|
||||
```bash
|
||||
# Check Android SDK and build tools
|
||||
./android/gradlew --version
|
||||
# Verify JAVA_HOME is set correctly
|
||||
echo $JAVA_HOME
|
||||
```
|
||||
|
||||
## Integration with Capacitor
|
||||
|
||||
### Capacitor Sync Process
|
||||
|
||||
```bash
|
||||
# Full sync (all platforms)
|
||||
npx cap sync
|
||||
|
||||
# Android-specific sync
|
||||
npx cap sync android
|
||||
```
|
||||
|
||||
### Asset Generation
|
||||
|
||||
```bash
|
||||
# Generate Android-specific assets
|
||||
npx capacitor-assets generate --android
|
||||
```
|
||||
|
||||
### Android Studio Integration
|
||||
|
||||
```bash
|
||||
# Open Android Studio with project
|
||||
npx cap open android
|
||||
```
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### Typical Development Cycle
|
||||
|
||||
```bash
|
||||
# 1. Make code changes
|
||||
# 2. Build for development
|
||||
npm run build:android:dev
|
||||
|
||||
# 3. Open Android Studio for debugging
|
||||
npm run build:android:studio
|
||||
|
||||
# 4. Test on device/emulator
|
||||
# 5. Iterate and repeat
|
||||
```
|
||||
|
||||
### Testing Workflow
|
||||
|
||||
```bash
|
||||
# 1. Build for testing environment
|
||||
npm run build:android:test
|
||||
|
||||
# 2. Build test APK
|
||||
npm run build:android:test -- --apk
|
||||
|
||||
# 3. Install and test on device
|
||||
adb install android/app/build/outputs/apk/debug/app-debug.apk
|
||||
```
|
||||
|
||||
### Production Workflow
|
||||
|
||||
```bash
|
||||
# 1. Build for production environment
|
||||
npm run build:android:prod
|
||||
|
||||
# 2. Build release AAB for Play Store
|
||||
npm run build:android:prod -- --aab
|
||||
|
||||
# 3. Sign and upload to Play Console
|
||||
```
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### Build Time Optimization
|
||||
|
||||
- **Incremental Builds**: Gradle caches build artifacts
|
||||
- **Parallel Execution**: Multiple build steps run in parallel
|
||||
- **Resource Optimization**: Assets are optimized for Android
|
||||
|
||||
### Memory Management
|
||||
|
||||
- **Gradle Daemon**: Reuses JVM for faster builds
|
||||
- **Build Cache**: Caches compiled resources
|
||||
- **Clean Builds**: Full cleanup when needed
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Build Issues
|
||||
|
||||
#### Gradle Build Failures
|
||||
|
||||
```bash
|
||||
# Clean Gradle cache
|
||||
cd android && ./gradlew clean && cd ..
|
||||
|
||||
# Check Java version
|
||||
java -version
|
||||
|
||||
# Verify Android SDK
|
||||
echo $ANDROID_HOME
|
||||
```
|
||||
|
||||
#### Capacitor Sync Issues
|
||||
|
||||
```bash
|
||||
# Force full sync
|
||||
npx cap sync android --force
|
||||
|
||||
# Check Capacitor configuration
|
||||
cat capacitor.config.json
|
||||
```
|
||||
|
||||
#### Asset Generation Issues
|
||||
|
||||
```bash
|
||||
# Regenerate assets
|
||||
npx capacitor-assets generate --android --force
|
||||
|
||||
# Check asset source files
|
||||
ls -la src/assets/
|
||||
```
|
||||
|
||||
### Debug Mode
|
||||
|
||||
```bash
|
||||
# Enable verbose logging
|
||||
./scripts/build-android.sh --verbose
|
||||
|
||||
# Show environment variables
|
||||
./scripts/build-android.sh --env
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Build Optimization
|
||||
|
||||
1. **Use Appropriate Environment**: Always specify the correct environment
|
||||
2. **Clean When Needed**: Use `--clean` for troubleshooting
|
||||
3. **Incremental Builds**: Avoid unnecessary full rebuilds
|
||||
4. **Asset Management**: Keep assets optimized for mobile
|
||||
|
||||
### Development Workflow
|
||||
|
||||
1. **Development Builds**: Use `--dev` for daily development
|
||||
2. **Testing Builds**: Use `--test` for QA testing
|
||||
3. **Production Builds**: Use `--prod` for release builds
|
||||
4. **Studio Integration**: Use `--studio` for debugging
|
||||
|
||||
### Error Prevention
|
||||
|
||||
1. **Resource Validation**: Always run resource checks
|
||||
2. **Environment Consistency**: Use consistent environment variables
|
||||
3. **Build Verification**: Test builds on actual devices
|
||||
4. **Version Control**: Keep build scripts in version control
|
||||
|
||||
## Migration from Legacy System
|
||||
|
||||
### Backward Compatibility
|
||||
|
||||
The new system maintains full backward compatibility:
|
||||
|
||||
```bash
|
||||
# Old command still works (now an alias)
|
||||
npm run build:capacitor:android
|
||||
|
||||
# New commands provide more flexibility
|
||||
npm run build:android:dev
|
||||
npm run build:android:test
|
||||
npm run build:android:prod
|
||||
```
|
||||
|
||||
**Note:** All Android builds should use the `build:android*` pattern. The `build:capacitor:android*` scripts are provided as aliases for compatibility but will be deprecated in the future.
|
||||
|
||||
### Migration Checklist
|
||||
|
||||
- [ ] Update CI/CD pipelines to use new commands
|
||||
- [ ] Update documentation references
|
||||
- [ ] Train team on new build options
|
||||
- [ ] Test all build environments
|
||||
- [ ] Verify artifact locations
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
### Planned Features
|
||||
|
||||
1. **Build Profiles**: Custom build configurations
|
||||
2. **Automated Testing**: Integration with test suites
|
||||
3. **Build Analytics**: Performance metrics and reporting
|
||||
4. **Cloud Builds**: Remote build capabilities
|
||||
|
||||
### Integration Opportunities
|
||||
|
||||
1. **Fastlane Integration**: Automated deployment
|
||||
2. **CI/CD Enhancement**: Pipeline optimization
|
||||
3. **Monitoring**: Build performance tracking
|
||||
4. **Documentation**: Auto-generated build reports
|
||||
|
||||
---
|
||||
|
||||
**Status**: Complete and ready for production use
|
||||
**Last Updated**: 2025-07-11
|
||||
**Version**: 1.0
|
||||
**Maintainer**: Matthew Raymer
|
||||
146
docs/build-system/platforms/database-clearing.md
Normal file
146
docs/build-system/platforms/database-clearing.md
Normal file
@@ -0,0 +1,146 @@
|
||||
# Database Clearing for Development
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-11
|
||||
**Status**: **ACTIVE** - Production Ready
|
||||
|
||||
## Overview
|
||||
|
||||
TimeSafari provides a simple script-based approach to clear the database for development purposes. This avoids the complexity of programmatic database clearing and provides reliable, platform-specific solutions.
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
# Run the interactive database clearing script
|
||||
./scripts/clear-database.sh
|
||||
|
||||
# Then restart your development server
|
||||
npm run build:electron:dev # For Electron
|
||||
npm run build:web:dev # For Web
|
||||
```
|
||||
|
||||
## Platform-Specific Approaches
|
||||
|
||||
### Electron (Desktop App)
|
||||
|
||||
The script automatically detects your platform and clears the SQLite database files:
|
||||
|
||||
- **Linux**: `~/.config/TimeSafari/`
|
||||
- **macOS**: `~/Library/Application Support/TimeSafari/`
|
||||
- **Windows**: `%APPDATA%\TimeSafari`
|
||||
|
||||
### Web Browser
|
||||
|
||||
For web browsers, the script provides two approaches:
|
||||
|
||||
#### 1. Custom Data Directory (Recommended)
|
||||
|
||||
Create an isolated browser profile for development:
|
||||
|
||||
```bash
|
||||
# Create isolated profile
|
||||
mkdir ~/timesafari-dev-data
|
||||
|
||||
# Start browser with custom profile
|
||||
google-chrome --user-data-dir=~/timesafari-dev-data
|
||||
|
||||
# Clear when needed
|
||||
rm -rf ~/timesafari-dev-data
|
||||
```
|
||||
|
||||
#### 2. Manual Browser Clearing
|
||||
|
||||
Use browser DevTools to clear IndexedDB:
|
||||
|
||||
1. Open Developer Tools (F12)
|
||||
2. Go to Application/Storage tab
|
||||
3. Find 'IndexedDB' section
|
||||
4. Delete 'TimeSafari' database
|
||||
5. Refresh the page
|
||||
|
||||
## Why Script-Based Approach?
|
||||
|
||||
### **Simplicity**
|
||||
- No complex programmatic database clearing
|
||||
- No browser storage complications
|
||||
- No race conditions or permission issues
|
||||
|
||||
### **Reliability**
|
||||
- Direct file system access for Electron
|
||||
- Isolated browser profiles for web
|
||||
- Clear, predictable behavior
|
||||
|
||||
### **Safety**
|
||||
- Interactive script guides users
|
||||
- Platform-specific instructions
|
||||
- Only clears TimeSafari data
|
||||
|
||||
## Manual Commands
|
||||
|
||||
If you prefer manual commands:
|
||||
|
||||
### Electron
|
||||
```bash
|
||||
# Linux
|
||||
rm -rf ~/.config/TimeSafari/*
|
||||
|
||||
# macOS
|
||||
rm -rf ~/Library/Application\ Support/TimeSafari/*
|
||||
|
||||
# Windows
|
||||
rmdir /s /q %APPDATA%\TimeSafari
|
||||
```
|
||||
|
||||
### Web Browser
|
||||
```bash
|
||||
# Create and use isolated profile
|
||||
mkdir ~/timesafari-dev-data
|
||||
google-chrome --user-data-dir=~/timesafari-dev-data
|
||||
|
||||
# Clear when needed
|
||||
rm -rf ~/timesafari-dev-data
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Stop the development server** before clearing
|
||||
2. **Use isolated browser profiles** for web development
|
||||
3. **Restart the development server** after clearing
|
||||
4. **Backup important data** before clearing
|
||||
5. **Use the script** for consistent behavior
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Script Not Found
|
||||
```bash
|
||||
# Make sure script is executable
|
||||
chmod +x scripts/clear-database.sh
|
||||
|
||||
# Run from project root
|
||||
./scripts/clear-database.sh
|
||||
```
|
||||
|
||||
### Permission Errors
|
||||
```bash
|
||||
# Check file permissions
|
||||
ls -la ~/.config/TimeSafari/
|
||||
|
||||
# Use sudo if needed (rare)
|
||||
sudo rm -rf ~/.config/TimeSafari/*
|
||||
```
|
||||
|
||||
### Browser Profile Issues
|
||||
```bash
|
||||
# Ensure browser is completely closed
|
||||
pkill -f chrome
|
||||
pkill -f firefox
|
||||
|
||||
# Then clear profile
|
||||
rm -rf ~/timesafari-dev-data
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2025-07-11
|
||||
**Version**: 1.0.3-beta
|
||||
**Status**: Production Ready
|
||||
174
docs/build-system/platforms/electron-auto-updates.md
Normal file
174
docs/build-system/platforms/electron-auto-updates.md
Normal file
@@ -0,0 +1,174 @@
|
||||
# Electron Auto-Updates Configuration
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-12
|
||||
**Status**: **DISABLED** - Manual Updates Only
|
||||
|
||||
## Overview
|
||||
|
||||
TimeSafari's Electron application currently has auto-updates disabled due to hosting on Gitea instead of GitHub. This document explains the current configuration and provides guidance for future update mechanisms.
|
||||
|
||||
## Current Status
|
||||
|
||||
### Auto-Updates Disabled
|
||||
|
||||
Auto-updates are currently disabled for the following reasons:
|
||||
|
||||
1. **Repository Hosting**: The project is hosted on Gitea (`https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa`) rather than GitHub
|
||||
2. **Provider Limitations**: `electron-updater` primarily supports GitHub, S3, and other major cloud providers
|
||||
3. **404 Errors**: Attempting to use GitHub auto-updates with a Gitea repository causes 404 errors
|
||||
|
||||
### Configuration Changes Made
|
||||
|
||||
1. **Repository URL Updated**: Changed from `https://github.com/trentlarson/crowd-master` to the correct Gitea URL
|
||||
2. **Publish Configuration Removed**: Removed GitHub provider from `electron-builder.config.json`
|
||||
3. **Auto-Updater Disabled**: Commented out auto-updater code in `electron/src/index.ts`
|
||||
|
||||
## Error Resolution
|
||||
|
||||
The original error:
|
||||
```
|
||||
HttpError: 404
|
||||
"method: GET url: https://github.com/trentlarson/crowd-master/releases.atom"
|
||||
```
|
||||
|
||||
This occurred because:
|
||||
- The app was trying to check for updates on GitHub
|
||||
- The repository doesn't exist on GitHub
|
||||
- The auto-updater was configured for GitHub releases
|
||||
|
||||
## Future Update Options
|
||||
|
||||
### Option 1: Manual Distribution
|
||||
- Build and distribute packages manually
|
||||
- Users download and install new versions manually
|
||||
- No automatic update checking
|
||||
|
||||
### Option 2: Custom Update Server
|
||||
- Implement a custom update server compatible with `electron-updater`
|
||||
- Host update files on a web server
|
||||
- Configure custom update endpoints
|
||||
|
||||
### Option 3: GitHub Migration
|
||||
- Move repository to GitHub
|
||||
- Set up GitHub releases
|
||||
- Re-enable auto-updates
|
||||
|
||||
### Option 4: Alternative Update Providers
|
||||
- Use S3 or other supported providers
|
||||
- Implement custom update mechanism
|
||||
- Use third-party update services
|
||||
|
||||
## Current Build Process
|
||||
|
||||
### Development Builds
|
||||
```bash
|
||||
npm run build:electron:dev
|
||||
```
|
||||
|
||||
### Production Builds
|
||||
```bash
|
||||
npm run build:electron:prod
|
||||
```
|
||||
|
||||
### Package Distribution
|
||||
```bash
|
||||
# Windows
|
||||
npm run build:electron:windows:prod
|
||||
|
||||
# macOS
|
||||
npm run build:electron:mac:prod
|
||||
|
||||
# Linux
|
||||
npm run build:electron:linux:prod
|
||||
```
|
||||
|
||||
## Manual Update Process
|
||||
|
||||
1. **Build New Version**: Use appropriate build script
|
||||
2. **Test Package**: Verify the built package works correctly
|
||||
3. **Distribute**: Share the package with users
|
||||
4. **User Installation**: Users manually download and install
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Disabled Auto-Updates
|
||||
- No automatic security updates
|
||||
- Users must manually update for security patches
|
||||
- Consider implementing update notifications
|
||||
|
||||
### Package Verification
|
||||
- Verify package integrity before distribution
|
||||
- Use code signing for packages
|
||||
- Implement checksum verification
|
||||
|
||||
## Monitoring and Maintenance
|
||||
|
||||
### Version Tracking
|
||||
- Track application versions manually
|
||||
- Document changes between versions
|
||||
- Maintain changelog for users
|
||||
|
||||
### User Communication
|
||||
- Notify users of available updates
|
||||
- Provide clear update instructions
|
||||
- Document breaking changes
|
||||
|
||||
## Recommendations
|
||||
|
||||
### Short Term
|
||||
1. Continue with manual distribution
|
||||
2. Implement update notifications in-app
|
||||
3. Provide clear update instructions
|
||||
|
||||
### Long Term
|
||||
1. Evaluate hosting platform options
|
||||
2. Consider implementing custom update server
|
||||
3. Plan for automated update mechanism
|
||||
|
||||
## Configuration Files
|
||||
|
||||
### electron-builder.config.json
|
||||
```json
|
||||
{
|
||||
"appId": "app.timesafari.desktop",
|
||||
"productName": "TimeSafari",
|
||||
// publish configuration removed
|
||||
}
|
||||
```
|
||||
|
||||
### electron/src/index.ts
|
||||
```typescript
|
||||
// Auto-updater disabled
|
||||
// import { autoUpdater } from 'electron-updater';
|
||||
|
||||
// Auto-updates disabled - not supported on Gitea hosting
|
||||
// if (!electronIsDev && !process.env.APPIMAGE) {
|
||||
// try {
|
||||
// autoUpdater.checkForUpdatesAndNotify();
|
||||
// } catch (error) {
|
||||
// console.log('Update check failed (suppressed):', error);
|
||||
// }
|
||||
// }
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
1. **404 Errors**: Ensure repository URL is correct
|
||||
2. **Build Failures**: Check build configuration
|
||||
3. **Package Issues**: Verify package contents
|
||||
|
||||
### Debug Mode
|
||||
```bash
|
||||
# Enable debug logging
|
||||
DEBUG=* npm run build:electron:dev
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Status**: Auto-updates disabled
|
||||
**Last Updated**: 2025-07-12
|
||||
**Version**: 1.0
|
||||
**Maintainer**: Matthew Raymer
|
||||
181
docs/build-system/platforms/electron-build-scripts.md
Normal file
181
docs/build-system/platforms/electron-build-scripts.md
Normal file
@@ -0,0 +1,181 @@
|
||||
# Electron Build Scripts Guide
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-11
|
||||
**Status**: **ACTIVE** - Production Ready
|
||||
|
||||
## Overview
|
||||
|
||||
This document clarifies the difference between Electron build scripts that create executable packages versus those that run the app directly.
|
||||
|
||||
## Script Categories
|
||||
|
||||
### 🚀 **Development Scripts (Run App Directly)**
|
||||
|
||||
These scripts build the app and then run it immediately for development:
|
||||
|
||||
```bash
|
||||
# Development mode - runs app directly
|
||||
npm run build:electron:dev
|
||||
|
||||
# Test mode - runs app directly
|
||||
npm run build:electron:test
|
||||
|
||||
# Production mode - runs app directly
|
||||
npm run build:electron:prod
|
||||
```
|
||||
|
||||
### 📦 **Package Build Scripts (Create Executables)**
|
||||
|
||||
These scripts build executable packages that can be distributed and run by users:
|
||||
|
||||
#### **Platform-Specific Executables**
|
||||
```bash
|
||||
# Windows executable (.exe)
|
||||
npm run build:electron:windows
|
||||
npm run build:electron:windows:dev
|
||||
npm run build:electron:windows:test
|
||||
npm run build:electron:windows:prod
|
||||
|
||||
# macOS app bundle (.app)
|
||||
npm run build:electron:mac
|
||||
npm run build:electron:mac:dev
|
||||
npm run build:electron:mac:test
|
||||
npm run build:electron:mac:prod
|
||||
|
||||
# Linux executable
|
||||
npm run build:electron:linux
|
||||
npm run build:electron:linux:dev
|
||||
npm run build:electron:linux:test
|
||||
npm run build:electron:linux:prod
|
||||
```
|
||||
|
||||
#### **Package Formats**
|
||||
```bash
|
||||
# Linux AppImage (portable executable)
|
||||
npm run build:electron:appimage
|
||||
npm run build:electron:appimage:dev
|
||||
npm run build:electron:appimage:test
|
||||
npm run build:electron:appimage:prod
|
||||
|
||||
# Linux DEB package (installable)
|
||||
npm run build:electron:deb
|
||||
npm run build:electron:deb:dev
|
||||
npm run build:electron:deb:test
|
||||
npm run build:electron:deb:prod
|
||||
|
||||
# macOS DMG package (installable)
|
||||
npm run build:electron:dmg
|
||||
npm run build:electron:dmg:dev
|
||||
npm run build:electron:dmg:test
|
||||
npm run build:electron:dmg:prod
|
||||
```
|
||||
|
||||
## Output Locations
|
||||
|
||||
### **Development Scripts**
|
||||
- Run the app directly in development mode
|
||||
- No files created for distribution
|
||||
- App runs immediately after build
|
||||
|
||||
### **Package Scripts**
|
||||
- Create executable files in `electron/dist/`
|
||||
- Files can be distributed to users
|
||||
- Users can run the executables by hand
|
||||
|
||||
#### **Package Output Examples**
|
||||
```bash
|
||||
# AppImage
|
||||
electron/dist/TimeSafari-1.0.3-beta.AppImage
|
||||
|
||||
# DEB package
|
||||
electron/dist/TimeSafari_1.0.3-beta_amd64.deb
|
||||
|
||||
# DMG package
|
||||
electron/dist/TimeSafari-1.0.3-beta.dmg
|
||||
|
||||
# Windows executable
|
||||
electron/dist/TimeSafari Setup 1.0.3-beta.exe
|
||||
```
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### **Development Workflow**
|
||||
```bash
|
||||
# Start development (runs app directly)
|
||||
npm run build:electron:dev
|
||||
|
||||
# Test with production build (runs app directly)
|
||||
npm run build:electron:test
|
||||
```
|
||||
|
||||
### **Distribution Workflow**
|
||||
```bash
|
||||
# Build AppImage for Linux distribution
|
||||
npm run build:electron:appimage:prod
|
||||
|
||||
# Build DMG for macOS distribution
|
||||
npm run build:electron:dmg:prod
|
||||
|
||||
# Build Windows installer
|
||||
npm run build:electron:windows:prod
|
||||
```
|
||||
|
||||
### **Testing Packages**
|
||||
```bash
|
||||
# Build test version of AppImage
|
||||
npm run build:electron:appimage:test
|
||||
|
||||
# Test the generated executable
|
||||
./electron/dist/TimeSafari-1.0.3-beta.AppImage
|
||||
```
|
||||
|
||||
## Key Differences
|
||||
|
||||
| Script Type | Purpose | Output | User Action |
|
||||
|-------------|---------|--------|-------------|
|
||||
| Development | Run app directly | None | App starts automatically |
|
||||
| Package | Create executable | `electron/dist/` | User runs executable by hand |
|
||||
|
||||
## Best Practices
|
||||
|
||||
### **For Development**
|
||||
- Use `npm run build:electron:dev` for daily development
|
||||
- Use `npm run build:electron:test` for testing production builds
|
||||
- App runs immediately after build
|
||||
|
||||
### **For Distribution**
|
||||
- Use `npm run build:electron:*:prod` for production packages
|
||||
- Test packages before distribution
|
||||
- Users install/run the generated executables
|
||||
|
||||
### **For Testing**
|
||||
- Use `npm run build:electron:*:test` for test packages
|
||||
- Verify executables work on target platforms
|
||||
- Test installation and uninstallation
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### **Package Build Issues**
|
||||
```bash
|
||||
# Check if package was created
|
||||
ls -la electron/dist/
|
||||
|
||||
# Verify package integrity
|
||||
file electron/dist/*.AppImage
|
||||
file electron/dist/*.deb
|
||||
file electron/dist/*.dmg
|
||||
```
|
||||
|
||||
### **Development Issues**
|
||||
```bash
|
||||
# Clean and rebuild
|
||||
npm run clean:electron
|
||||
npm run build:electron:dev
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2025-07-11
|
||||
**Version**: 1.0.3-beta
|
||||
**Status**: Production Ready
|
||||
436
docs/build-system/platforms/ios-build-scripts.md
Normal file
436
docs/build-system/platforms/ios-build-scripts.md
Normal file
@@ -0,0 +1,436 @@
|
||||
# iOS Build Scripts Documentation
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-11
|
||||
**Status**: ✅ **COMPLETE** - Full iOS build system integration
|
||||
|
||||
## Overview
|
||||
|
||||
The iOS build system for TimeSafari will provide comprehensive support for iOS mobile application development using Capacitor and Xcode. This system will support development, testing, and production environments with optimized builds for each use case.
|
||||
|
||||
**Note:** The iOS build system is now fully implemented and follows the same patterns as the Android and Electron build systems for consistency and maintainability.
|
||||
|
||||
## Build Script Integration
|
||||
|
||||
### Package.json Scripts
|
||||
|
||||
The iOS build system is fully integrated into `package.json` with the following scripts:
|
||||
|
||||
#### Basic Build Commands
|
||||
|
||||
```bash
|
||||
# Development builds (defaults to --mode development)
|
||||
npm run build:ios:dev # Development build
|
||||
npm run build:ios:test # Testing build
|
||||
npm run build:ios:prod # Production build
|
||||
```
|
||||
|
||||
#### Build Type Commands
|
||||
|
||||
```bash
|
||||
# Debug builds
|
||||
npm run build:ios:debug # Debug app build
|
||||
|
||||
# Release builds
|
||||
npm run build:ios:release # Release app build
|
||||
```
|
||||
|
||||
#### Specialized Commands
|
||||
|
||||
```bash
|
||||
# Xcode integration
|
||||
npm run build:ios:studio # Build + open Xcode
|
||||
|
||||
# Package builds
|
||||
npm run build:ios:ipa # Build IPA file
|
||||
npm run build:ios:app # Build app bundle
|
||||
|
||||
# Utility commands
|
||||
npm run build:ios:clean # Clean build artifacts only
|
||||
npm run build:ios:sync # Sync Capacitor only
|
||||
npm run build:ios:assets # Generate assets only
|
||||
```
|
||||
|
||||
#### Legacy Command
|
||||
|
||||
```bash
|
||||
# Original script (maintains backward compatibility)
|
||||
npm run build:ios # Full build process
|
||||
```
|
||||
|
||||
## Script Usage
|
||||
|
||||
### Direct Script Usage
|
||||
|
||||
The `build-ios.sh` script supports comprehensive command-line options:
|
||||
|
||||
```bash
|
||||
# Basic usage
|
||||
./scripts/build-ios.sh [options]
|
||||
|
||||
# Environment-specific builds
|
||||
./scripts/build-ios.sh --dev --studio # Development + open Xcode
|
||||
./scripts/build-ios.sh --test --ipa # Testing IPA build
|
||||
./scripts/build-ios.sh --prod --app # Production app build
|
||||
|
||||
# Utility operations
|
||||
./scripts/build-ios.sh --clean # Clean only
|
||||
./scripts/build-ios.sh --sync # Sync only
|
||||
./scripts/build-ios.sh --assets # Assets only
|
||||
```
|
||||
|
||||
### Command-Line Options
|
||||
|
||||
| Option | Description | Default |
|
||||
|--------|-------------|---------|
|
||||
| `--dev`, `--development` | Build for development environment | ✅ |
|
||||
| `--test` | Build for testing environment | |
|
||||
| `--prod`, `--production` | Build for production environment | |
|
||||
| `--debug` | Build debug app | ✅ |
|
||||
| `--release` | Build release app | |
|
||||
| `--studio` | Open Xcode after build | |
|
||||
| `--ipa` | Build IPA file | |
|
||||
| `--app` | Build app bundle | |
|
||||
| `--clean` | Clean build artifacts only | |
|
||||
| `--sync` | Sync Capacitor only | |
|
||||
| `--assets` | Generate assets only | |
|
||||
| `-h`, `--help` | Show help message | |
|
||||
| `-v`, `--verbose` | Enable verbose logging | |
|
||||
|
||||
## Build Process
|
||||
|
||||
### Complete Build Flow
|
||||
|
||||
1. **Resource Check**: Validate iOS resources
|
||||
2. **Cleanup**: Clean iOS app and build artifacts
|
||||
3. **Capacitor Build**: Build web assets with environment-specific mode
|
||||
4. **Xcode Clean**: Clean Xcode build cache
|
||||
5. **Xcode Build**: Build debug/release app
|
||||
6. **Capacitor Sync**: Sync web assets to iOS platform
|
||||
7. **Asset Generation**: Generate iOS-specific assets
|
||||
8. **Package Build**: Build IPA if requested
|
||||
9. **Xcode Launch**: Open Xcode if requested
|
||||
|
||||
### Environment-Specific Builds
|
||||
|
||||
#### Development Environment (`--dev`)
|
||||
|
||||
```bash
|
||||
# Uses --mode development
|
||||
npm run build:capacitor
|
||||
# Builds with development optimizations and debugging enabled
|
||||
```
|
||||
|
||||
#### Testing Environment (`--test`)
|
||||
|
||||
```bash
|
||||
# Uses --mode test
|
||||
npm run build:capacitor -- --mode test
|
||||
# Builds with testing configurations and test API endpoints
|
||||
```
|
||||
|
||||
#### Production Environment (`--prod`)
|
||||
|
||||
```bash
|
||||
# Uses --mode production
|
||||
npm run build:capacitor -- --mode production
|
||||
# Builds with production optimizations and live API endpoints
|
||||
```
|
||||
|
||||
## Build Artifacts
|
||||
|
||||
### App Files
|
||||
|
||||
- **Debug App**: `ios/App/build/Debug-iphonesimulator/App.app`
|
||||
- **Release App**: `ios/App/build/Release-iphoneos/App.app`
|
||||
|
||||
### IPA Files
|
||||
|
||||
- **Release IPA**: `ios/App/build/Release-iphoneos/App.ipa`
|
||||
|
||||
### Build Locations
|
||||
|
||||
```bash
|
||||
# App files
|
||||
ios/App/build/Debug-iphonesimulator/
|
||||
ios/App/build/Release-iphoneos/
|
||||
|
||||
# IPA files
|
||||
ios/App/build/Release-iphoneos/
|
||||
|
||||
# Xcode build cache
|
||||
ios/App/build/
|
||||
ios/App/DerivedData/
|
||||
```
|
||||
|
||||
## Environment Variables
|
||||
|
||||
The build system will automatically set environment variables based on the build type:
|
||||
|
||||
### Capacitor Environment
|
||||
|
||||
```bash
|
||||
VITE_PLATFORM=capacitor
|
||||
VITE_PWA_ENABLED=false
|
||||
VITE_DISABLE_PWA=true
|
||||
DEBUG_MIGRATIONS=0
|
||||
```
|
||||
|
||||
### Git Integration
|
||||
|
||||
```bash
|
||||
VITE_GIT_HASH=<git-commit-hash>
|
||||
# Automatically set from current git commit
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Exit Codes
|
||||
|
||||
| Code | Description |
|
||||
|------|-------------|
|
||||
| 1 | iOS cleanup failed |
|
||||
| 2 | Web build failed |
|
||||
| 3 | Capacitor build failed |
|
||||
| 4 | Xcode clean failed |
|
||||
| 5 | Xcode build failed |
|
||||
| 6 | Capacitor sync failed |
|
||||
| 7 | Asset generation failed |
|
||||
| 8 | Xcode open failed |
|
||||
|
||||
## iOS-Specific Features
|
||||
|
||||
### Simulator Support
|
||||
|
||||
```bash
|
||||
# Build for iOS Simulator
|
||||
npm run build:ios:dev --simulator
|
||||
|
||||
# Run on specific simulator
|
||||
xcrun simctl boot "iPhone 15 Pro"
|
||||
xcrun simctl install booted ios/App/build/Debug-iphonesimulator/App.app
|
||||
```
|
||||
|
||||
### Device Deployment
|
||||
|
||||
```bash
|
||||
# Build for physical device
|
||||
npm run build:ios:dev --device
|
||||
|
||||
# Install on connected device
|
||||
xcrun devicectl device install app --device <device-id> ios/App/build/Debug-iphoneos/App.app
|
||||
```
|
||||
|
||||
### Code Signing
|
||||
|
||||
```bash
|
||||
# Development signing
|
||||
npm run build:ios:dev --development-team <team-id>
|
||||
|
||||
# Distribution signing
|
||||
npm run build:ios:prod --distribution-certificate <cert-id>
|
||||
```
|
||||
|
||||
## Asset Generation
|
||||
|
||||
### iOS-Specific Assets
|
||||
|
||||
```bash
|
||||
# Generate iOS assets
|
||||
npx capacitor-assets generate --ios
|
||||
|
||||
# Assets generated
|
||||
ios/App/App/Assets.xcassets/
|
||||
├── AppIcon.appiconset/
|
||||
├── Splash.imageset/
|
||||
└── SplashDark.imageset/
|
||||
```
|
||||
|
||||
### Asset Requirements
|
||||
|
||||
- **App Icon**: 1024x1024 PNG (App Store requirement)
|
||||
- **Splash Screens**: Multiple sizes for different devices
|
||||
- **Launch Images**: Optimized for fast app startup
|
||||
|
||||
## Xcode Integration
|
||||
|
||||
### Xcode Project Structure
|
||||
|
||||
```bash
|
||||
ios/App/
|
||||
├── App.xcodeproj/ # Xcode project file
|
||||
├── App.xcworkspace/ # Xcode workspace
|
||||
├── App/ # iOS app source
|
||||
│ ├── AppDelegate.swift # App delegate
|
||||
│ ├── Info.plist # App configuration
|
||||
│ └── Assets.xcassets/ # App assets
|
||||
└── Podfile # CocoaPods dependencies
|
||||
```
|
||||
|
||||
### Xcode Build Configurations
|
||||
|
||||
- **Debug**: Development with debugging enabled
|
||||
- **Release**: Production with optimizations
|
||||
- **Ad Hoc**: Testing distribution
|
||||
- **App Store**: App Store distribution
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### Daily Development
|
||||
|
||||
```bash
|
||||
# Development build
|
||||
npm run build:ios:dev
|
||||
|
||||
# Open in Xcode
|
||||
npm run build:ios:studio
|
||||
|
||||
# Run on simulator
|
||||
xcrun simctl launch booted app.timesafari.app
|
||||
```
|
||||
|
||||
### Testing Workflow
|
||||
|
||||
```bash
|
||||
# Test build
|
||||
npm run build:ios:test
|
||||
|
||||
# Run tests
|
||||
cd ios/App && xcodebuild test -workspace App.xcworkspace -scheme App -destination 'platform=iOS Simulator,name=iPhone 15 Pro'
|
||||
```
|
||||
|
||||
### Production Workflow
|
||||
|
||||
```bash
|
||||
# Production build
|
||||
npm run build:ios:prod
|
||||
|
||||
# Create IPA for distribution
|
||||
npm run build:ios:ipa:prod
|
||||
|
||||
# Upload to App Store Connect
|
||||
xcrun altool --upload-app -f ios/App/build/Release-iphoneos/App.ipa -t ios -u <apple-id> -p <app-specific-password>
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
#### Build Failures
|
||||
```bash
|
||||
# Clean Xcode build
|
||||
cd ios/App && xcodebuild clean -workspace App.xcworkspace -scheme App
|
||||
|
||||
# Clean Capacitor
|
||||
npx cap clean ios
|
||||
|
||||
# Rebuild
|
||||
npm run build:ios:dev
|
||||
```
|
||||
|
||||
#### Simulator Issues
|
||||
```bash
|
||||
# Reset simulator
|
||||
xcrun simctl erase all
|
||||
|
||||
# List available simulators
|
||||
xcrun simctl list devices
|
||||
|
||||
# Boot specific simulator
|
||||
xcrun simctl boot "iPhone 15 Pro"
|
||||
```
|
||||
|
||||
#### Code Signing Issues
|
||||
```bash
|
||||
# Check certificates
|
||||
security find-identity -v -p codesigning
|
||||
|
||||
# Check provisioning profiles
|
||||
ls ~/Library/MobileDevice/Provisioning\ Profiles/
|
||||
```
|
||||
|
||||
### Debug Mode
|
||||
|
||||
Enable verbose logging for iOS builds:
|
||||
|
||||
```bash
|
||||
# Verbose mode
|
||||
./scripts/build-ios.sh --verbose
|
||||
|
||||
# Xcode verbose build
|
||||
cd ios/App && xcodebuild -workspace App.xcworkspace -scheme App -configuration Debug -verbose
|
||||
```
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
### Build Performance
|
||||
|
||||
- **Incremental Builds**: Only rebuild changed files
|
||||
- **Parallel Processing**: Multi-core build optimization
|
||||
- **Caching**: Xcode build cache utilization
|
||||
- **Asset Optimization**: Image compression and optimization
|
||||
|
||||
### Runtime Performance
|
||||
|
||||
- **App Launch Time**: Optimized splash screens and assets
|
||||
- **Memory Usage**: Efficient image loading and caching
|
||||
- **Battery Life**: Background task optimization
|
||||
- **Network Performance**: Efficient API communication
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### iOS Security Features
|
||||
|
||||
- **App Sandboxing**: Isolated app environment
|
||||
- **Code Signing**: Digital signature verification
|
||||
- **Entitlements**: Controlled access to system resources
|
||||
- **App Transport Security**: Secure network communication
|
||||
|
||||
### Build Security
|
||||
|
||||
- **Environment Isolation**: Separate dev/test/prod environments
|
||||
- **Secret Management**: Secure handling of API keys
|
||||
- **Dependency Scanning**: Regular security audits
|
||||
- **Code Signing**: Secure certificate management
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
### Planned Features
|
||||
|
||||
- **CI/CD Integration**: Automated build pipelines
|
||||
- **Test Automation**: Automated testing framework
|
||||
- **Performance Monitoring**: Build and runtime performance tracking
|
||||
- **Asset Optimization**: Advanced image and code optimization
|
||||
|
||||
### Platform Expansion
|
||||
|
||||
- **App Store**: App Store distribution optimization
|
||||
- **TestFlight**: Beta testing integration
|
||||
- **Enterprise Distribution**: Enterprise app distribution
|
||||
- **Universal Links**: Deep linking support
|
||||
|
||||
## Current Status
|
||||
|
||||
### ✅ Phase 1: Foundation (Complete)
|
||||
- [x] Create `build-ios.sh` script
|
||||
- [x] Implement basic build functionality
|
||||
- [x] Add environment management
|
||||
- [x] Integrate with package.json
|
||||
|
||||
### ✅ Phase 2: Advanced Features (Complete)
|
||||
- [x] Add Xcode integration
|
||||
- [x] Implement asset generation
|
||||
- [x] Add simulator support
|
||||
- [x] Add device deployment
|
||||
|
||||
### ✅ Phase 3: Optimization (Complete)
|
||||
- [x] Performance optimization
|
||||
- [x] Error handling improvements
|
||||
- [x] Documentation completion
|
||||
- [x] Testing and validation
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2025-07-11
|
||||
**Version**: 1.0.3-beta
|
||||
**Status**: Production Ready
|
||||
164
docs/build-system/platforms/ios-simulator-build-and-icons.md
Normal file
164
docs/build-system/platforms/ios-simulator-build-and-icons.md
Normal file
@@ -0,0 +1,164 @@
|
||||
# iOS Simulator Build and App Icon Troubleshooting
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-12
|
||||
**Status**: 🎯 **ACTIVE** - In Use
|
||||
|
||||
## Overview
|
||||
|
||||
This guide documents how to build and run the TimeSafari iOS app in the
|
||||
simulator, and how to resolve common issues with iOS app icons and
|
||||
`AppIcon.appiconset` errors.
|
||||
|
||||
---
|
||||
|
||||
## Building and Running the iOS App in Simulator
|
||||
|
||||
### 1. Build the App
|
||||
|
||||
Use the npm script to build for development (debug/simulator):
|
||||
|
||||
```bash
|
||||
npm run build:ios:dev
|
||||
```
|
||||
|
||||
This prepares the iOS project for simulator deployment.
|
||||
|
||||
### 2. Run in Simulator
|
||||
|
||||
Use Capacitor to launch the app in the iOS Simulator:
|
||||
|
||||
```bash
|
||||
npx cap run ios
|
||||
```
|
||||
|
||||
This will:
|
||||
- Sync web assets
|
||||
- Build the native iOS app
|
||||
- Launch the iOS Simulator
|
||||
- Install and run the app
|
||||
|
||||
### 3. Open in Xcode (Optional)
|
||||
|
||||
To open the project in Xcode for manual simulator/device control:
|
||||
|
||||
```bash
|
||||
npm run build:ios:dev -- --studio
|
||||
```
|
||||
|
||||
Or:
|
||||
|
||||
```bash
|
||||
npx cap open ios
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Common App Icon and AppIcon.appiconset Errors
|
||||
|
||||
### Typical Error Message
|
||||
|
||||
```
|
||||
error: None of the input catalogs contained a matching stickers icon set or app
|
||||
icon set named "AppIcon".
|
||||
```
|
||||
|
||||
### Why This Happens
|
||||
|
||||
- The iOS build expects an `AppIcon.appiconset` in
|
||||
`ios/App/App/Assets.xcassets/`.
|
||||
- If missing or incomplete, the build fails.
|
||||
- The icon generator may also fail if the source icon is missing or invalid.
|
||||
|
||||
### Typical Causes
|
||||
|
||||
- No `AppIcon.appiconset` directory
|
||||
- No or invalid `Contents.json` in the icon set
|
||||
- Missing or corrupt `icon.png` in `assets/`
|
||||
- Generator tool errors (permissions, path, or file type)
|
||||
|
||||
---
|
||||
|
||||
## Step-by-Step: Generating iOS App Icons
|
||||
|
||||
### 1. Automatic Generation (Preferred)
|
||||
|
||||
- Place a valid PNG icon (at least 1024x1024) at `assets/icon.png`.
|
||||
- Run:
|
||||
|
||||
```bash
|
||||
npx capacitor-assets generate --ios
|
||||
```
|
||||
|
||||
- This should create `ios/App/App/Assets.xcassets/AppIcon.appiconset/` with all
|
||||
required icon sizes and a `Contents.json`.
|
||||
|
||||
#### Troubleshooting Automatic Generation
|
||||
|
||||
- If you see errors about missing directories, create them manually:
|
||||
|
||||
```bash
|
||||
mkdir -p ios/App/App/Assets.xcassets/AppIcon.appiconset
|
||||
```
|
||||
|
||||
- If you see errors about file type, ensure `icon.png` is a real PNG (not SVG).
|
||||
- If the generator fails with a TypeError, check for missing or corrupt files.
|
||||
|
||||
### 2. Manual Generation (Fallback)
|
||||
|
||||
- Use an online tool like [appicon.co](https://appicon.co/) to generate iOS
|
||||
icons from your `icon.png`.
|
||||
- Download and extract the zip.
|
||||
- Copy the contents into:
|
||||
|
||||
```
|
||||
ios/App/App/Assets.xcassets/AppIcon.appiconset/
|
||||
```
|
||||
|
||||
- Ensure the `Contents.json` is present and valid.
|
||||
|
||||
---
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
ios/App/App/Assets.xcassets/
|
||||
└── AppIcon.appiconset/
|
||||
├── Contents.json
|
||||
├── AppIcon-20x20@2x.png
|
||||
├── AppIcon-20x20@3x.png
|
||||
├── ...
|
||||
└── AppIcon-1024x1024@1x.png
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting Checklist
|
||||
|
||||
- [ ] Is `assets/icon.png` present and a valid PNG?
|
||||
- [ ] Does `AppIcon.appiconset` exist in `Assets.xcassets`?
|
||||
- [ ] Is `Contents.json` present and correct?
|
||||
- [ ] Are all required icon PNGs present?
|
||||
- [ ] If using the generator, did it complete without errors?
|
||||
- [ ] If manual, did you copy all files from the zip?
|
||||
|
||||
---
|
||||
|
||||
## iOS Build Troubleshooting
|
||||
|
||||
- If the build fails with icon errors, fix the icon set and rebuild.
|
||||
- If the simulator does not launch, try running:
|
||||
|
||||
```bash
|
||||
npx cap open ios
|
||||
```
|
||||
|
||||
and launch from Xcode.
|
||||
|
||||
- For other build errors, check the logs for missing files or permissions.
|
||||
|
||||
---
|
||||
|
||||
**Status**: In Use
|
||||
**Last Updated**: 2025-07-12
|
||||
**Maintainer**: Matthew Raymer
|
||||
535
docs/build-system/platforms/web-build-scripts.md
Normal file
535
docs/build-system/platforms/web-build-scripts.md
Normal file
@@ -0,0 +1,535 @@
|
||||
# Web Build Scripts Documentation
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Date**: 2025-07-11
|
||||
**Status**: ✅ **COMPLETE** - Full web build system with PWA and Docker support
|
||||
|
||||
## Overview
|
||||
|
||||
The web build system for TimeSafari provides comprehensive support for web application development, PWA functionality, and containerized deployment. It supports development, testing, and production environments with optimized builds for each use case.
|
||||
|
||||
## Build Script Integration
|
||||
|
||||
### Package.json Scripts
|
||||
|
||||
The web build system is fully integrated into `package.json` with the following scripts:
|
||||
|
||||
#### Basic Build Commands
|
||||
|
||||
```bash
|
||||
# Development (starts dev server)
|
||||
npm run build:web:dev # Development server with hot reload
|
||||
|
||||
# Production builds
|
||||
npm run build:web:test # Testing environment build
|
||||
npm run build:web:prod # Production environment build
|
||||
```
|
||||
|
||||
#### Docker Integration
|
||||
|
||||
```bash
|
||||
# Docker builds
|
||||
npm run build:web:docker # Development + Docker
|
||||
npm run build:web:docker:test # Testing + Docker
|
||||
npm run build:web:docker:prod # Production + Docker
|
||||
```
|
||||
|
||||
#### Utility Commands
|
||||
|
||||
```bash
|
||||
# Serve built files locally
|
||||
npm run build:web:serve # Build and serve locally
|
||||
|
||||
# Legacy command (maintains compatibility)
|
||||
npm run build:web # Full build process
|
||||
```
|
||||
|
||||
## Script Usage
|
||||
|
||||
### Direct Script Usage
|
||||
|
||||
The `build-web.sh` script supports comprehensive command-line options:
|
||||
|
||||
```bash
|
||||
# Basic usage
|
||||
./scripts/build-web.sh [options]
|
||||
|
||||
# Environment-specific builds
|
||||
./scripts/build-web.sh --dev # Development server
|
||||
./scripts/build-web.sh --test # Testing build
|
||||
./scripts/build-web.sh --prod # Production build
|
||||
|
||||
# Docker integration
|
||||
./scripts/build-web.sh --docker # Development + Docker
|
||||
./scripts/build-web.sh --docker:test # Testing + Docker
|
||||
./scripts/build-web.sh --docker:prod # Production + Docker
|
||||
|
||||
# Local serving
|
||||
./scripts/build-web.sh --serve # Build and serve locally
|
||||
```
|
||||
|
||||
### Command-Line Options
|
||||
|
||||
| Option | Description | Default |
|
||||
|--------|-------------|---------|
|
||||
| `--dev`, `--development` | Development mode (starts dev server) | ✅ |
|
||||
| `--test` | Testing environment build | |
|
||||
| `--prod`, `--production` | Production environment build | |
|
||||
| `--docker` | Build and create Docker image | |
|
||||
| `--docker:test` | Testing environment + Docker | |
|
||||
| `--docker:prod` | Production environment + Docker | |
|
||||
| `--serve` | Build and serve locally | |
|
||||
| `-h`, `--help` | Show help message | |
|
||||
| `-v`, `--verbose` | Enable verbose logging | |
|
||||
|
||||
## Build Process
|
||||
|
||||
### Development Mode Flow
|
||||
|
||||
1. **Environment Setup**: Load development environment variables
|
||||
2. **Validation**: Check for required dependencies
|
||||
3. **Server Start**: Start Vite development server
|
||||
4. **Hot Reload**: Enable live reload and HMR
|
||||
5. **PWA Setup**: Configure PWA for development
|
||||
|
||||
### Production Mode Flow
|
||||
|
||||
1. **Environment Setup**: Load production environment variables
|
||||
2. **Cleanup**: Clean previous build artifacts
|
||||
3. **Asset Optimization**: Optimize images and code
|
||||
4. **Build Process**: Run Vite production build
|
||||
5. **PWA Generation**: Generate service worker and manifest
|
||||
6. **Output**: Create optimized static files
|
||||
|
||||
### Docker Mode Flow
|
||||
|
||||
1. **Build Process**: Run production build
|
||||
2. **Docker Build**: Create Docker image
|
||||
3. **Image Tagging**: Tag with environment and version
|
||||
4. **Output**: Ready-to-deploy container
|
||||
|
||||
## Environment Management
|
||||
|
||||
### Environment Variables
|
||||
|
||||
The web build system automatically sets environment variables:
|
||||
|
||||
```bash
|
||||
# Platform configuration
|
||||
VITE_PLATFORM=web
|
||||
VITE_PWA_ENABLED=true
|
||||
VITE_DISABLE_PWA=false
|
||||
|
||||
# Build information
|
||||
VITE_GIT_HASH=<git-commit-hash>
|
||||
DEBUG_MIGRATIONS=0
|
||||
```
|
||||
|
||||
### Environment Files
|
||||
|
||||
```bash
|
||||
.env.development # Development environment
|
||||
.env.test # Testing environment
|
||||
.env.production # Production environment
|
||||
```
|
||||
|
||||
### Mode-Specific Configuration
|
||||
|
||||
#### Development Mode
|
||||
```bash
|
||||
# Uses .env.development
|
||||
VITE_DEFAULT_ENDORSER_API_SERVER=http://127.0.0.1:3000
|
||||
VITE_PWA_ENABLED=true
|
||||
```
|
||||
|
||||
#### Test Mode
|
||||
```bash
|
||||
# Uses .env.test
|
||||
VITE_DEFAULT_ENDORSER_API_SERVER=https://test-api.timesafari.org
|
||||
VITE_PWA_ENABLED=true
|
||||
```
|
||||
|
||||
#### Production Mode
|
||||
```bash
|
||||
# Uses .env.production
|
||||
VITE_DEFAULT_ENDORSER_API_SERVER=https://api.timesafari.org
|
||||
VITE_PWA_ENABLED=true
|
||||
```
|
||||
|
||||
## PWA (Progressive Web App) Features
|
||||
|
||||
### PWA Configuration
|
||||
|
||||
TimeSafari implements comprehensive PWA functionality across all environments:
|
||||
|
||||
#### ✅ **Development Mode PWA**
|
||||
- Service worker registration active
|
||||
- Manifest generation enabled
|
||||
- Hot reload compatible
|
||||
- Development testing of PWA features
|
||||
|
||||
#### ✅ **Test Mode PWA**
|
||||
- Full PWA feature testing
|
||||
- Service worker registration active
|
||||
- Manifest generation enabled
|
||||
- QA testing of PWA functionality
|
||||
|
||||
#### ✅ **Production Mode PWA**
|
||||
- Full caching strategies
|
||||
- Service worker registration active
|
||||
- Manifest generation enabled
|
||||
- Runtime caching for API calls
|
||||
- Optimized for production performance
|
||||
|
||||
### PWA Assets Generated
|
||||
|
||||
```bash
|
||||
dist/
|
||||
├── manifest.webmanifest # PWA manifest with app metadata
|
||||
├── sw.js # Service worker for offline functionality
|
||||
├── workbox-*.js # Workbox library for caching strategies
|
||||
└── assets/
|
||||
├── icons/ # PWA icons in various sizes
|
||||
└── splash/ # Splash screen images
|
||||
```
|
||||
|
||||
### PWA Features
|
||||
|
||||
- **Offline Support**: Service worker caches essential resources
|
||||
- **App Installation**: Browser install prompts
|
||||
- **Share Target**: Image sharing integration
|
||||
- **Background Sync**: Offline data synchronization
|
||||
- **Push Notifications**: Web push notification support
|
||||
|
||||
### PWA Manifest
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "TimeSafari",
|
||||
"short_name": "TimeSafari",
|
||||
"description": "Crowd-Funder for Time",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#ffffff",
|
||||
"theme_color": "#4f46e5",
|
||||
"icons": [
|
||||
{
|
||||
"src": "assets/icons/icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Docker Integration
|
||||
|
||||
### Docker Build Process
|
||||
|
||||
The web build system includes comprehensive Docker support:
|
||||
|
||||
```bash
|
||||
# Development Docker
|
||||
./scripts/build-web.sh --docker
|
||||
|
||||
# Testing Docker
|
||||
./scripts/build-web.sh --docker:test
|
||||
|
||||
# Production Docker
|
||||
./scripts/build-web.sh --docker:prod
|
||||
```
|
||||
|
||||
### Docker Features
|
||||
|
||||
- **Automatic Image Tagging**: `timesafari-web:mode`
|
||||
- **Build Argument Passing**: Environment-specific configurations
|
||||
- **Multi-Stage Builds**: Optimized production images
|
||||
- **Health Checks**: Container health monitoring
|
||||
- **Security Scanning**: Vulnerability assessment
|
||||
|
||||
### Docker Output
|
||||
|
||||
```bash
|
||||
# Generated Docker images
|
||||
timesafari-web:development
|
||||
timesafari-web:test
|
||||
timesafari-web:production
|
||||
```
|
||||
|
||||
### Docker Usage
|
||||
|
||||
```bash
|
||||
# Run development container
|
||||
docker run -p 8080:80 timesafari-web:development
|
||||
|
||||
# Run production container
|
||||
docker run -p 8080:80 timesafari-web:production
|
||||
|
||||
# Deploy to container registry
|
||||
docker push timesafari-web:production
|
||||
```
|
||||
|
||||
## Build Artifacts
|
||||
|
||||
### Development Mode
|
||||
|
||||
- **No files created**: Runs development server directly
|
||||
- **Server URL**: http://localhost:8080
|
||||
- **Hot Reload**: Enabled with Vite HMR
|
||||
- **Source Maps**: Enabled for debugging
|
||||
|
||||
### Production Mode
|
||||
|
||||
```bash
|
||||
dist/
|
||||
├── index.html # Main HTML file
|
||||
├── manifest.webmanifest # PWA manifest
|
||||
├── sw.js # Service worker
|
||||
├── workbox-*.js # Workbox library
|
||||
└── assets/
|
||||
├── index-*.js # Main application bundle
|
||||
├── index-*.css # Stylesheet bundle
|
||||
├── icons/ # PWA icons
|
||||
└── images/ # Optimized images
|
||||
```
|
||||
|
||||
### File Sizes (Typical)
|
||||
|
||||
| File Type | Development | Production | Gzipped |
|
||||
|-----------|-------------|------------|---------|
|
||||
| **Main Bundle** | 2.1MB | 850KB | 250KB |
|
||||
| **CSS Bundle** | 180KB | 45KB | 12KB |
|
||||
| **PWA Assets** | 50KB | 50KB | 15KB |
|
||||
| **Total** | 2.3MB | 945KB | 277KB |
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### Build Optimizations
|
||||
|
||||
- **Code Splitting**: Automatic route-based splitting
|
||||
- **Tree Shaking**: Unused code elimination
|
||||
- **Minification**: JavaScript and CSS compression
|
||||
- **Asset Optimization**: Image compression and optimization
|
||||
- **Caching**: Long-term caching for static assets
|
||||
|
||||
### Runtime Optimizations
|
||||
|
||||
- **Service Worker**: Offline caching and background sync
|
||||
- **Lazy Loading**: Component and route lazy loading
|
||||
- **Preloading**: Critical resource preloading
|
||||
- **Compression**: Gzip/Brotli compression support
|
||||
|
||||
### Performance Metrics
|
||||
|
||||
```bash
|
||||
# Development startup time
|
||||
~350ms (Vite dev server)
|
||||
|
||||
# Production build time
|
||||
~8s (full build)
|
||||
~2s (incremental build)
|
||||
|
||||
# Production bundle size
|
||||
~945KB (total)
|
||||
~277KB (gzipped)
|
||||
```
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### Daily Development
|
||||
|
||||
```bash
|
||||
# Start development server
|
||||
npm run build:web:dev
|
||||
|
||||
# Access at http://localhost:8080
|
||||
# Hot reload enabled
|
||||
# PWA features available
|
||||
```
|
||||
|
||||
### Testing Workflow
|
||||
|
||||
```bash
|
||||
# Build for testing
|
||||
npm run build:web:test
|
||||
|
||||
# Test PWA functionality
|
||||
# Verify offline support
|
||||
# Test app installation
|
||||
```
|
||||
|
||||
### Production Workflow
|
||||
|
||||
```bash
|
||||
# Build for production
|
||||
npm run build:web:prod
|
||||
|
||||
# Deploy to web server
|
||||
# Or create Docker image
|
||||
npm run build:web:docker:prod
|
||||
```
|
||||
|
||||
## Local Development Server
|
||||
|
||||
### Development Server Features
|
||||
|
||||
- **Hot Module Replacement**: Instant updates without page refresh
|
||||
- **Fast Refresh**: React-style fast refresh for Vue components
|
||||
- **Source Maps**: Full debugging support
|
||||
- **PWA Support**: Service worker and manifest in development
|
||||
- **Error Overlay**: In-browser error reporting
|
||||
|
||||
### Server Configuration
|
||||
|
||||
```bash
|
||||
# Development server settings
|
||||
Port: 8080
|
||||
Host: localhost
|
||||
Protocol: http
|
||||
HMR: enabled
|
||||
Source Maps: enabled
|
||||
PWA: enabled
|
||||
```
|
||||
|
||||
### Accessing the Server
|
||||
|
||||
```bash
|
||||
# Local development
|
||||
http://localhost:8080
|
||||
|
||||
# Network access (if needed)
|
||||
http://0.0.0.0:8080
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
#### Build Failures
|
||||
```bash
|
||||
# Clean build artifacts
|
||||
rm -rf dist/
|
||||
|
||||
# Reinstall dependencies
|
||||
npm install
|
||||
|
||||
# Rebuild
|
||||
npm run build:web:prod
|
||||
```
|
||||
|
||||
#### Development Server Issues
|
||||
```bash
|
||||
# Check port availability
|
||||
lsof -i :8080
|
||||
|
||||
# Kill existing process
|
||||
kill -9 <PID>
|
||||
|
||||
# Restart server
|
||||
npm run build:web:dev
|
||||
```
|
||||
|
||||
#### PWA Issues
|
||||
```bash
|
||||
# Clear service worker
|
||||
# In browser DevTools > Application > Service Workers
|
||||
# Click "Unregister"
|
||||
|
||||
# Clear browser cache
|
||||
# In browser DevTools > Application > Storage
|
||||
# Click "Clear site data"
|
||||
```
|
||||
|
||||
### Debug Mode
|
||||
|
||||
Enable verbose logging for web builds:
|
||||
|
||||
```bash
|
||||
# Verbose mode
|
||||
./scripts/build-web.sh --verbose
|
||||
|
||||
# Debug environment
|
||||
DEBUG_MIGRATIONS=1 npm run build:web:dev
|
||||
```
|
||||
|
||||
### Performance Debugging
|
||||
|
||||
```bash
|
||||
# Analyze bundle size
|
||||
npm run build:web:prod
|
||||
# Check dist/ directory for file sizes
|
||||
|
||||
# Analyze performance
|
||||
# Use browser DevTools > Performance tab
|
||||
# Use Lighthouse for PWA metrics
|
||||
```
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Build Security
|
||||
|
||||
- **Environment Isolation**: Separate dev/test/prod environments
|
||||
- **Secret Management**: Secure handling of API keys
|
||||
- **Dependency Scanning**: Regular security audits
|
||||
- **Content Security Policy**: CSP headers for security
|
||||
|
||||
### Runtime Security
|
||||
|
||||
- **HTTPS Only**: Production requires HTTPS
|
||||
- **CSP Headers**: Content Security Policy enforcement
|
||||
- **Service Worker Security**: Secure service worker implementation
|
||||
- **API Security**: Secure API communication
|
||||
|
||||
## Deployment Options
|
||||
|
||||
### Static Hosting
|
||||
|
||||
```bash
|
||||
# Build for production
|
||||
npm run build:web:prod
|
||||
|
||||
# Deploy to static host
|
||||
# Upload dist/ directory to web server
|
||||
```
|
||||
|
||||
### Docker Deployment
|
||||
|
||||
```bash
|
||||
# Build Docker image
|
||||
npm run build:web:docker:prod
|
||||
|
||||
# Deploy to container platform
|
||||
docker run -p 80:80 timesafari-web:production
|
||||
```
|
||||
|
||||
### CDN Deployment
|
||||
|
||||
```bash
|
||||
# Build for production
|
||||
npm run build:web:prod
|
||||
|
||||
# Upload to CDN
|
||||
# Configure CDN for PWA support
|
||||
```
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
### Planned Improvements
|
||||
|
||||
- **Advanced Caching**: Intelligent caching strategies
|
||||
- **Performance Monitoring**: Real-time performance tracking
|
||||
- **A/B Testing**: Feature flag support
|
||||
- **Analytics Integration**: User behavior tracking
|
||||
|
||||
### PWA Enhancements
|
||||
|
||||
- **Background Sync**: Enhanced offline synchronization
|
||||
- **Push Notifications**: Advanced notification features
|
||||
- **App Shortcuts**: Quick action shortcuts
|
||||
- **File Handling**: Native file integration
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2025-07-11
|
||||
**Version**: 1.0.3-beta
|
||||
**Status**: Production Ready
|
||||
Reference in New Issue
Block a user