Initial commit
This commit is contained in:
Pit Friedrich
@@ -0,0 +1,228 @@
|
||||
# Unraid Monitor - Projekt-Layout
|
||||
|
||||
## Komplette Verzeichnisstruktur
|
||||
|
||||
```
|
||||
unraid-monitor/
|
||||
│
|
||||
├── docker-compose.yml # Docker Compose Konfiguration
|
||||
├── .gitignore # Git Ignore Rules
|
||||
├── README.md # Hauptdokumentation
|
||||
├── SETUP.md # Setup-Anleitung für Unraid
|
||||
│
|
||||
├── backend/ # Backend (Node.js + TypeScript)
|
||||
│ ├── src/
|
||||
│ │ ├── controllers/ # API Controller
|
||||
│ │ │ ├── authController.ts # Login, Register, Me
|
||||
│ │ │ ├── systemController.ts # System Stats, Uptime
|
||||
│ │ │ └── dockerController.ts # Container Management
|
||||
│ │ │
|
||||
│ │ ├── services/ # Business Logic
|
||||
│ │ │ ├── systemService.ts # System Info (CPU, RAM, Disk)
|
||||
│ │ │ └── dockerService.ts # Docker API Integration
|
||||
│ │ │
|
||||
│ │ ├── middleware/ # Express Middleware
|
||||
│ │ │ └── auth.ts # JWT Authentication
|
||||
│ │ │
|
||||
│ │ ├── types/ # TypeScript Typen
|
||||
│ │ │ └── index.ts # Interfaces (User, SystemStats, etc.)
|
||||
│ │ │
|
||||
│ │ └── index.ts # Express Server Entry Point
|
||||
│ │
|
||||
│ ├── package.json # NPM Dependencies
|
||||
│ ├── tsconfig.json # TypeScript Config
|
||||
│ ├── Dockerfile # Docker Build
|
||||
│ ├── .env.example # Environment Variables Beispiel
|
||||
│ └── .env # Environment Variables (erstellen!)
|
||||
│
|
||||
└── frontend/ # Frontend (React + TypeScript + PWA)
|
||||
├── public/ # Static Assets
|
||||
│ ├── favicon.ico # (optional - eigenes Icon)
|
||||
│ ├── icon-192.png # (optional - PWA Icon 192x192)
|
||||
│ ├── icon-512.png # (optional - PWA Icon 512x512)
|
||||
│ └── apple-touch-icon.png # (optional - iOS Icon)
|
||||
│
|
||||
├── src/
|
||||
│ ├── components/ # React Components
|
||||
│ │ ├── Login.tsx # Login-Seite
|
||||
│ │ ├── Layout.tsx # Layout mit Navigation
|
||||
│ │ ├── Dashboard.tsx # Dashboard mit System Stats
|
||||
│ │ └── Containers.tsx # Container-Verwaltung
|
||||
│ │
|
||||
│ ├── stores/ # Zustand State Management
|
||||
│ │ └── authStore.ts # Authentication State
|
||||
│ │
|
||||
│ ├── lib/ # Utilities & API
|
||||
│ │ ├── api.ts # Axios API Client + Types
|
||||
│ │ └── utils.ts # Helper Functions (formatBytes, etc.)
|
||||
│ │
|
||||
│ ├── App.tsx # Main App mit Routing
|
||||
│ ├── main.tsx # React Entry Point
|
||||
│ ├── index.css # Tailwind CSS + Custom Styles
|
||||
│ └── vite-env.d.ts # Vite Types
|
||||
│
|
||||
├── index.html # HTML Entry
|
||||
├── package.json # NPM Dependencies
|
||||
├── tsconfig.json # TypeScript Config
|
||||
├── tsconfig.node.json # TypeScript Config für Node
|
||||
├── vite.config.ts # Vite + PWA Config
|
||||
├── tailwind.config.js # Tailwind CSS Config
|
||||
├── postcss.config.js # PostCSS Config
|
||||
├── Dockerfile # Docker Build
|
||||
├── .env.example # Environment Variables Beispiel
|
||||
└── .env # Environment Variables (optional)
|
||||
```
|
||||
|
||||
## Datei-Checkliste
|
||||
|
||||
### Root-Level (unraid-monitor/)
|
||||
- [ ] docker-compose.yml
|
||||
- [ ] .gitignore
|
||||
- [ ] README.md
|
||||
- [ ] SETUP.md
|
||||
|
||||
### Backend (backend/)
|
||||
- [ ] package.json
|
||||
- [ ] tsconfig.json
|
||||
- [ ] Dockerfile
|
||||
- [ ] .env.example
|
||||
- [ ] .env (manuell erstellen!)
|
||||
|
||||
#### Backend Source (backend/src/)
|
||||
- [ ] index.ts
|
||||
|
||||
##### Controllers (backend/src/controllers/)
|
||||
- [ ] authController.ts
|
||||
- [ ] systemController.ts
|
||||
- [ ] dockerController.ts
|
||||
|
||||
##### Services (backend/src/services/)
|
||||
- [ ] systemService.ts
|
||||
- [ ] dockerService.ts
|
||||
|
||||
##### Middleware (backend/src/middleware/)
|
||||
- [ ] auth.ts
|
||||
|
||||
##### Types (backend/src/types/)
|
||||
- [ ] index.ts
|
||||
|
||||
### Frontend (frontend/)
|
||||
- [ ] package.json
|
||||
- [ ] tsconfig.json
|
||||
- [ ] tsconfig.node.json
|
||||
- [ ] vite.config.ts
|
||||
- [ ] tailwind.config.js
|
||||
- [ ] postcss.config.js
|
||||
- [ ] Dockerfile
|
||||
- [ ] index.html
|
||||
- [ ] .env.example
|
||||
- [ ] .env (optional)
|
||||
|
||||
#### Frontend Source (frontend/src/)
|
||||
- [ ] main.tsx
|
||||
- [ ] App.tsx
|
||||
- [ ] index.css
|
||||
- [ ] vite-env.d.ts
|
||||
|
||||
##### Components (frontend/src/components/)
|
||||
- [ ] Login.tsx
|
||||
- [ ] Layout.tsx
|
||||
- [ ] Dashboard.tsx
|
||||
- [ ] Containers.tsx
|
||||
|
||||
##### Stores (frontend/src/stores/)
|
||||
- [ ] authStore.ts
|
||||
|
||||
##### Lib (frontend/src/lib/)
|
||||
- [ ] api.ts
|
||||
- [ ] utils.ts
|
||||
|
||||
#### Frontend Public (frontend/public/)
|
||||
- [ ] favicon.ico (optional)
|
||||
- [ ] icon-192.png (optional)
|
||||
- [ ] icon-512.png (optional)
|
||||
- [ ] apple-touch-icon.png (optional)
|
||||
|
||||
## Wichtige Ordner erstellen
|
||||
|
||||
Wenn du die Dateien manuell erstellst, musst du die Ordner vorher anlegen:
|
||||
|
||||
```bash
|
||||
# Root
|
||||
mkdir -p unraid-monitor
|
||||
|
||||
# Backend
|
||||
mkdir -p unraid-monitor/backend/src/{controllers,services,middleware,types}
|
||||
|
||||
# Frontend
|
||||
mkdir -p unraid-monitor/frontend/src/{components,stores,lib}
|
||||
mkdir -p unraid-monitor/frontend/public
|
||||
```
|
||||
|
||||
## Dateigrößen (ungefähr)
|
||||
|
||||
**Backend:**
|
||||
- Gesamt: ~50 Dateien nach `npm install`
|
||||
- Source Code: 8 TypeScript-Dateien
|
||||
- node_modules/: ~200MB
|
||||
|
||||
**Frontend:**
|
||||
- Gesamt: ~2000 Dateien nach `npm install`
|
||||
- Source Code: 12 TypeScript/TSX-Dateien
|
||||
- node_modules/: ~400MB
|
||||
|
||||
## Installation der Dependencies
|
||||
|
||||
**Backend:**
|
||||
```bash
|
||||
cd backend
|
||||
npm install
|
||||
```
|
||||
|
||||
Installiert:
|
||||
- express, cors, helmet
|
||||
- jsonwebtoken, bcryptjs
|
||||
- dockerode, systeminformation
|
||||
- dotenv, express-rate-limit
|
||||
- TypeScript + Dev Tools
|
||||
|
||||
**Frontend:**
|
||||
```bash
|
||||
cd frontend
|
||||
npm install
|
||||
```
|
||||
|
||||
Installiert:
|
||||
- react, react-dom, react-router-dom
|
||||
- @tanstack/react-query, axios, zustand
|
||||
- lucide-react, recharts
|
||||
- vite, vite-plugin-pwa
|
||||
- tailwindcss, postcss, autoprefixer
|
||||
- TypeScript + Dev Tools
|
||||
|
||||
## Nach dem Setup
|
||||
|
||||
Nach `npm install` in beiden Ordnern:
|
||||
|
||||
```
|
||||
backend/
|
||||
├── node_modules/ # ~200MB
|
||||
├── dist/ # Nach Build: Compiled JS
|
||||
└── ...
|
||||
|
||||
frontend/
|
||||
├── node_modules/ # ~400MB
|
||||
├── dist/ # Nach Build: Production Files
|
||||
└── ...
|
||||
```
|
||||
|
||||
## Docker Images
|
||||
|
||||
Nach `docker-compose build`:
|
||||
|
||||
- **unraid-monitor-backend**: ~200MB
|
||||
- **unraid-monitor-frontend**: ~50MB (Nginx + Build)
|
||||
|
||||
---
|
||||
|
||||
**Tipp:** Nutze das bereitgestellte Projekt-Archiv, dann sind alle Dateien bereits an der richtigen Stelle! 🎯
|
||||
Reference in New Issue
Block a user