forked from trent_larson/crowd-funder-for-time-pwa
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user