feat: Add flexible port configuration for development

- Change default ports to 7510 (backend) and 7511 (frontend) to avoid conflicts - Add PORT environment variable support for both services - Create docker-compose.dev.yml for development without SSL/nginx - Add development script (scripts/dev.sh) for easy local development - Create comprehensive port configuration documentation - Update docker-compose.yml to support dynamic port configuration - Add frontend .env.example with development settings This allows running the application on custom ports internally without SSL, making it easier to integrate with existing infrastructure. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-23 14:11:11 +02:00
parent 0087d0fddc
commit 9cfd018d0d
8 changed files with 338 additions and 9 deletions
@@ -1,6 +1,6 @@
 # Application
 NODE_ENV=production
-PORT=3000
+PORT=7510
 LOG_LEVEL=info

 # Authentication
@@ -72,16 +72,22 @@ The setup script will:
 #### Development Mode

 ```bash
+# Option 1: Use the development script
+./scripts/dev.sh
+
+# Option 2: Manual start
 # Terminal 1 - Backend
 cd backend
-npm run dev
+PORT=7510 npm run dev

-# Terminal 2 - Frontend
+# Terminal 2 - Frontend  
 cd frontend
-npm start
+PORT=7511 npm start
 ```

-Access at: http://localhost:3000
+Access at: 
+- Frontend: http://localhost:7511
+- Backend API: http://localhost:7510

 #### Production Mode (Docker)

@@ -90,12 +96,20 @@ Access at: http://localhost:3000
 # Select option 1 for quick deployment
 ```

-Access at: http://localhost
+Access at: http://localhost:7511 (or configured port)

 ## Configuration

 All configuration is managed through the `.env` file:

+### Port Configuration
+
+Default ports:
+- Backend API: 7510
+- Frontend UI: 7511
+
+To use different ports, see [Port Configuration Guide](docs/PORT_CONFIGURATION.md).
+
 ### Essential Settings

 ```env
@@ -0,0 +1,74 @@
+version: '3.8'
+
+# Development docker-compose file
+# This configuration runs frontend and backend on custom ports without SSL/nginx proxy
+# Usage: docker compose -f docker-compose.dev.yml up
+
+services:
+  backend:
+    build:
+      context: ./backend
+      dockerfile: ../docker/Dockerfile.backend
+    container_name: minio-webui-backend-dev
+    restart: unless-stopped
+    environment:
+      NODE_ENV: development
+      PORT: 7510
+    env_file:
+      - .env
+    ports:
+      - "7510:7510"
+    volumes:
+      - ./backend:/app
+      - /app/node_modules
+      - ./logs:/app/logs
+      - ~/.mc:/home/nodejs/.mc:ro
+    depends_on:
+      - redis
+    networks:
+      - minio-webui-network
+    command: npm run dev
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: ../docker/Dockerfile.frontend.dev
+    container_name: minio-webui-frontend-dev
+    restart: unless-stopped
+    environment:
+      PORT: 7511
+      REACT_APP_API_URL: http://localhost:7510/api
+    ports:
+      - "7511:7511"
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    depends_on:
+      - backend
+    networks:
+      - minio-webui-network
+    stdin_open: true
+    tty: true
+
+  redis:
+    image: redis:7-alpine
+    container_name: minio-webui-redis-dev
+    restart: unless-stopped
+    command: redis-server --appendonly yes
+    volumes:
+      - redis-data:/data
+    networks:
+      - minio-webui-network
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+
+volumes:
+  redis-data:
+    driver: local
+
+networks:
+  minio-webui-network:
+    driver: bridge
@@ -12,7 +12,7 @@ services:
    env_file:
      - .env
    ports:
-      - "3000:3000"
+      - "${PORT:-7510}:${PORT:-7510}"
    volumes:
      - ./logs:/app/logs
      - ~/.mc:/home/nodejs/.mc:ro
@@ -34,8 +34,7 @@ services:
    container_name: minio-webui-frontend
    restart: unless-stopped
    ports:
-      - "80:80"
-      - "443:443"
+      - "${FRONTEND_PORT:-7511}:80"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
      - ./ssl:/etc/nginx/ssl:ro
