mybeacon-backend/frontend/start.sh

#!/bin/bash
#
# MyBeacon Frontend Startup Script
#

set -e

# Change to frontend directory
cd "$(dirname "$0")"

# Colors
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color

# Default values
MODE="${1:-dev}"
HOST="${HOST:-0.0.0.0}"
PORT="${PORT:-5173}"

echo -e "${GREEN}=== MyBeacon Frontend Startup ===${NC}"
echo -e "Mode: ${YELLOW}${MODE}${NC}"
echo -e "Host: ${YELLOW}${HOST}${NC}"
echo -e "Port: ${YELLOW}${PORT}${NC}"
echo ""

# Check if package.json exists
if [ ! -f "package.json" ]; then
    echo -e "${RED}Error: package.json not found!${NC}"
    exit 1
fi

# Check if npm is installed
if ! command -v npm &> /dev/null; then
    echo -e "${RED}Error: npm not found!${NC}"
    echo "Install Node.js and npm first"
    exit 1
fi

# Install dependencies if needed
if [ ! -d "node_modules" ]; then
    echo -e "${YELLOW}Installing dependencies...${NC}"
    npm install
fi

# Function to stop frontend
cleanup() {
    echo -e "\n${YELLOW}Stopping frontend...${NC}"
    pkill -f "vite" 2>/dev/null || true
    exit 0
}

trap cleanup SIGINT SIGTERM

# Start frontend based on mode
case "$MODE" in
    dev)
        echo -e "${GREEN}Starting DEVELOPMENT server...${NC}"
        echo -e "${YELLOW}URL: http://${HOST}:${PORT}${NC}"
        echo ""
        npm run dev -- --host "$HOST" --port "$PORT"
        ;;

    build)
        echo -e "${GREEN}Building for PRODUCTION...${NC}"
        echo -e "${YELLOW}Output: ./dist/${NC}"
        echo ""
        npm run build
        echo -e "${GREEN}Build complete!${NC}"
        echo -e "${YELLOW}Run '$0 deploy' to copy to nginx${NC}"
        ;;

    deploy)
        echo -e "${GREEN}Building and deploying to nginx...${NC}"
        echo ""

        # Build
        npm run build

        # Copy to nginx root
        NGINX_ROOT="/var/www/mybeacon/frontend"
        echo -e "${YELLOW}Copying to ${NGINX_ROOT}...${NC}"

        sudo rm -rf "${NGINX_ROOT}"/*
        sudo cp -r dist/* "${NGINX_ROOT}/"
        sudo chown -R www-data:www-data "${NGINX_ROOT}"

        echo -e "${GREEN}Deploy complete!${NC}"
        echo -e "Frontend: ${YELLOW}http://localhost:80${NC}"
        ;;

    preview)
        echo -e "${GREEN}Starting PREVIEW server...${NC}"
        echo -e "${YELLOW}Serving production build${NC}"
        echo ""
        npm run preview -- --host "$HOST" --port "$PORT"
        ;;

    background)
        echo -e "${GREEN}Starting in BACKGROUND mode...${NC}"
        echo -e "${YELLOW}Logs: /tmp/frontend_dev.log${NC}"
        echo ""

        # Kill existing frontend
        pkill -f "vite" 2>/dev/null || true
        sleep 1

        # Start in background
        npm run dev -- --host "$HOST" --port "$PORT" > /tmp/frontend_dev.log 2>&1 &

        PID=$!
        sleep 2

        if ps -p $PID > /dev/null; then
            echo -e "${GREEN}Frontend started with PID: ${PID}${NC}"
            echo -e "URL: ${YELLOW}http://${HOST}:${PORT}${NC}"
            echo -e "Check logs: ${YELLOW}tail -f /tmp/frontend_dev.log${NC}"
            echo -e "Stop: ${YELLOW}pkill -f vite${NC}"
        else
            echo -e "${RED}Failed to start frontend${NC}"
            cat /tmp/frontend_dev.log
            exit 1
        fi
        ;;

    stop)
        echo -e "${YELLOW}Stopping frontend...${NC}"
        pkill -f "vite" 2>/dev/null && echo -e "${GREEN}Frontend stopped${NC}" || echo -e "${YELLOW}Frontend not running${NC}"
        ;;

    restart)
        echo -e "${YELLOW}Restarting frontend...${NC}"
        pkill -f "vite" 2>/dev/null || true
        sleep 2
        exec "$0" background
        ;;

    status)
        if pgrep -f "vite" > /dev/null; then
            echo -e "${GREEN}Frontend is running${NC}"
            ps aux | grep "vite" | grep -v grep
        else
            echo -e "${YELLOW}Frontend is not running${NC}"
        fi
        ;;

    clean)
        echo -e "${YELLOW}Cleaning build artifacts...${NC}"
        rm -rf dist node_modules/.vite
        echo -e "${GREEN}Clean complete!${NC}"
        ;;

    install)
        echo -e "${YELLOW}Installing dependencies...${NC}"
        npm install
        echo -e "${GREEN}Install complete!${NC}"
        ;;

    *)
        echo "Usage: $0 {dev|build|deploy|preview|background|stop|restart|status|clean|install}"
        echo ""
        echo "Modes:"
        echo "  dev        - Development server with HMR"
        echo "  build      - Build for production (output: ./dist/)"
        echo "  deploy     - Build and copy to nginx (/var/www/mybeacon/frontend)"
        echo "  preview    - Preview production build"
        echo "  background - Run dev server in background"
        echo "  stop       - Stop frontend"
        echo "  restart    - Restart frontend"
        echo "  status     - Check frontend status"
        echo "  clean      - Clean build artifacts"
        echo "  install    - Install/update dependencies"
        echo ""
        echo "Environment variables:"
        echo "  HOST       - Bind host (default: 0.0.0.0)"
        echo "  PORT       - Bind port (default: 5173)"
        echo ""
        echo "Examples:"
        echo "  $0 dev                    # Development mode"
        echo "  $0 deploy                 # Build + deploy to nginx"
        echo "  $0 build                  # Build only (no deploy)"
        echo "  PORT=3000 $0 dev          # Custom port"
        exit 1
        ;;
esac