@ -20,6 +20,9 @@ The web build system is fully integrated into `package.json` with the following
# Development (starts dev server)
# Development (starts dev server)
npm run build:web:dev # Development server with hot reload
npm run build:web:dev # Development server with hot reload
# Development build to dist (no HMR)
npm run build:web:dev:dist # Development configuration built to dist folder
# Production builds
# Production builds
npm run build:web:test # Testing environment build
npm run build:web:test # Testing environment build
npm run build:web:prod # Production environment build
npm run build:web:prod # Production environment build
@ -56,6 +59,7 @@ The `build-web.sh` script supports comprehensive command-line options:
# Environment-specific builds
# Environment-specific builds
./scripts/build-web.sh --dev # Development server
./scripts/build-web.sh --dev # Development server
./scripts/build-web.sh --dev --build-dev-to-dist # Development build to dist
./scripts/build-web.sh --test # Testing build
./scripts/build-web.sh --test # Testing build
./scripts/build-web.sh --prod # Production build
./scripts/build-web.sh --prod # Production build
@ -73,6 +77,7 @@ The `build-web.sh` script supports comprehensive command-line options:
| Option | Description | Default |
| Option | Description | Default |
|--------|-------------|---------|
|--------|-------------|---------|
| `--dev` , `--development` | Development mode (starts dev server) | ✅ |
| `--dev` , `--development` | Development mode (starts dev server) | ✅ |
| `--build-dev-to-dist` | Build development configuration to dist folder | |
| `--test` | Testing environment build | |
| `--test` | Testing environment build | |
| `--prod` , `--production` | Production environment build | |
| `--prod` , `--production` | Production environment build | |
| `--docker` | Build and create Docker image | |
| `--docker` | Build and create Docker image | |
@ -92,6 +97,14 @@ The `build-web.sh` script supports comprehensive command-line options:
4. **Hot Reload** : Enable live reload and HMR
4. **Hot Reload** : Enable live reload and HMR
5. **PWA Setup** : Configure PWA for development
5. **PWA Setup** : Configure PWA for development
### Development Build to Dist Flow
1. **Environment Setup** : Load development environment variables
2. **Validation** : Check for required dependencies
3. **Build Process** : Run Vite build with development configuration
4. **Output** : Create static files in dist folder with development settings
5. **No HMR** : No development server started
### Production Mode Flow
### Production Mode Flow
1. **Environment Setup** : Load production environment variables
1. **Environment Setup** : Load production environment variables
@ -278,7 +291,30 @@ docker push timesafari-web:production
- **Hot Reload** : Enabled with Vite HMR
- **Hot Reload** : Enabled with Vite HMR
- **Source Maps** : Enabled for debugging
- **Source Maps** : Enabled for debugging
### Production Mode
### Development Build to Dist
```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 (development config)
├── index-*.css # Stylesheet bundle (development config)
├── icons/ # PWA icons
└── images/ # Optimized images
```
**Features**:
- Development environment variables
- Source maps enabled
- No minification
- PWA enabled for testing
- No HMR server running
### Production Mode File Structure
```bash
```bash
dist/
dist/
@ -347,6 +383,20 @@ npm run build:web:dev
# PWA features available
# PWA features available
```
```
### Development Build Workflow
```bash
# Build development configuration to dist
npm run build:web:dev:dist
# Serve the development build locally
npm run build:web:serve
# Access at http://localhost:8080
# No hot reload, but development configuration
# Useful for testing development settings without HMR
```
### Testing Workflow
### Testing Workflow
```bash
```bash