101 lines
2.4 KiB
Markdown
101 lines
2.4 KiB
Markdown
# FastAPI + Vue 3 (Vite) Monorepo
|
|
|
|
Dieses Repository enthält ein Backend (FastAPI) und ein Frontend (Vue 3 + Vite).
|
|
Im Dev-Modus läuft das Frontend über Vite (`localhost:5173`) und proxyt API-Calls auf das Backend (`127.0.0.1:8000`) via `/api`.
|
|
|
|
## Tech Stack
|
|
|
|
**Backend**
|
|
- FastAPI
|
|
- SQLAlchemy + Alembic (Migrationen)
|
|
- SQLite (Default, konfigurierbar über `DATABASE_URL`)
|
|
|
|
**Frontend**
|
|
- Vue 3
|
|
- Vite
|
|
- TypeScript
|
|
- Axios (gekapselt in einer API-Schicht)
|
|
- `openapi-typescript` (typed Client-Types aus FastAPI OpenAPI)
|
|
|
|
---
|
|
|
|
## Repository Struktur (High-Level)
|
|
|
|
.
|
|
├─ LagerFastApi/ # Backend (LagerFastApi)
|
|
│ └─ app/
|
|
│ ├─ api/ # Router/Schemas (HTTP Layer)
|
|
│ ├─ db/ # DB Session/Engine, Alembic Integration
|
|
│ ├─ domain/ # Domain Model (framework-agnostisch)
|
|
│ └─ main.py # FastAPI App Entry
|
|
├─ alembic/ # Migrationen
|
|
├─ data/ # Lokale SQLite (ignored)
|
|
├─ frontend/ # Vue 3 + Vite
|
|
│ ├─ src/
|
|
│ │ ├─ api/ # HTTP + API Adapter (einziger Axios-Ort)
|
|
│ │ ├─ features/ # Feature-Services + Views/Pages
|
|
│ │ └─ generated/ # Generierte OpenAPI Types (ignored)
|
|
│ └─ vite.config.ts # Proxy /api -> 127.0.0.1:8000
|
|
└─ package.json # Root Dev-Orchestrierung (optional)
|
|
|
|
|
|
---
|
|
|
|
## Voraussetzungen
|
|
|
|
- Python 3.11+ (empfohlen)
|
|
- Node.js 20+ (du nutzt bereits eine aktuelle Version)
|
|
- Git
|
|
|
|
---
|
|
|
|
## Setup
|
|
|
|
### 1) Backend installieren
|
|
|
|
Im Projektroot:
|
|
|
|
```bash
|
|
python -m venv .venv
|
|
# Windows PowerShell:
|
|
.\.venv\Scripts\Activate.ps1
|
|
|
|
pip install -r requirements.txt
|
|
|
|
Db-Migrationen anwenden: alembic upgrade head
|
|
Backend starten: python -m uvicorn fastapi_demo.app.main:app --reload --host 127.0.0.1 --port 8000
|
|
Test:
|
|
OpenAPI JSON: http://127.0.0.1:8000/openapi.json
|
|
Health: http://127.0.0.1:8000/api/health
|
|
|
|
|
|
Frontend Setup
|
|
1) Dependencies installieren
|
|
cd frontend
|
|
npm install
|
|
2) Env konfigurieren
|
|
|
|
frontend/.env.development:
|
|
|
|
VITE_API_BASE=/api
|
|
VITE_OPENAPI_URL=http://127.0.0.1:8000/openapi.json
|
|
3) OpenAPI Types generieren
|
|
|
|
Backend muss laufen!
|
|
|
|
npm run gen:api
|
|
4) Frontend starten
|
|
npm run dev
|
|
|
|
Webpage:
|
|
|
|
http://localhost:5173
|
|
|
|
Proxy-Test:
|
|
|
|
http://localhost:5173/api/health (geht über Vite Proxy zum Backend)
|
|
|
|
Dev-Orchestrierung (optional, Root)
|
|
|
|
Du kannst optional eine Root-package.json verwenden, um Backend+Frontend mit einem Command zu starten.
|