FARM-Stack-Guide: So baust du Full-Stack-Apps mit FastAPI, React & MongoDB

Der Full-Stack-Anwendungsgenerator für FastAPI, React und MongoDB (FARM) ist ein leistungsstarkes Tool, das die Erstellung produktionsreifer Webanwendungen deutlich vereinfacht. Durch die Integration von FastAPI für das Backend, React für das Frontend und MongoDB als skalierbare NoSQL-Datenbank ermöglicht der FARM-Generator Python-Entwicklerinnen und -Entwicklern, robuste Anwendungen mit minimalem Setup schnell zu scaffolden. Ideal für alle, die Features bauen wollen statt Boilerplate zu konfigurieren.

Dieser Artikel stellt den FARM-Generator vor, erklärt zentrale Features, führt dich Schritt für Schritt durch das Setup und zeigt seine Möglichkeiten an einem Praxisbeispiel: einer Task-Management-App. Wir möchten zeigen, wie der Generator Full-Stack-Entwicklung vereinfacht und Python-Teams befähigt, skalierbare, produktionsreife Anwendungen zu erstellen.

Brauchst du ein MongoDB-Refresher? Dann schau dir unbedingt den DataCamp-Kurs Introduction to MongoDB in Python an. 

Was ist der FastAPI Application Generator?

Der FARM-Generator automatisiert die Erstellung eines kompletten Web-Stacks mit folgenden Komponenten:

• Full-Stack-Setup: Generiert ein FastAPI-Backend, ein React-Frontend und eine MongoDB-Datenbank – nahtlos integriert für schnelles Development.
• Vorkonfigurierte Authentifizierung: Enthält OAuth2 mit JWT, Magic-Link-Login und Cookie-Management für sicheren Zugriff. OAuth2 mit JWT ist wie ein sicherer „VIP-Pass“ (JWT-Code), den du nach dem Login erhältst, um private Bereiche zu betreten.
• Docker-Compose-Integration: Liefert vorkonfigurierte Docker-Compose-Dateien für einfaches lokales Development und Testing.
• Betriebstools: Integriert Celery für asynchrone Aufgabenverarbeitung, Traefik für Load-Balancing und GitHub Actions für CI/CD – für eine produktionsreife Umgebung.

Die vollständigen Features findest du im GitHub-Repo.

Vorteile für Entwicklerinnen und Entwickler

Der FARM-Generator bietet klare Mehrwerte:

• Zeit sparen: Spart repetitive Setups wie Authentifizierung oder Datenbankverbindungen – du kannst sofort loscodieren.
• Best Practices: Sorgt für eine skalierbare, sichere und wartbare Projektstruktur nach Branchenstandards.
• Flexibilität: Bietet eine anpassbare Basis, die du für spezifische Anforderungen erweitern kannst.

So startest du den MongoDB FastAPI Application Generator

Um die Möglichkeiten zu zeigen, richten wir ein Beispielprojekt ein. Die folgenden Schritte setzen Python 3.8+, Node.js, Docker und Docker Compose voraus.

Schritt-für-Schritt-Setup

Zur Demonstration erstellen wir ein Musterprojekt namens task-manager. Stelle sicher, dass Folgendes installiert ist:

• Python 3.11+: Am besten 3.12, prüfbar mit python3.12 --version.
• Node.js: Für das React-Frontend.
• Docker Desktop: Für containerisiertes Development.
• MongoDB: Lokal (z. B. via Homebrew mit brew install mongodb-community@7.0) oder MongoDB Atlas (verwende eine Verbindungs-URI wie mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority).
• Cookiecutter: Zum Generieren des Projekt-Templates.
• Hatch: Für das Abhängigkeitsmanagement.
• MongoDB Compass (optional): Zur Visualisierung der Datenbank.

Lege vorab eine virtuelle Umgebung an mit /usr/local/bin/python3.12 -m venv task-manager-venv und aktiviere sie mit source task-manager-venv/bin/activate.

1. Installiere die Cookiecutter-Bibliothek: pip install cookiecutter
2. Generiere das Projekt: Nutze den FARM-Generator, um ein Projekt zu erstellen:

cookiecutter https://github.com/mongodb-labs/full-stack-fastapi-mongodb --no-input project_name="task-manager"
cd task-manager

3. Installiere MongoDB lokal oder nutze MongoDB Atlas:

brew tap mongodb/brew
brew install mongodb-community@7.0
brew services start mongodb-community@7.0

Für Atlas registrierst du dich, erstellst einen kostenlosen Cluster und holst dir einen Connection-String (z. B. mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority) für deine .env-Datei.

4. Umgebungsvariablen konfigurieren: 

Kopiere und bearbeite die .env-Datei:

cp .env.example .env
nano .env

Ergänze deine MongoDB-URI, den Datenbanknamen und Secrets:

MONGODB_URI=mongodb://localhost:27017
MONGO_DATABASE=task_manager
SECRET_KEY=your-secret-key
FIRST_SUPERUSER=admin@task-manager.com
FIRST_SUPERUSER_PASSWORD=changethis

