docs(quick-2): Update start.sh for network access and port config

- Dev/preview servers accessible from other machines (--host flag) - Port configuration via menu or CLI args - dev:8080 and dev:9090 shortcuts for kiosk/remote modes - Shows connection info (local + network IP)
2026-03-13 11:05:59 +08:00
parent b474f7067a
commit e327ab9ac8
4 changed files with 198 additions and 23 deletions
--- a/.planning/STATE.md
+++ b/.planning/STATE.md
@@ -102,7 +102,8 @@ None - ready to begin Phase 1 planning.

 | # | Description | Date | Commit | Directory |
 |---|-------------|------|--------|-----------|
-| 1 | Create start.sh script with menu for test, dev, etc. | 2026-03-13 | - | [1-create-start-sh-script-with-menu-for-tes](./quick/1-create-start-sh-script-with-menu-for-tes/) |
+| 1 | Create start.sh script with menu for test, dev, etc. | 2026-03-13 | b474f70 | [1-create-start-sh-script-with-menu-for-tes](./quick/1-create-start-sh-script-with-menu-for-tes/) |
+| 2 | Update start.sh for network access and port configuration | 2026-03-13 | - | [2-update-start-sh-for-network-access-and-p](./quick/2-update-start-sh-for-network-access-and-p/) |

 ---

--- a/.planning/quick/2-update-start-sh-for-network-access-and-p/2-PLAN.md
+++ b/.planning/quick/2-update-start-sh-for-network-access-and-p/2-PLAN.md
@@ -0,0 +1,33 @@
+---
+plan: 1
+type: quick
+files_modified:
+  - start.sh
+---
+
+<objective>
+Update start.sh to support network access (--host flag) and custom port configuration for dev/preview servers
+</objective>
+
+<tasks>
+
+<task>
+<name>Update start.sh with network and port options</name>
+<files>start.sh</files>
+<action>
+1. Update dev command to include --host flag for network access
+2. Add port configuration (default 5173 for dev, 4173 for preview)
+3. Add menu options for port selection
+4. Show connection info after starting server (IP address, port)
+</action>
+<verify>grep -E "(host|port|--host)" start.sh | head -10</verify>
+<done>start.sh updated with network access and port options</done>
+</task>
+
+</tasks>
+
+<success_criteria>
+- Dev server accessible from other machines
+- Port can be customized via menu or arguments
+- Connection info displayed when server starts
+</success_criteria>
--- a/.planning/quick/2-update-start-sh-for-network-access-and-p/2-SUMMARY.md
+++ b/.planning/quick/2-update-start-sh-for-network-access-and-p/2-SUMMARY.md
@@ -0,0 +1,47 @@
+# Quick Task 2 Summary - Update start.sh for Network Access
+
+**Task:** Update start.sh for network access and port configuration  
+**Date:** 2026-03-13  
+**Status:** Complete
+
+---
+
+## Completed
+
+### Task 1: Update start.sh with network and port options
+
+- **Network access**: Dev and preview servers now use `--host` flag
+- **Port configuration**: 
+  - Default dev port: 5173
+  - Default preview port: 4173
+  - Can be changed via menu (option `p`)
+- **Menu options added**:
+  - `dev` - Default dev server
+  - `dev:8080` - Dev server on port 8080 (kiosk mode)
+  - `dev:9090` - Dev server on port 9090 (remote mode)
+  - `p` - Change default ports
+- **Connection info**: Shows local and network URLs when server starts
+- **Command line usage**:
+  - `./start.sh dev`
+  - `./start.sh dev:8080`
+  - `./start.sh dev:9090`
+  - `./start.sh preview`
+
+---
+
+## Usage
+
+```bash
+# Interactive menu
+./start.sh
+
+# Direct commands
+./start.sh dev          # Default port 5173
+./start.sh dev:8080     # Port 8080 (kiosk)
+./start.sh dev:9090     # Port 9090 (remote)
+./start.sh preview      # Preview on 4173
+
+# Change ports via menu (option p)
+```
+
+**Network access:** Servers now bind to `0.0.0.0` and show both localhost and network IP addresses.
--- a/start.sh
+++ b/start.sh
@@ -17,6 +17,10 @@ BOLD='\033[1m'
 # Project directory
 PROJECT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/sample_interface" && pwd)"

