diff --git a/.env.example b/.env.example index 490c380..2d5e028 100644 --- a/.env.example +++ b/.env.example @@ -1,6 +1,6 @@ # Application NODE_ENV=production -PORT=3000 +PORT=7510 LOG_LEVEL=info # Authentication diff --git a/README.md b/README.md index 6128cec..4c6a8ef 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml new file mode 100644 index 0000000..26ac24f --- /dev/null +++ b/docker-compose.dev.yml @@ -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 \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index e4d78dd..d8aa9a5 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -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 diff --git a/docker/Dockerfile.frontend.dev b/docker/Dockerfile.frontend.dev new file mode 100644 index 0000000..eb90386 --- /dev/null +++ b/docker/Dockerfile.frontend.dev @@ -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"] \ No newline at end of file diff --git a/docs/PORT_CONFIGURATION.md b/docs/PORT_CONFIGURATION.md new file mode 100644 index 0000000..fbbe5a0 --- /dev/null +++ b/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` \ No newline at end of file diff --git a/frontend/.env.example b/frontend/.env.example new file mode 100644 index 0000000..3f901ec --- /dev/null +++ b/frontend/.env.example @@ -0,0 +1,5 @@ +# Frontend development server port +PORT=7511 + +# Backend API URL for development +REACT_APP_API_URL=http://localhost:7510 \ No newline at end of file diff --git a/scripts/dev.sh b/scripts/dev.sh new file mode 100755 index 0000000..84a8673 --- /dev/null +++ b/scripts/dev.sh @@ -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 \ No newline at end of file