@ -2,7 +2,7 @@
**Author**: Matthew Raymer
**Date**: 2025-07-09
**Status**: 🎯 **PLANNING** - Ready for Implementation
**Status**: **PLANNING** - Ready for Implementation
## Overview
@ -12,7 +12,7 @@ management and consistency across all build targets.
## Why Vite Mode Instead of NODE_ENV?
### ✅ Vite's Native Mode System
### Vite's Native Mode System
Vite is designed to work with `mode` , which:
@ -21,7 +21,7 @@ Vite is designed to work with `mode`, which:
- Is used to set behavior for dev/prod/test at config level
- Provides better integration with Vite's build system
### 🚫 NODE_ENV Limitations
### NODE_ENV Limitations
`NODE_ENV` is legacy from Webpack-era tooling:
@ -33,23 +33,25 @@ Vite is designed to work with `mode`, which:
### Usage Pattern
```bash
# ✅ Correct: Use Vite's mode system
# Correct: Use Vite's mode system
vite build --mode production
vite build --mode development
vite build --mode test
# ⚠️ Only if third-party libraries require NODE_ENV
# Only if third-party libraries require NODE_ENV
NODE_ENV=production vite build --mode production
```
### Development vs Build Environments
**Development Environment:**
- **Build with defaults** : `npm run build:*` - Uses `--mode development` by default
- **Purpose** : Development builds for testing and debugging
- **Output** : Bundled files with development optimizations
**Testing/Production Environments:**
- **Build with explicit mode** : `npm run build:* -- --mode test/production`
- **Purpose** : Validate and deploy the bundled application
- **Output** : Optimized, bundled files for specific environment
@ -76,6 +78,7 @@ npm run build:electron -- --mode production
```
**Key Points:**
- Base scripts have **no hardcoded `--mode`** to allow override
- `npm run build:electron` defaults to `--mode development`
- `npm run build:electron -- --mode test` overrides to `--mode test`
@ -98,6 +101,36 @@ npm run build:capacitor -- --mode production && npx cap sync android
npm run build:capacitor -- --mode development & & npx cap sync ios
```
### Docker Build Commands
Docker builds include both Vite asset generation and Docker image creation:
```bash
# General Docker build (Vite build + Docker image)
npm run build:web:docker
# Environment-specific Docker builds
npm run build:web:docker:test # Test environment + Docker image
npm run build:web:docker:prod # Production environment + Docker image
# Manual mode overrides for Docker builds
npm run build:web:docker -- --mode test
npm run build:web:docker -- --mode production
```
**Docker Build Process:**
1. **Vite Build** : Creates optimized web assets with environment-specific variables
2. **Docker Build** : Creates Docker image using `Dockerfile` in project root
3. **Image Tagging** : Images are tagged as `timesafari-web` for consistent management
**Key Features:**
- Complete end-to-end Docker workflow in single command
- Environment-aware builds (test/production configurations)
- Consistent image tagging for deployment
- Mode override flexibility for custom environments
### Electron Platform-Specific Commands
Electron requires platform-specific build commands after the Vite build:
@ -189,8 +222,12 @@ npm run build:capacitor -- --mode production && npx cap sync
npm run build:electron -- --mode production
# Docker builds
npm run build:web-docker -- --mode test
npm run build:web-docker -- --mode production
npm run build:web:docker -- --mode test
npm run build:web:docker -- --mode production
# Docker environment-specific builds
npm run build:web:docker:test
npm run build:web:docker:prod
# Capacitor platform-specific builds
npm run build:capacitor:android -- --mode test
@ -221,11 +258,12 @@ npm run build:electron:dmg -- --mode production
```json
{
"build:web": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.web.mts",
"build:web": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite --mode development --config vite.config.web.mts",
"build:web:dev": "npm run build:web",
"build:web:test": "npm run build:web -- --mode test",
"build:web:prod": "npm run build:web -- --mode production"
"build:web:docker": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.web.mts",
"build:web:build": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --mode development --config vite.config.web.mts",
"build:web:test": "npm run build:web:build -- --mode test",
"build:web:prod": "npm run build:web:build -- --mode production",
"build:web:docker": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.web.mts & & docker build -t timesafari-web .",
"build:web:docker:test": "npm run build:web:docker -- --mode test",
"build:web:docker:prod": "npm run build:web:docker -- --mode production",
@ -235,7 +273,7 @@ npm run build:electron:dmg -- --mode production
"build:capacitor:android": "npm run build:capacitor:sync & & npx cap sync android",
"build:capacitor:ios": "npm run build:capacitor:sync & & npx cap sync ios",
"build:electron": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.electron.mts",
"build:electron": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.electron.mts",
"build:electron:dev": "npm run build:electron & & cd electron & & npm run electron:start",
"build:electron:windows": "npm run build:electron & & cd electron & & npm run build:windows",
"build:electron:mac": "npm run build:electron & & cd electron & & npm run build:mac",
@ -348,12 +386,19 @@ export default defineConfig(({ mode }) => {
```json
{
"build:web- docker": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.web.mts",
"build:web-docker-test": "npm run build:web- docker -- --mode test",
"build:web-docker-prod": "npm run build:web- docker -- --mode production"
"build:web: docker": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build --config vite.config.web.mts & & docker build -t timesafari-web . ",
"build:web:docker:test": "npm run build:web: docker -- --mode test",
"build:web:docker:prod": "npm run build:web: docker -- --mode production"
}
```
**Docker Build Features:**
- Complete Vite build + Docker image creation workflow
- Environment-specific configurations (test/production)
- Consistent image tagging (`timesafari-web`)
- Mode override flexibility for custom environments
### Phase 3: Shell Script Updates (Day 2)
#### 3.1 Update build-electron.sh
@ -418,6 +463,8 @@ export default defineConfig(({ mode }) => {
- [ ] Test electron appimage builds across environments
- [ ] Test electron dmg builds across environments
- [ ] Test docker builds across environments
- [ ] Test docker image creation and tagging
- [ ] Test docker environment-specific configurations
#### 5.3 Integration Testing