# Frontend-Backend Connection Setup

## ✅ Configuration Complete

The frontend and backend are now properly configured to work together.

## 🔧 Vite Proxy Configuration

The `frontend/vite.config.js` has been updated with the following proxy settings:

```javascript
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',  // Backend server
      changeOrigin: true,
    },
    '/backend/plugins': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/backend\/plugins/, '/plugins')
    },
    '/backend/uploads': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/backend\/uploads/, '/uploads')
    },
    '/plugins': {
      target: 'http://localhost:3000',
      changeOrigin: true,
    },
    '/uploads': {
      target: 'http://localhost:3000',
      changeOrigin: true,
    }
  }
}
```

## 🚀 How to Run

### 1. Start the Backend (Terminal 1)
```bash
cd backend
npm start
```
Backend will run on `http://localhost:3000`

### 2. Start the Frontend (Terminal 2)
```bash
cd frontend
npm run dev
```
Frontend will run on `http://localhost:5173` (or another port)

## 🔍 How It Works

### API Requests
- Frontend makes request to: `/api/games.php`
- Vite proxies to: `http://localhost:3000/api/games.php`
- Backend handles the request

### Plugin Assets (with /backend prefix)
- Frontend requests: `/backend/plugins/slot/assets/sounds/reels.mp3`
- Vite rewrites to: `/plugins/slot/assets/sounds/reels.mp3`
- Vite proxies to: `http://localhost:3000/plugins/slot/assets/sounds/reels.mp3`
- Backend serves the file from `backend/plugins/` folder

### Plugin Assets (without /backend prefix)
- Frontend requests: `/plugins/slot/assets/sounds/reels.mp3`
- Vite proxies to: `http://localhost:3000/plugins/slot/assets/sounds/reels.mp3`
- Backend serves the file

### Upload Assets
- Frontend requests: `/backend/uploads/banners/image.jpg`
- Vite rewrites to: `/uploads/banners/image.jpg`
- Vite proxies to: `http://localhost:3000/uploads/banners/image.jpg`
- Backend serves the file from `backend/uploads/` folder

## 📝 Important Notes

1. **Backend must be running first** on port 3000
2. **Frontend proxies all requests** - no CORS issues
3. **Both old and new paths work** - `/backend/plugins/...` and `/plugins/...`
4. **Static files are served** by Express from `/plugins` and `/uploads` routes

## ✨ Benefits

- ✅ No CORS errors
- ✅ Single port for frontend (5173)
- ✅ Backend handles all API and file serving
- ✅ Easy development workflow
- ✅ Production-ready setup

## 🔄 For Production

When deploying to production, you have two options:

### Option 1: Build frontend and serve from backend
```bash
cd frontend
npm run build
# Copy dist folder to backend/public
```

### Option 2: Deploy separately
- Deploy backend to: `https://api.yourdomain.com` (port 3000)
- Deploy frontend to: `https://yourdomain.com` (port 80/443)
- Update vite.config.js proxy target to production backend URL