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:

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.