|
| 1 | +# Kube Bind Frontend |
| 2 | + |
| 3 | +A Vue.js + TypeScript frontend application for the Kube Bind project that provides a web interface for binding Kubernetes resources across clusters with SSO authentication. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- 🔐 **SSO Authentication**: OAuth2/OIDC-based authentication via `/api/authorize` endpoint |
| 8 | +- 🔗 **Resource Management**: Browse and bind available Kubernetes resources |
| 9 | +- ⚡ **Modern Stack**: Built with Vue.js 3, TypeScript, and Vite |
| 10 | +- 📱 **Responsive Design**: Works on desktop and mobile devices |
| 11 | + |
| 12 | +## Architecture |
| 13 | + |
| 14 | +The frontend integrates with the existing Go backend through the following endpoints: |
| 15 | + |
| 16 | +- `/api/authorize` - SSO authentication endpoint |
| 17 | +- `/api/callback` - OAuth2 callback handler |
| 18 | +- `/api/resources` - Fetch available resources |
| 19 | +- `/api/bind` - Bind resources to cluster |
| 20 | + |
| 21 | +## Development Setup |
| 22 | + |
| 23 | +### Prerequisites |
| 24 | + |
| 25 | +- Node.js 18+ and npm |
| 26 | +- Running Kube Bind backend server |
| 27 | + |
| 28 | +### Installation |
| 29 | + |
| 30 | +```bash |
| 31 | +# Navigate to web directory |
| 32 | +cd web |
| 33 | + |
| 34 | +# Install dependencies |
| 35 | +npm install |
| 36 | +n |
| 37 | +# Start development server |
| 38 | +npm run dev |
| 39 | +``` |
| 40 | + |
| 41 | +The development server will start on `http://localhost:3000` with API proxy to `http://localhost:8080`. |
| 42 | + |
| 43 | +### Available Scripts |
| 44 | + |
| 45 | +- `npm run dev` - Start development server |
| 46 | +- `npm run build` - Build for production |
| 47 | +- `npm run preview` - Preview production build |
| 48 | +- `npm run lint` - Lint code |
| 49 | +- `npm run type-check` - Run TypeScript type checking |
| 50 | + |
| 51 | +## Authentication Flow |
| 52 | + |
| 53 | +1. User clicks "Login" or accesses protected resource |
| 54 | +2. Frontend redirects to `/api/authorize` with session parameters |
| 55 | +3. Backend handles OAuth2 flow with configured OIDC provider |
| 56 | +4. User is redirected back to frontend with authentication cookie |
| 57 | +5. Frontend can now access protected endpoints |
| 58 | + |
| 59 | +## Project Structure |
| 60 | + |
| 61 | +``` |
| 62 | +src/ |
| 63 | +├── main.ts # Application entry point |
| 64 | +├── App.vue # Root component |
| 65 | +├── services/ |
| 66 | +│ └── auth.ts # Authentication service |
| 67 | +└── views/ |
| 68 | + ├── Home.vue # Landing page |
| 69 | + ├── Login.vue # Login form |
| 70 | + └── Resources.vue # Resource management |
| 71 | +``` |
| 72 | + |
| 73 | +## Configuration |
| 74 | + |
| 75 | +The frontend automatically detects the backend API through Vite proxy configuration. For production deployments, ensure the frontend is served from the same domain as the backend or configure CORS appropriately. |
| 76 | + |
| 77 | +## Building for Production |
| 78 | + |
| 79 | +```bash |
| 80 | +cd web |
| 81 | +npm run build |
| 82 | +``` |
| 83 | + |
| 84 | +The built files will be in the `dist/` directory and can be served by any static file server or integrated into the Go backend's static file serving. |
0 commit comments