+# Default ports
+DEV_PORT=5173
+PREVIEW_PORT=4173
+
 echo -e "${CYAN}${BOLD}"
 echo "╔══════════════════════════════════════════════════════╗"
 echo "║         TCK RTU - Development Menu                  ║"
@@ -26,60 +30,141 @@ echo -e "${NC}"
 show_menu() {
    echo -e "${BOLD}Select an option:${NC}"
    echo ""
-    echo -e "  ${GREEN}1)${NC}  dev         Start development server"
-    echo -e "  ${GREEN}2)${NC}  test        Run tests"
-    echo -e "  ${GREEN}3)${NC}  test:watch Run tests in watch mode"
-    echo -e "  ${GREEN}4)${NC}  build       Build for production"
-    echo -e "  ${GREEN}5)${NC}  preview     Preview production build"
-    echo -e "  ${GREEN}6)${NC}  lint        Run linter"
-    echo -e "  ${GREEN}7)${NC}  clean       Clean build artifacts"
-    echo -e "  ${GREEN}8)${NC}  install     Install dependencies"
+    echo -e "  ${GREEN}1)${NC}  dev         Start development server (port $DEV_PORT)"
+    echo -e "  ${GREEN}2)${NC}  dev:8080    Start dev server on port 8080 (kiosk mode)"
+    echo -e "  ${GREEN}3)${NC}  dev:9090    Start dev server on port 9090 (remote mode)"
+    echo -e "  ${GREEN}4)${NC}  test        Run tests"
+    echo -e "  ${GREEN}5)${NC}  test:watch  Run tests in watch mode"
+    echo -e "  ${GREEN}6)${NC}  build       Build for production"
+    echo -e "  ${GREEN}7)${NC}  preview     Preview production (port $PREVIEW_PORT)"
+    echo -e "  ${GREEN}8)${NC}  lint        Run linter"
+    echo -e "  ${GREEN}9)${NC}  clean       Clean build artifacts"
+    echo -e "  ${GREEN}10)${NC}  install     Install dependencies"
+    echo -e "  ${GREEN}p)${NC}  port        Change default port"
    echo ""
    echo -e "  ${RED}0)${NC}  Exit"
    echo ""
 }

+get_ip_address() {
+    # Try to get the primary IP address
+    if command -v ip &> /dev/null; then
+        IP=$(ip route get 1.1.1.1 2>/dev/null | grep -oP 'src \K[^ ]+' | head -1)
+    elif command -v ifconfig &> /dev/null; then
+        IP=$(ifconfig 2>/dev/null | grep -oP 'inet \K[\d.]+' | grep -v '127.0.0.1' | head -1)
+    fi
+    
+    if [ -z "$IP" ]; then
+        IP="localhost"
+    fi
+    echo "$IP"
+}
+
+show_connection_info() {
+    local port=$1
+    local IP=$(get_ip_address)
+    echo ""
+    echo -e "${GREEN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo -e "${GREEN}  Server running at:${NC}"
+    echo -e "${GREEN}    - Local:   http://localhost:$port${NC}"
+    echo -e "${GREEN}    - Network:  http://$IP:$port${NC}"
+    echo -e "${GREEN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo ""
+}
+
+run_dev_server() {
+    local port=${1:-$DEV_PORT}
+    cd "$PROJECT_DIR"
+    echo -e "${BLUE}Starting development server on port $port...${NC}"
+    echo -e "${YELLOW}(Press Ctrl+C to stop)${NC}"
+    echo ""
+    VITE_PORT=$port npm run dev -- --host &
+    DEV_PID=$!
+    show_connection_info $port
+    wait $DEV_PID
+}
+
+run_preview_server() {
+    local port=${1:-$PREVIEW_PORT}
+    cd "$PROJECT_DIR"
+    echo -e "${BLUE}Starting preview server on port $port...${NC}"
+    echo -e "${YELLOW}(Press Ctrl+C to stop)${NC}"
+    echo ""
+    VITE_PORT=$port npm run preview -- --host &
+    PREVIEW_PID=$!
+    show_connection_info $port
+    wait $PREVIEW_PID
+}
+
+change_port() {
+    echo -e "${BOLD}Change Default Port${NC}"
+    echo ""
+    echo -e "Current: Dev=$DEV_PORT, Preview=$PREVIEW_PORT"
+    echo ""
+    echo -n "Enter new dev port (current: $DEV_PORT): "
+    read -r new_dev_port
+    if [ -n "$new_dev_port" ]; then
+        DEV_PORT=$new_dev_port
+    fi
+    
+    echo -n "Enter new preview port (current: $PREVIEW_PORT): "
+    read -r new_preview_port
+    if [ -n "$new_preview_port" ]; then
+        PREVIEW_PORT=$new_preview_port
+    fi
+    
+    echo -e "${GREEN}Ports updated! Dev=$DEV_PORT, Preview=$PREVIEW_PORT${NC}"
+    echo ""
+}
+
 run_command() {
    local option=$1
    cd "$PROJECT_DIR"
    
    case $option in
        1|dev)
