#!/bin/bash set -e # Colors for output RED='\033[0;31m' GREEN='\033[0;32m' YELLOW='\033[1;33m' BLUE='\033[0;34m' PURPLE='\033[0;35m' CYAN='\033[0;36m' NC='\033[0m' # No Color # Configuration CLIENT_DIR="client" DIST_DIR="dist" PORT=${PORT:-8080} HOST=${HOST:-localhost} # Print colored output print_color() { local color=$1 local message=$2 echo -e "${color}${message}${NC}" } print_header() { echo print_color $CYAN "๐Ÿš€ SeReact Frontend Client Manager" echo } print_usage() { print_header echo "Usage: $0 [COMMAND]" echo echo "Commands:" echo " dev, serve Start development server" echo " build Build production files" echo " deploy Deploy to static hosting" echo " clean Clean build artifacts" echo " install Install dependencies" echo " lint Check code quality" echo " test Run tests (if available)" echo " help Show this help message" echo echo "Environment Variables:" echo " PORT Development server port (default: 8080)" echo " HOST Development server host (default: localhost)" echo " DEPLOY_TARGET Deployment target (netlify, vercel, s3, github)" echo } # Check if we're in the right directory check_directory() { if [ ! -d "$CLIENT_DIR" ]; then print_color $RED "โŒ Error: Client directory not found!" print_color $YELLOW " Make sure you're running this from the project root." exit 1 fi } # Start development server start_dev_server() { print_color $GREEN "๐Ÿ”ง Starting development server..." cd "$CLIENT_DIR" # Check if index.html exists if [ ! -f "index.html" ]; then print_color $RED "โŒ Error: index.html not found in client directory" exit 1 fi # Check if Python is available if command -v python &> /dev/null; then print_color $BLUE "๐Ÿ Using Python development server" python serve.py else print_color $YELLOW "โš ๏ธ Python not found, using basic HTTP server" # Fallback to basic HTTP server if command -v npx &> /dev/null; then npx http-server . -p $PORT --cors else print_color $RED "โŒ No suitable HTTP server found" print_color $YELLOW " Please install Python or Node.js" exit 1 fi fi } # Build production files build_production() { print_color $GREEN "๐Ÿ—๏ธ Building production files..." # Create dist directory mkdir -p "$DIST_DIR" # Copy client files to dist print_color $BLUE "๐Ÿ“ Copying files to $DIST_DIR..." cp -r "$CLIENT_DIR"/* "$DIST_DIR/" # Remove development-only files if [ -f "$DIST_DIR/serve.py" ]; then rm "$DIST_DIR/serve.py" print_color $YELLOW "๐Ÿ—‘๏ธ Removed serve.py (development only)" fi if [ -d "$DIST_DIR/venv" ]; then rm -rf "$DIST_DIR/venv" print_color $YELLOW "๐Ÿ—‘๏ธ Removed venv directory (development only)" fi if [ -f "$DIST_DIR/requirements.txt" ]; then rm "$DIST_DIR/requirements.txt" print_color $YELLOW "๐Ÿ—‘๏ธ Removed requirements.txt (development only)" fi # Minify files if tools are available if command -v terser &> /dev/null; then print_color $BLUE "๐Ÿ—œ๏ธ Minifying JavaScript files..." find "$DIST_DIR/js" -name "*.js" -exec terser {} -o {} \; fi if command -v csso &> /dev/null; then print_color $BLUE "๐Ÿ—œ๏ธ Minifying CSS files..." find "$DIST_DIR" -name "*.css" -exec csso {} --output {} \; fi print_color $GREEN "โœ… Build completed successfully!" print_color $CYAN "๐Ÿ“ฆ Production files are in: $DIST_DIR/" } # Deploy to static hosting deploy_production() { local target=${DEPLOY_TARGET:-"manual"} print_color $GREEN "๐Ÿš€ Deploying to $target..." # Build first build_production case $target in "netlify") if command -v netlify &> /dev/null; then cd "$DIST_DIR" netlify deploy --prod --dir . else print_color $RED "โŒ Netlify CLI not found" print_color $YELLOW " Install with: npm install -g netlify-cli" fi ;; "vercel") if command -v vercel &> /dev/null; then cd "$DIST_DIR" vercel --prod else print_color $RED "โŒ Vercel CLI not found" print_color $YELLOW " Install with: npm install -g vercel" fi ;; "s3") if command -v aws &> /dev/null; then if [ -z "$S3_BUCKET" ]; then print_color $RED "โŒ S3_BUCKET environment variable not set" exit 1 fi aws s3 sync "$DIST_DIR/" "s3://$S3_BUCKET/" --delete print_color $GREEN "โœ… Deployed to S3 bucket: $S3_BUCKET" else print_color $RED "โŒ AWS CLI not found" print_color $YELLOW " Install AWS CLI first" fi ;; "github") print_color $BLUE "๐Ÿ“‹ GitHub Pages deployment instructions:" echo "1. Push the contents of $DIST_DIR/ to your gh-pages branch" echo "2. Enable GitHub Pages in repository settings" echo "3. Set source to gh-pages branch" ;; *) print_color $BLUE "๐Ÿ“‹ Manual deployment instructions:" echo "1. Upload the contents of $DIST_DIR/ to your web server" echo "2. Configure your server to serve index.html for all routes" echo "3. Ensure CORS is configured for API calls" ;; esac } # Clean build artifacts clean_build() { print_color $YELLOW "๐Ÿงน Cleaning build artifacts..." if [ -d "$DIST_DIR" ]; then rm -rf "$DIST_DIR" print_color $GREEN "โœ… Removed $DIST_DIR directory" fi # Clean any cache directories if [ -d "$CLIENT_DIR/__pycache__" ]; then rm -rf "$CLIENT_DIR/__pycache__" print_color $GREEN "โœ… Removed Python cache" fi print_color $GREEN "โœ… Clean completed!" } # Install dependencies install_dependencies() { print_color $GREEN "๐Ÿ“ฆ Installing dependencies..." cd "$CLIENT_DIR" # Check if virtual environment exists if [ ! -d "venv" ]; then print_color $BLUE "๐Ÿ Creating Python virtual environment..." python3 -m venv venv fi # Activate virtual environment if [ -f "venv/Scripts/activate" ]; then # Windows with Git Bash source venv/Scripts/activate else # Linux/macOS source venv/bin/activate fi # Install Python dependencies if [ -f "requirements.txt" ]; then print_color $BLUE "๐Ÿ“‹ Installing Python packages..." pip install -r requirements.txt fi print_color $GREEN "โœ… Dependencies installed!" } # Lint code lint_code() { print_color $GREEN "๐Ÿ” Checking code quality..." cd "$CLIENT_DIR" # Check HTML if command -v tidy &> /dev/null; then print_color $BLUE "๐Ÿ” Checking HTML..." tidy -q -e index.html || true fi # Check JavaScript if command -v eslint &> /dev/null; then print_color $BLUE "๐Ÿ” Checking JavaScript..." eslint js/*.js || true fi # Check CSS if command -v stylelint &> /dev/null; then print_color $BLUE "๐Ÿ” Checking CSS..." stylelint *.css || true fi print_color $GREEN "โœ… Code quality check completed!" } # Run tests run_tests() { print_color $GREEN "๐Ÿงช Running tests..." cd "$CLIENT_DIR" # Check if test files exist if [ -d "tests" ] || [ -f "test.html" ]; then print_color $BLUE "๐Ÿงช Running frontend tests..." # Add test runner here when tests are implemented print_color $YELLOW "โš ๏ธ No test runner configured yet" else print_color $YELLOW "โš ๏ธ No tests found" fi print_color $GREEN "โœ… Tests completed!" } # Main script logic main() { case "${1:-help}" in "dev"|"serve") check_directory start_dev_server ;; "build") check_directory build_production ;; "deploy") check_directory deploy_production ;; "clean") clean_build ;; "install") check_directory install_dependencies ;; "lint") check_directory lint_code ;; "test") check_directory run_tests ;; "help"|*) print_usage ;; esac } # Run main function with all arguments main "$@"