Compare commits

...

1 Commits

Author SHA1 Message Date
Matthew Raymer ff3901c796 feat: add development build to dist without HMR 3 weeks ago
  1. 52
      docs/build-system/platforms/web-build-scripts.md
  2. 1
      package.json
  3. 33
      scripts/build-web.sh

52
docs/build-system/platforms/web-build-scripts.md

@ -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

1
package.json

@ -42,6 +42,7 @@
"build:ios:deploy": "./scripts/build-ios.sh --deploy",
"build:web": "./scripts/build-web.sh",
"build:web:dev": "./scripts/build-web.sh --dev",
"build:web:dev:dist": "./scripts/build-web.sh --dev --build-dev-to-dist",
"build:web:test": "./scripts/build-web.sh --test",
"build:web:prod": "./scripts/build-web.sh --prod",
"build:web:docker": "./scripts/build-web.sh --docker",

33
scripts/build-web.sh

@ -44,6 +44,7 @@ BUILD_MODE="development"
BUILD_ACTION="build"
DOCKER_BUILD=false
SERVE_BUILD=false
BUILD_DEV_TO_DIST=false
# Function to show usage
show_usage() {
@ -61,6 +62,7 @@ OPTIONS:
--help Show this help message
--verbose Enable verbose logging
--env Show environment variables
--build-dev-to-dist Build development configuration to dist folder
EXAMPLES:
$0 # Development build
@ -70,6 +72,7 @@ EXAMPLES:
$0 --docker:test # Test + Docker
$0 --docker:prod # Production + Docker
$0 --serve # Build and serve
$0 --build-dev-to-dist # Build development configuration to dist folder
BUILD MODES:
development: Starts Vite development server with hot reload (default)
@ -125,6 +128,10 @@ parse_web_args() {
print_env_vars "VITE_"
exit 0
;;
--build-dev-to-dist)
BUILD_DEV_TO_DIST=true
shift
;;
*)
log_warn "Unknown option: $1"
shift
@ -321,10 +328,28 @@ setup_web_environment
# Handle different build modes
if [ "$BUILD_MODE" = "development" ] && [ "$DOCKER_BUILD" = false ] && [ "$SERVE_BUILD" = false ]; then
# Development mode: Start dev server
log_info "Development mode detected - starting development server"
start_dev_server
# Note: start_dev_server doesn't return, it runs the server
# Check if we want to build development to dist instead of starting dev server
if [ "$BUILD_DEV_TO_DIST" = true ]; then
# Development build mode: Build to dist with development configuration
log_info "Development build mode detected - building to dist with development configuration"
# Step 1: Clean dist directory
log_info "Cleaning dist directory..."
clean_build_artifacts "dist"
# Step 2: Execute Vite build with development configuration
safe_execute "Vite development build" "execute_vite_build development" || exit 3
log_success "Development build completed successfully!"
log_info "Development build output available in: dist/"
print_footer "Web Development Build"
exit 0
else
# Development mode: Start dev server
log_info "Development mode detected - starting development server"
start_dev_server
# Note: start_dev_server doesn't return, it runs the server
fi
elif [ "$SERVE_BUILD" = true ]; then
# Serve mode: Build then serve
log_info "Serve mode detected - building then serving"

Loading…
Cancel
Save