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