5. Mit Docker Compose bauen und starten:

Stelle sicher, dass Docker Desktop läuft, dann:

docker compose build --no-cache

1. docker compose up -d
2. Greife auf die Anwendung zu:
• Frontend: http://localhost:3000
• Backend: http://localhost/api/v1
• Swagger UI: http://localhost/docs (interaktive API-Dokumentation)
• ReDoc: http://localhost/redoc
• Flower: http://localhost:5555 (Celery-Monitoring)
• Traefik UI: http://localhost:8090 (Routing-Dashboard)
3. Logge dich ein mit admin@task-manager.com (Passwort: changethis).
4. Teste die Authentifizierung: Nutze die Swagger UI (/docs), um die Endpunkte /auth/login oder /auth/magic-link zu testen.
5. Richte CI/CD ein: Push auf GitHub, um die mitgelieferten GitHub-Actions-Workflows zu starten.

Erkunde die generierte Full-Stack-Projektstruktur

Wenn du den FARM-Generator nutzt, entsteht ein Task-Manager-Projekt mit sauberer Struktur. Stell es dir wie ein fertiges Haus vor, in dem jeder Raum eine Aufgabe hat:

• backend/: Die „Küche“, in der das FastAPI-Backend arbeitet. Enthält Ordner wie app/ (für deinen API-Code) und conf/ (für Einstellungen), um Aufgaben und Daten zu verarbeiten.

• frontend/: Das „Wohnzimmer“, in dem Nutzerinnen und Nutzer deine Website sehen – auf Basis von Next.js/React. Der Ordner app/ enthält Seiten (z. B. about, TaskList) mit Dateien wie layout.tsx (Rahmen) und page.tsx (Inhalt). Im Ordner public/ liegen u. a. die Website-Icons.

• Weitere Dateien: Du findest docker-compose.yml (zum Starten via Docker), .env (deine geheimen Einstellungen) und .github/workflows/ (für automatisierte Tests beim Teilen deines Codes).

Dieses Setup ist bereit zu wachsen – und der Generator bringt hilfreiche Tools mit, die die Entwicklung beschleunigen!

Was du mit den Features des Generators bauen kannst

Der FARM-Generator liefert starke Tools, mit denen du viele Projekttypen umsetzen kannst. Hier eine einfache Übersicht, was sie tun und wie sie helfen:

Docker-Compose-Integration: Optimiert für lokale Entwicklung

• Was sie tut: Docker Compose ist wie ein magischer Knopf, der dein gesamtes Projekt (Backend, Frontend, Datenbank) mit einem Befehl startet. Container halten alles sauber getrennt – perfekt fürs lokale Testen.
• Wie sie hilft: Du startest deine Task-Manager-App mit docker compose up -d und stoppst sie mit docker compose down. Ideal, um Ideen auszuprobieren, ohne dein System zu „verstellen“. Mit docker compose ps siehst du den Status – steht überall „Up“, passt es!

Beispiel: Nach dem Setup einfach ausführen:

cd task-manager
docker compose up -d

Öffne http://localhost:3000 für das Frontend – schon läuft alles lokal!

Integriertes Authentifizierungssystem

• Was es tut: Fügt ein Login-System mit Benutzerkonten hinzu, inkl. Default-Superuser (z. B. admin@task-manager.com mit Passwort changethis). Es nutzt OAuth2 mit JWT-Tokens (sichere Login-Codes) und Magic Links (Login per E-Mail-Link).
• Wie es hilft: Nutzer können sich registrieren, einloggen oder per Magic Link zugreifen. Probiere es in der Swagger UI unter http://localhost/docs – suche /api/v1/login/oauth, um den Login zu testen. Ideal für Apps mit geschützten Bereichen wie privaten Aufgabenlisten.

Beispiel: Logge dich mit dem Standardnutzer ein:

1. Gehe zu http://localhost/docs.
2. Finde /api/v1/login/oauth, gib admin@task-manager.com und das Passwort ein, und klicke auf „Execute“. Du erhältst ein JWT-Token für private Seiten!

Die Task-Manager-API

Demo der OAuth-API

Antwort der OAuth-API

FastAPI-Backend-Features

Ein Blick auf die wichtigsten Features des FastAPI-Backends – und wie sie Datenbankoperationen, API-Design und Skalierung vereinfachen.

• MongoDB Motor: Der „Motor“, der extrem schnell mit deiner MongoDB spricht – auch bei vielen gleichzeitigen Anfragen.
• MongoDB ODMantic: Ein Helfer, der Speichern und Finden von Daten in MongoDB vereinfacht – wie Aufgaben sauber sortieren.
• CRUD out of the box: CRUD steht für Create, Read, Update, Delete. Du bekommst fertige Werkzeuge, um Daten (z. B. Tasks) anzulegen, anzuzeigen, zu ändern oder zu löschen – ohne bei null zu starten.
• Standards-basiert: Hält sich an OpenAPI und JSON Schema – deine API ist klar definiert und kompatibel mit Tools und anderen Apps.
• Wie es hilft: Du baust schnell ein Backend zum Speichern von Tasks. Der Generator richtet alles ein – du ergänzt nur eigene Logik, z. B. neue Task-Features.