@@ -0,0 +1,22 @@
+# Development Dockerfile for frontend
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Configure npm to use legacy peer deps
+RUN npm config set legacy-peer-deps true
+
+# Install dependencies
+RUN npm install
+
+# Copy application files
+COPY . .
+
+# Expose the development server port
+EXPOSE 7511
+
+# Start the development server
+CMD ["npm", "start"]
@@ -0,0 +1,133 @@
+# Port Configuration Guide
+
+MinIO WebUI supports flexible port configuration for both frontend and backend services.
+
+## Default Ports
+
+- **Backend API**: 7510
+- **Frontend UI**: 7511
+
+These ports were chosen to avoid conflicts with commonly used ports like 3000.
+
+## Configuration Methods
+
+### 1. Environment Variables
+
+Set these in your `.env` file:
+
+```bash
+# Backend port
+PORT=7510
+
+# Frontend port (for development)
+FRONTEND_PORT=7511
+```
+
+### 2. Docker Compose
+
+The production `docker-compose.yml` uses environment variables:
+
+```yaml
+backend:
+  ports:
+    - "${PORT:-7510}:${PORT:-7510}"
+
+frontend:
+  ports:
+    - "${FRONTEND_PORT:-7511}:80"
+```
+
+### 3. Development Mode
+
+#### Using the dev script:
+```bash
+# Start with local Node.js
+./scripts/dev.sh
+
+# Start with Docker
+./scripts/dev.sh docker
+```
+
+#### Manual start:
+```bash
+# Backend
+cd backend
+PORT=7510 npm run dev
+
+# Frontend (in another terminal)
+cd frontend
+PORT=7511 REACT_APP_API_URL=http://localhost:7510/api npm start
+```
+
+### 4. Docker Development Mode
+
+Use the dedicated development compose file:
+
+```bash
+docker compose -f docker-compose.dev.yml up
+```
+
+This configuration:
+- Runs backend on port 7510
+- Runs frontend on port 7511
+- Enables hot reloading for both services
+- No SSL/nginx proxy needed
+
+## Accessing the Application
+
+### Development Mode
+- Frontend: http://localhost:7511
+- Backend API: http://localhost:7510/api
+- Health check: http://localhost:7510/health
+
+### Production Mode (with nginx)
+- Frontend: http://localhost:7511
+- API calls are proxied through nginx
+
+## Changing Ports
+
+To use different ports:
+
+1. Update your `.env` file:
+   ```bash
+   PORT=8510
+   FRONTEND_PORT=8511
+   ```
+
+2. If using the frontend development server, update `frontend/.env`:
+   ```bash
+   PORT=8511
+   REACT_APP_API_URL=http://localhost:8510
+   ```
+
+3. Restart your services
+
+## Troubleshooting
+
+### Port Already in Use
+If you get a "port already in use" error:
+
+1. Check what's using the port:
+   ```bash
+   # Linux/Mac
+   lsof -i :7510
+   
+   # Windows
+   netstat -ano | findstr :7510
+   ```
+
+2. Either stop the conflicting service or choose a different port
+
+### API Connection Issues
+If the frontend can't connect to the backend:
+
+1. Verify the backend is running on the expected port
+2. Check `REACT_APP_API_URL` in the frontend environment
+3. Ensure no firewall is blocking the connection
+
+### Docker Network Issues
+If services can't communicate in Docker:
+
+1. Ensure both services are on the same network
+2. Use service names (not localhost) for inter-container communication
+3. Check Docker logs: `docker compose logs backend`
@@ -0,0 +1,5 @@
+# Frontend development server port
+PORT=7511
+
+# Backend API URL for development
+REACT_APP_API_URL=http://localhost:7510
@@ -0,0 +1,82 @@
+#!/bin/bash
+
+set -e
+
+echo "======================================"
+echo "MinIO WebUI Development Environment"
+echo "======================================"
+echo ""
+
+# Colors for output
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Check if .env exists
+if [ ! -f .env ]; then
+    echo -e "${YELLOW}Warning: .env file not found. Copying from .env.example${NC}"
+    cp .env.example .env
+    echo -e "${GREEN}✓ Created .env file. Please update it with your configuration.${NC}"
+fi
+
+# Export ports for development
+export PORT=7510
+export FRONTEND_PORT=7511
+
+echo -e "${BLUE}Starting services:${NC}"
+echo "- Backend API: http://localhost:7510"
+echo "- Frontend UI: http://localhost:7511"
+echo ""
+
+# Check if running in Docker mode or local mode
+if [ "$1" == "docker" ]; then
+    echo "Starting with Docker..."
+    docker compose -f docker-compose.dev.yml up
+else
+    echo "Starting in local development mode..."
+    
+    # Start Redis if not running
+    if ! command -v redis-cli &> /dev/null || ! redis-cli ping &> /dev/null; then
+        echo -e "${YELLOW}Starting Redis...${NC}"
+        redis-server --daemonize yes
+    fi
+    
+    # Install backend dependencies
+    echo -e "${BLUE}Installing backend dependencies...${NC}"
+    cd backend
+    npm install
+    
+    # Start backend
+    echo -e "${BLUE}Starting backend on port 7510...${NC}"
+    PORT=7510 npm run dev &
+    BACKEND_PID=$!
+    cd ..
+    
+    # Install frontend dependencies
+    echo -e "${BLUE}Installing frontend dependencies...${NC}"
+    cd frontend
+    npm install --legacy-peer-deps
+    
+    # Start frontend
+    echo -e "${BLUE}Starting frontend on port 7511...${NC}"
+    PORT=7511 REACT_APP_API_URL=http://localhost:7510/api npm start &
+    FRONTEND_PID=$!
+    cd ..
+    
+    # Function to kill processes on exit
+    cleanup() {
+        echo -e "\n${YELLOW}Stopping services...${NC}"
+        kill $BACKEND_PID $FRONTEND_PID 2>/dev/null || true
+        exit
+    }
+    
+    # Set up trap to clean up on exit
+    trap cleanup EXIT INT TERM
+    
+    echo -e "\n${GREEN}✓ Development environment started!${NC}"
+    echo -e "${BLUE}Press Ctrl+C to stop all services${NC}\n"
+    
+    # Wait for processes
+    wait
+fi