feat: add development build to dist without HMR

Add new build option `npm run build:web:dev:dist` that creates development
configuration build in dist folder without starting HMR server. This enables
testing development settings in static environments and CI/CD pipelines.

Use cases:
- Test development configuration without dev server overhead
- Deploy development builds to static hosting services
- CI/CD pipelines requiring development environment variables
- Performance testing with development settings
- Debugging production-like builds with source maps enabled

Changes:
- Add --build-dev-to-dist flag to build-web.sh script
- Create npm script build:web:dev:dist for easy access
- Update documentation with new workflow and examples
- Maintain development environment variables and source maps
- Include PWA support for testing in static builds
This commit is contained in:
Matthew Raymer
2025-07-29 04:52:37 +00:00
parent e789e9dfb2
commit ff3901c796
3 changed files with 81 additions and 5 deletions

View File

@@ -20,6 +20,9 @@ The web build system is fully integrated into `package.json` with the following
# Development (starts dev server)
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
npm run build:web:test # Testing 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
./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 --prod # Production build
@@ -73,6 +77,7 @@ The `build-web.sh` script supports comprehensive command-line options:
| Option | Description | Default |
|--------|-------------|---------|
| `--dev`, `--development` | Development mode (starts dev server) | ✅ |
| `--build-dev-to-dist` | Build development configuration to dist folder | |
| `--test` | Testing environment build | |
| `--prod`, `--production` | Production environment build | |
| `--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
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
1. **Environment Setup**: Load production environment variables
@@ -278,7 +291,30 @@ docker push timesafari-web:production
- **Hot Reload**: Enabled with Vite HMR
- **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
dist/
@@ -347,6 +383,20 @@ npm run build:web:dev
# 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
```bash