Beispiel: Schneller Task-Viewer in backend/app/api/tasks.py:

from fastapi import APIRouter, Depends
from odmantic import AIOEngine, Model
from motor.motor_asyncio import AsyncIOMotorClient
router = APIRouter(prefix="/tasks", tags=["tasks"])
class Task(Model):
    title: str
async def get_db():
    client = AsyncIOMotorClient("mongodb://localhost:27017")
    return AIOEngine(client, database="task_manager")
@router.get("/")  # View all tasks
async def get_tasks(db: AIOEngine = Depends(get_db)):
    return await db.find(Task)

Teste es unter http://localhost/api/v1/tasks, nachdem du mit docker compose up --build neu gebaut hast.

Next.js/React-Frontend

Das React-Frontend ist die Interaktionsoberfläche deiner App. So ist es aufgebaut – und diese Tools helfen dir beim Erstellen moderner, responsiver Seiten.

• Middleware-Authorisierung: Agiert als Türsteher und prüft Logins, bevor bestimmte Seiten sichtbar werden (z. B. /TaskList nur für eingeloggte Nutzer).
• Formularvalidierung mit React Hook Form: Stellt sicher, dass Formulare (z. B. „Task hinzufügen“) korrekt ausgefüllt sind – leere Tasks rutschen nicht durch.
• State-Management mit Redux: Hält Zustände im Blick, z. B. welche Tasks ausgewählt sind – für flüssige UIs auch bei viel Daten.
• CSS & Templates mit TailwindCSS, HeroIcons und HeadlessUI: Vorgefertigte Design-Bausteine: TailwindCSS für Styles, HeroIcons für Icons und HeadlessUI für bedienfertige Komponenten wie Buttons und Menüs.
• Wie es hilft: Du baust schnell eine ansprechende Task-Seite mit validierten Formularen und gesichertem Zugriff. Das Grunddesign steht – du fokussierst dich auf Features.

Beispiel: Einfaches Task-Formular in frontend/app/TaskList/page.tsx:

import { useState } from 'react';
export default function TaskList() {
  const [task, setTask] = useState({ title: '' });
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    fetch('http://localhost/api/v1/tasks', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(task),
    });
    setTask({ title: '' });
  };
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold">Add Task</h1>
      <form onSubmit={handleSubmit}>
        <input
          className="border p-2"
          value={task.title}
          onChange={e => setTask({ title: e.target.value })}
          placeholder="Task name"
        />
        <button className="bg-blue-500 text-white p-2" type="submit">Add</button>
      </form>
    </div>
  );
}

Besuche http://localhost:3000/TaskList, um eine Aufgabe hinzuzufügen.

Deinen Task-Manager ausbauen

Der Generator liefert ein starkes Fundament. Zum Beispiel kannst du:

• Einen Button hinzufügen, um Aufgaben als erledigt zu markieren – per CRUD-Logik.
• Mit Authentifizierung deine Liste privat halten.
• Mit TailwindCSS das Design aufwerten.
• Celery einrichten, um Erinnerungen per E-Mail zu senden.

Weitere Ideen

Mit diesen Features kannst du mehr als nur einen Task-Manager bauen:

• Blog oder Website: Beiträge in MongoDB speichern, mit FastAPI ausspielen und mit Next.js gestalten.
• Onlineshop: Produkte in MongoDB, Bestellungen via Celery verarbeiten, Shop-Frontend mit Next.js.
• Live-Updates: Echtzeitinfos (z. B. Spielstände) mit MongoDB, FastAPI-Streaming und einem Next.js-Dashboard.

Fazit

Der FARM-Generator verschlankt die Full-Stack-Entwicklung mit einem vorkonfigurierten, produktionsreifen Stack aus FastAPI, React und MongoDB. Automatisierte Setups, Best Practices und flexible Architektur machen ihn zu einem wertvollen Tool für Python-Entwicklerinnen und -Entwickler. Ob Task-Manager oder komplexe Webanwendung – der Generator beschleunigt die Entwicklung und sorgt für Skalierbarkeit. Probiere es aus, folge der Anleitung und stöbere im GitHub-Repository, um das volle Potenzial zu nutzen!

Wenn du tiefer einsteigen willst, helfen dir diese Ressourcen weiter:

• Offizielles Repository: Durchstöbere den Quellcode, lies die Doku, verfolge Updates oder trage bei.
• FastAPI-Dokumentation: Erfahre mehr über FastAPI und wie es das Backend antreibt.
• Introduction to FastAPI Course: Baue robuste, produktionsreife APIs mit FastAPI – meistere HTTP-Operationen, Validierung und asynchrone Ausführung für effiziente Daten- und ML-Pipelines.