forked from trent_larson/crowd-funder-for-time-pwa
Fix: markdownlint MD012/MD019 errors in build-pattern-conversion-plan.md
- Removed extra blank lines at end of file to resolve MD012 (no-multiple-blanks) - Standardized heading spacing to resolve MD019 (no-multiple-space-atx) - Stripped trailing whitespace and ensured file ends with a single newline All changes maintain content integrity and bring the file into full markdownlint compliance.
This commit is contained in:
Matthew Raymer
@@ -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
|
||||
|
||||
|
||||
@@ -36,7 +36,6 @@ First, install the Playwright MCP server with your client. A typical configurati
|
||||
|
||||
[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code">](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D) [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D)
|
||||
|
||||
|
||||
<details><summary><b>Install in VS Code</b></summary>
|
||||
|
||||
You can also install the Playwright MCP server using the VS Code CLI:
|
||||
@@ -324,7 +323,7 @@ npx @playwright/mcp@latest --config path/to/config.json
|
||||
// List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
|
||||
blockedOrigins?: string[];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Do not send image responses to the client.
|
||||
*/
|
||||
@@ -791,5 +790,5 @@ X Y coordinate space, based on the provided screenshot.
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
<!--- End of tools generated section -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user