From ff3901c7961d0485b206db5d6fb356914c007909 Mon Sep 17 00:00:00 2001 From: Matthew Raymer Date: Tue, 29 Jul 2025 04:52:37 +0000 Subject: [PATCH] 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 --- .../platforms/web-build-scripts.md | 52 ++++++++++++++++++- package.json | 1 + scripts/build-web.sh | 33 ++++++++++-- 3 files changed, 81 insertions(+), 5 deletions(-) diff --git a/docs/build-system/platforms/web-build-scripts.md b/docs/build-system/platforms/web-build-scripts.md index 7d5dc672..e5a2c597 100644 --- a/docs/build-system/platforms/web-build-scripts.md +++ b/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 diff --git a/package.json b/package.json index 97c49f85..f41da81d 100644 --- a/package.json +++ b/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", diff --git a/scripts/build-web.sh b/scripts/build-web.sh index 360e7aec..2d09f281 100755 --- a/scripts/build-web.sh +++ b/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"