-            echo -e "${BLUE}Starting development server...${NC}"
-            npm run dev
+            run_dev_server $DEV_PORT
            ;;
-        2|test)
+        2|dev:8080)
+            run_dev_server 8080
+            ;;
+        3|dev:9090)
+            run_dev_server 9090
+            ;;
+        4|test)
            echo -e "${BLUE}Running tests...${NC}"
            npm test
            ;;
-        3|test:watch)
+        5|test:watch)
            echo -e "${BLUE}Running tests in watch mode...${NC}"
            npm run test:watch
            ;;
-        4|build)
+        6|build)
            echo -e "${BLUE}Building for production...${NC}"
            npm run build
            echo -e "${GREEN}Build complete!${NC}"
            ;;
-        5|preview)
-            echo -e "${BLUE}Previewing production build...${NC}"
-            npm run preview
+        7|preview)
+            run_preview_server $PREVIEW_PORT
            ;;
-        6|lint)
+        8|lint)
            echo -e "${BLUE}Running linter...${NC}"
            npm run lint
            ;;
-        7|clean)
+        9|clean)
            echo -e "${YELLOW}Cleaning build artifacts...${NC}"
            rm -rf "$PROJECT_DIR/dist"
            rm -rf "$PROJECT_DIR/node_modules/.vite"
            echo -e "${GREEN}Clean complete!${NC}"
            ;;
-        8|install)
+        10|install)
            echo -e "${BLUE}Installing dependencies...${NC}"
            npm install
            echo -e "${GREEN}Dependencies installed!${NC}"
            ;;
+        p|port)
+            change_port
+            ;;
        0|exit)
            echo -e "${GREEN}Goodbye!${NC}"
            exit 0
@@ -97,16 +182,25 @@ if [ ! -d "$PROJECT_DIR/node_modules" ]; then
    npm install
 fi

-# If arguments provided, run directly
+# Parse command line arguments
 if [ $# -gt 0 ]; then
-    run_command "$1"
+    # Check for port override
+    if [[ "$1" == dev:* ]]; then
+        port="${1#dev:}"
+        run_dev_server "$port"
+    elif [[ "$1" == preview:* ]]; then
+        port="${1#preview:}"
+        run_preview_server "$port"
+    else
+        run_command "$1"
+    fi
    exit 0
 fi

 # Interactive menu
 while true; do
    show_menu
-    echo -n -e "${BOLD}Enter your choice (0-8): ${NC}"
+    echo -n -e "${BOLD}Enter your choice (0-10 or p): ${NC}"
    read -r choice
    echo ""
    run_command "$choice"