generated from coulomb/repo-seed
feat: add Windows distribution build with cross-platform server scripts
- Add 'make dist' target to build distribution package in dist/ - Add 'make dist-zip' target to create distributable archive (ZIP or tar.gz) - Create start-server.bat for Windows users (auto-opens browser, starts Python server) - Create start-server.sh for Linux/Mac users with same functionality - Generate DIST_README.md with quick start instructions for all platforms - Add WINDOWS_USAGE.md with comprehensive guide for WSL → Windows deployment - Update .gitignore to exclude dist/ and distribution archives - Update CLAUDE.md with distribution build documentation Distribution package includes: - Core application files (index.html, engine.js, generator.js) - All example projects (example/, example-1/, my-project/) - Documentation (README.md, TEMPLATE_V2_GUIDE.md, TROUBLESHOOTING.md) - Cross-platform server startup scripts The distribution is self-contained and works on Windows filesystems without modification. Paths use forward slashes which browsers handle correctly on all platforms. Users can simply extract and double-click start-server.bat (Windows) or run ./start-server.sh (Linux/Mac) to launch the application. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
140
Makefile
140
Makefile
@@ -1,4 +1,4 @@
|
||||
.PHONY: help install test test-watch test-coverage test-ui clean serve lint format deps-check deps-update
|
||||
.PHONY: help install test test-watch test-coverage test-ui clean serve lint format deps-check deps-update dist dist-zip
|
||||
|
||||
# Default target
|
||||
help:
|
||||
@@ -25,6 +25,10 @@ help:
|
||||
@echo " deps-update Update dependencies"
|
||||
@echo " deps-audit Security audit of dependencies"
|
||||
@echo ""
|
||||
@echo "Distribution:"
|
||||
@echo " dist Build distribution package in dist/"
|
||||
@echo " dist-zip Build distribution and create ZIP archive"
|
||||
@echo ""
|
||||
|
||||
# Development setup
|
||||
install:
|
||||
@@ -137,4 +141,136 @@ setup: clean install test
|
||||
@echo " • Run 'make test' to run tests"
|
||||
@echo " • Run 'make test-watch' for TDD"
|
||||
@echo " • Run 'make serve' to start development server"
|
||||
@echo " • Open index.html in browser to use the app"
|
||||
@echo " • Open index.html in browser to use the app"
|
||||
|
||||
# Distribution build for deployment/Windows
|
||||
dist:
|
||||
@echo "Building distribution package..."
|
||||
@# Create dist directory
|
||||
@rm -rf dist
|
||||
@mkdir -p dist
|
||||
@echo "📦 Created dist/ directory"
|
||||
|
||||
@# Copy core application files
|
||||
@cp index.html engine.js generator.js dist/
|
||||
@echo "✅ Copied core files (index.html, engine.js, generator.js)"
|
||||
|
||||
@# Copy project directories
|
||||
@cp -r example example-1 my-project dist/
|
||||
@echo "✅ Copied project directories (example, example-1, my-project)"
|
||||
|
||||
@# Copy documentation
|
||||
@cp README.md LICENSE dist/
|
||||
@[ -f TEMPLATE_V2_GUIDE.md ] && cp TEMPLATE_V2_GUIDE.md dist/ || true
|
||||
@[ -f TROUBLESHOOTING.md ] && cp TROUBLESHOOTING.md dist/ || true
|
||||
@echo "✅ Copied documentation"
|
||||
|
||||
@# Create Windows batch file for serving
|
||||
@echo '@echo off' > dist/start-server.bat
|
||||
@echo 'echo Starting Timeline SVG Generator...' >> dist/start-server.bat
|
||||
@echo 'echo.' >> dist/start-server.bat
|
||||
@echo 'echo Opening browser at http://localhost:8000' >> dist/start-server.bat
|
||||
@echo 'echo Press Ctrl+C to stop the server' >> dist/start-server.bat
|
||||
@echo 'echo.' >> dist/start-server.bat
|
||||
@echo 'start http://localhost:8000' >> dist/start-server.bat
|
||||
@echo 'python -m http.server 8000 2^>nul || python3 -m http.server 8000 2^>nul || (echo Python not found. Please install Python or open index.html in a browser. ^& pause)' >> dist/start-server.bat
|
||||
@echo "✅ Created start-server.bat for Windows"
|
||||
|
||||
@# Create Linux/Mac shell script for serving
|
||||
@echo '#!/bin/bash' > dist/start-server.sh
|
||||
@echo 'echo "Starting Timeline SVG Generator..."' >> dist/start-server.sh
|
||||
@echo 'echo ""' >> dist/start-server.sh
|
||||
@echo 'echo "Opening browser at http://localhost:8000"' >> dist/start-server.sh
|
||||
@echo 'echo "Press Ctrl+C to stop the server"' >> dist/start-server.sh
|
||||
@echo 'echo ""' >> dist/start-server.sh
|
||||
@echo 'if command -v xdg-open >/dev/null 2>&1; then' >> dist/start-server.sh
|
||||
@echo ' xdg-open http://localhost:8000 &' >> dist/start-server.sh
|
||||
@echo 'elif command -v open >/dev/null 2>&1; then' >> dist/start-server.sh
|
||||
@echo ' open http://localhost:8000 &' >> dist/start-server.sh
|
||||
@echo 'fi' >> dist/start-server.sh
|
||||
@echo 'python3 -m http.server 8000 2>/dev/null || python -m SimpleHTTPServer 8000 2>/dev/null || { echo "Python not found. Please install Python or open index.html in a browser."; read -p "Press Enter to exit..."; }' >> dist/start-server.sh
|
||||
@chmod +x dist/start-server.sh
|
||||
@echo "✅ Created start-server.sh for Linux/Mac"
|
||||
|
||||
@# Create distribution README
|
||||
@echo "# Timeline SVG Generator - Distribution Package" > dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "This is a standalone distribution of Timeline SVG Generator." >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "## Quick Start" >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "### Windows" >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "1. Double-click \`start-server.bat\`" >> dist/DIST_README.md
|
||||
@echo "2. Your browser will open automatically at http://localhost:8000" >> dist/DIST_README.md
|
||||
@echo "3. The application will load the example project automatically" >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "### Linux / Mac" >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "1. Run \`./start-server.sh\` (or \`bash start-server.sh\`)" >> dist/DIST_README.md
|
||||
@echo "2. Your browser will open automatically at http://localhost:8000" >> dist/DIST_README.md
|
||||
@echo "3. The application will load the example project automatically" >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "### Alternative: Open Directly" >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "**Note:** Due to browser security restrictions (CORS), opening index.html directly may prevent loading of project files. Using a local server is recommended." >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "## Project Structure" >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "- \`index.html\` - Main application" >> dist/DIST_README.md
|
||||
@echo "- \`engine.js\` - Application logic" >> dist/DIST_README.md
|
||||
@echo "- \`generator.js\` - SVG generation engine" >> dist/DIST_README.md
|
||||
@echo "- \`example/\` - Simple example project" >> dist/DIST_README.md
|
||||
@echo "- \`example-1/\` - Enhanced example with styling" >> dist/DIST_README.md
|
||||
@echo "- \`my-project/\` - Template for your own projects" >> dist/DIST_README.md
|
||||
@echo "- \`README.md\` - Full documentation" >> dist/DIST_README.md
|
||||
@echo "- \`TEMPLATE_V2_GUIDE.md\` - Template creation guide" >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "## Creating Your Own Timeline" >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "1. Copy one of the example folders (e.g., \`example/\`)" >> dist/DIST_README.md
|
||||
@echo "2. Rename it to your project name" >> dist/DIST_README.md
|
||||
@echo "3. Edit \`project.json\` to configure your timeline" >> dist/DIST_README.md
|
||||
@echo "4. Replace \`sample.csv\` with your data" >> dist/DIST_README.md
|
||||
@echo "5. Customize \`style.css\` and \`template-v2.svg\` as needed" >> dist/DIST_README.md
|
||||
@echo "6. Load your project in the application using the file upload controls" >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "See README.md and TEMPLATE_V2_GUIDE.md for detailed instructions." >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "## Troubleshooting" >> dist/DIST_README.md
|
||||
@echo "" >> dist/DIST_README.md
|
||||
@echo "If you encounter issues, see TROUBLESHOOTING.md for solutions to common problems." >> dist/DIST_README.md
|
||||
@echo "✅ Created DIST_README.md"
|
||||
|
||||
@echo ""
|
||||
@echo "🎉 Distribution package created in dist/"
|
||||
@echo ""
|
||||
@echo "Contents:"
|
||||
@echo " • Core application files (HTML, JS)"
|
||||
@echo " • Example projects (example, example-1, my-project)"
|
||||
@echo " • Documentation (README.md, TEMPLATE_V2_GUIDE.md, etc.)"
|
||||
@echo " • Server startup scripts (start-server.bat, start-server.sh)"
|
||||
@echo ""
|
||||
@echo "To use on Windows:"
|
||||
@echo " 1. Copy the dist/ folder to your Windows machine"
|
||||
@echo " 2. Double-click start-server.bat to run"
|
||||
@echo ""
|
||||
@echo "Or create a ZIP archive with: make dist-zip"
|
||||
|
||||
# Create ZIP archive of distribution
|
||||
dist-zip: dist
|
||||
@echo "Creating distribution archive..."
|
||||
@if command -v zip >/dev/null 2>&1; then \
|
||||
cd dist && zip -r ../timeline-svg-dist.zip . -x "*.git*" -x "*.DS_Store" && cd ..; \
|
||||
echo "✅ Created timeline-svg-dist.zip"; \
|
||||
echo ""; \
|
||||
echo "📦 Distribution archive ready: timeline-svg-dist.zip"; \
|
||||
echo " Transfer this file to Windows and extract to use the application."; \
|
||||
else \
|
||||
tar --exclude=".git*" --exclude=".DS_Store" -czf timeline-svg-dist.tar.gz -C dist .; \
|
||||
echo "✅ Created timeline-svg-dist.tar.gz (zip not available)"; \
|
||||
echo ""; \
|
||||
echo "📦 Distribution archive ready: timeline-svg-dist.tar.gz"; \
|
||||
echo " Transfer this file to Windows, extract with 7-Zip or similar tool."; \
|
||||
echo " Or install zip: sudo apt-get install zip"; \
|
||||
fi
|
||||
Reference in New Issue
Block a user