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>

docs/PORT_CONFIGURATION.md

@@ -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`