FARM-stackgids: zo bouw je fullstack-apps met FastAPI, React & MongoDB

De fullstack FastAPI-, React-, MongoDB (FARM) applicatiegenerator is een krachtige tool die het maken van productieklare webapplicaties stroomlijnt. Door FastAPI voor de backend, React voor de frontend en MongoDB als schaalbare NoSQL-database te integreren, stelt de FARM-generator Python-ontwikkelaars in staat om snel robuuste applicaties te scaffolden met minimale setup. Deze tool is ideaal voor developers die zich willen richten op features bouwen in plaats van boilerplate configureren.

Dit artikel introduceert de FARM-applicatiegenerator, legt de belangrijkste features uit, geeft stapsgewijze installatie-instructies en demonstreert de mogelijkheden met een praktijkvoorbeeld: een takenbeheerapplicatie. Ons doel is te laten zien hoe de generator fullstack-ontwikkeling vereenvoudigt en Python-ontwikkelaars helpt schaalbare, productieklare applicaties te bouwen.

Kun je wel een opfrisser gebruiken voor MongoDB? Bekijk dan de DataCamp-cursus Introduction to MongoDB in Python. 

Wat is de FastAPI Application Generator?

De FARM-generator automatiseert het opzetten van een complete webapplicatiestack met de volgende componenten:

• Fullstack-setup: Genereert een FastAPI-backend, een React-frontend en een MongoDB-database, naadloos geïntegreerd voor snelle ontwikkeling.
• Vooraf geconfigureerde authenticatie: Bevat OAuth2 met JWT, magic link-authenticatie en cookiemanagement voor veilige gebruikers­toegang. OAuth2 met JWT is als een beveiligde “VIP-pas” (JWT-code) die je na inloggen krijgt om privégebieden te betreden.
• Docker Compose-integratie: Levert vooraf geconfigureerde Docker Compose-bestanden voor eenvoudige lokale ontwikkeling en testing.
• Operationele tools: Integreert Celery voor asynchrone taakverwerking, Traefik voor load balancing en GitHub Actions voor CI/CD, zodat je een productieklare omgeving hebt.

De volledige features vind je in de GitHub-repo.

Voordelen voor developers

De FARM-generator biedt belangrijke voordelen:

• Tijdsbesparing: Haalt repetitieve setuptaken weg, zoals authenticatie of databaseverbindingen configureren, zodat je direct kunt beginnen met coderen.
• Best practices: Zorgt voor een schaalbare, veilige en onderhoudbare projectstructuur die voldoet aan industriestandaarden.
• Flexibiliteit: Biedt een aanpasbare basis die je kunt uitbreiden naar de behoeften van je project.

De MongoDB FastAPI Application Generator draaien

Om de mogelijkheden van de generator te illustreren, lopen we de setup van een voorbeeldproject door. We gaan ervan uit dat je Python 3.8+, Node.js, Docker en Docker Compose hebt geïnstalleerd.

Stapsgewijze installatie-instructies

Om de mogelijkheden van de generator te laten zien, maken we een voorbeeldproject genaamd task-manager. Zorg dat je het volgende hebt geïnstalleerd:

• Python 3.11+: Bij voorkeur 3.12, controleer met python3.12 --version.
• Node.js: Voor de React-frontend.
• Docker Desktop: Voor containerized development.
• MongoDB: Lokale installatie (bijv. via Homebrew met brew install [email protected]) of MongoDB Atlas (gebruik een connection URI zoals mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority).
• Cookiecutter: Voor het genereren van de projectsjabloon.
• Hatch: Voor dependencybeheer.
• MongoDB Compass (optioneel): Voor databasevisualisatie.

Maak voordat je verdergaat een virtuele omgeving met /usr/local/bin/python3.12 -m venv task-manager-venv en activeer die met source task-manager-venv/bin/activate.

1. Installeer de cookiecutter-library: pip install cookiecutter
2. Genereer het project: Gebruik de FARM-generator om een project te maken:

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

3. Installeer MongoDB lokaal of gebruik MongoDB Atlas:

brew tap mongodb/brew
brew install [email protected]
brew services start [email protected]Mogelijk gemaakt door

Voor Atlas meld je aan, maak een gratis cluster en haal een connection string op (bijv. mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority) om in je .env-bestand te gebruiken.

4. Omgevingsvariabelen configureren: 

Kopieer en bewerk het .env-bestand:

cp .env.example .env
nano .envMogelijk gemaakt door

Werk bij met je MongoDB-URI, databasenaam en secrets:

MONGODB_URI=mongodb://localhost:27017
MONGO_DATABASE=task_manager
SECRET_KEY=your-secret-key
FIRST_SUPERUSER=[email protected]
FIRST_SUPERUSER_PASSWORD=changethisMogelijk gemaakt door

5. Builden en draaien met Docker Compose:

Zorg dat Docker Desktop draait en voer dan uit:

docker compose build --no-cacheMogelijk gemaakt door

1. docker compose up -d
2. Open de applicatie:
• Frontend: http://localhost:3000
• Backend: http://localhost/api/v1
• Swagger UI: http://localhost/docs (interactieve API-docs)
• ReDoc: http://localhost/redoc
• Flower: http://localhost:5555 (Celery-monitoring)
• Traefik UI: http://localhost:8090 (routingdashboard)
3. Log in met [email protected] (wachtwoord: changethis).
4. Test authenticatie: Gebruik Swagger UI (/docs) om /auth/login of /auth/magic-link endpoints te testen.
5. Stel CI/CD in: Push naar GitHub om de meegeleverde GitHub Actions-workflows te triggeren.

Verken de gegenereerde fullstack-projectstructuur

Wanneer je de FARM-generator gebruikt, bouwt deze een task-manager-project waarin alles netjes is georganiseerd. Zie het als een prefab huis waarin elke kamer een functie heeft:

• backend/: Dit is de keuken waar de FastAPI-backend draait. Hij bevat mappen zoals app/ (voor je API-code) en conf/ (voor instellingen) om taken en data af te handelen.

• frontend/: Dit is de woonkamer waar gebruikers je website zien, aangedreven door Next.js/React. De map app/ bevat pagina’s (bijv. about, TaskList) met bestanden zoals layout.tsx (de paginaraamwerk) en page.tsx (de inhoud). De map public/ slaat dingen op zoals het icoon van je site.

• Overige bestanden: Je vindt docker-compose.yml (om alles met Docker te draaien), .env (je geheime instellingen) en .github/workflows/ (voor automatisch testen wanneer je je code deelt).

Deze setup is klaar om te groeien, en de generator voegt handige tools toe om development makkelijker te maken!

Wat je kunt doen met de features van de generator

De FARM-generator wordt geleverd met krachtige ingebouwde tools om allerlei projecten te maken. Hier is een eenvoudige kijk op wat ze doen en hoe ze helpen:

Docker Compose-integratie: geoptimaliseerd voor lokale ontwikkeling

• Wat het doet: Docker Compose is als een magische knop die je hele project (backend, frontend, database) met één command opzet en draait. Het gebruikt containers om alles gescheiden te houden en is gemakkelijk lokaal te testen.
• Hoe het helpt: Je kunt je task-manager-app starten met docker compose up -d en stoppen met docker compose down. Perfect om ideeën uit te proberen zonder je computer te vervuilen. Check de status met docker compose ps—als alles “Up” is, zit je goed!

Voorbeeld: Na het opzetten van je project, voer je simpelweg uit:

cd task-manager
docker compose up -dMogelijk gemaakt door

Open http://localhost:3000 om je frontend te zien, en je draait alles lokaal!

Ingebouwd authenticatiesysteem

• Wat het doet: Dit voegt een login­systeem toe met gebruikersaccounts, inclusief een standaard superuser (zoals [email protected] met wachtwoord changethis). Het gebruikt OAuth2 met JWT-tokens (beveiligde inlogcodes) en magic links (emaillinks om in te loggen).
• Hoe het helpt: Je kunt gebruikers laten registreren, inloggen of een magic link gebruiken om je app te betreden. Probeer het op http://localhost/docs in Swagger UI—zoek naar /api/v1/login/oauth om het inloggen te testen. Ideaal voor apps waar alleen bepaalde mensen dingen mogen zien, zoals een privé takenlijst.

Voorbeeld: Log in met de standaardgebruiker:

1. Ga naar http://localhost/docs.
2. Zoek /api/v1/login/oauth, voer [email protected] en dit wachtwoord in, en klik op “Execute”. Je krijgt een JWT-token om te gebruiken voor privépagina’s!

De task manager API

Demo voor Oauth API

Response voor Oauth API

FastAPI-backendfeatures

Laten we de belangrijkste features van de FastAPI-aangedreven backend bekijken en hoe die databasehandelingen, API-ontwerp en schaalbaarheid eenvoudiger maken.

• MongoDB Motor: Dit is de motor die supersnel met je MongoDB-database praat, zelfs bij veel gelijktijdige requests.
• MongoDB ODMantic: Zie dit als een helper die data in MongoDB makkelijker opslaat en terugvindt, alsof je taken netjes sorteert in doosjes.
• Standaard CRUD-ondersteuning: CRUD staat voor create, read, update, delete. Deze feature geeft je kant-en-klare tools om data (zoals taken) toe te voegen, te bekijken, te wijzigen of te verwijderen zonder van nul te beginnen.
• Gebaseerd op standaarden: Volgt regels zoals OpenAPI en JSON Schema, zodat je API duidelijk is en werkt met andere tools of apps.
• Hoe het helpt: Je bouwt snel een backend om taken op te slaan. De generator zet dit klaar, zodat jij alleen je eigen ideeën toevoegt, zoals nieuwe taakfeatures, met de geleverde code.

Voorbeeld: Voeg een snelle taakviewer toe 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)Mogelijk gemaakt door

Test het op http://localhost/api/v1/tasks na opnieuw bouwen met docker compose up --build.

Next.js/React-frontend

De React-frontend is waar gebruikers met je app interacteren. Laten we bekijken hoe die is opgebouwd en welke tools zijn inbegrepen om strakke, responsieve pagina’s te bouwen.

• Middleware-autorisatie: Werkt als portier en checkt of gebruikers zijn ingelogd voordat ze bepaalde pagina’s zien (bijv. alleen ingelogde gebruikers zien /TaskList).
• Formvalidatie met React Hook Form: Zorgt dat formulieren (zoals een taak-toevoegformulier) de juiste info bevatten voordat ze worden opgeslagen, zodat er geen lege taken doorsluipen.
• State management met Redux: Houdt bij wat er geselecteerd is, zoals welke taken, waardoor je app soepel blijft werken, ook met veel data.
• CSS en templates met TailwindCSS, HeroIcons en HeadlessUI: Dit zijn kant-en-klare designtools. TailwindCSS stijlt je pagina’s, HeroIcons voegt mooie iconen toe en HeadlessUI levert goed werkende knoppen en menu’s.
• Hoe het helpt: Je bouwt eenvoudig een fraai ogende takenpagina met gebruiksvriendelijke formulieren en beveiligde toegang. De generator zet het design klaar, zodat jij je kunt focussen op taken of andere features.

Voorbeeld: Voeg een simpel taakformulier toe 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>
  );
}Mogelijk gemaakt door

Ga naar http://localhost:3000/TaskList om een taak toe te voegen.

Je task manager uitbreiden

De generator geeft je een solide start voor een task manager. Je kunt bijvoorbeeld:

• Een knop toevoegen om taken als voltooid te markeren met de CRUD-tools.
• Authenticatie gebruiken om je takenlijst privé te houden.
• Stijlen met TailwindCSS om het er top uit te laten zien.
• Celery instellen om taakherinneringen per e-mail te versturen.

Andere ideeën om te verkennen

Met deze features bouw je meer dan alleen een task manager:

• Blog of website: Sla posts op in MongoDB, toon ze met FastAPI en ontwerp een mooie site met Next.js.
• Online winkel: Bewaar producten in MongoDB, verwerk orders met Celery en maak een shoppagina met Next.js.
• Live-updates: Toon real-time info (zoals een score) met MongoDB, de livefeatures van FastAPI en een Next.js-dashboard.

Conclusie

De FARM-applicatiegenerator stroomlijnt fullstack-ontwikkeling met een vooraf geconfigureerde, productieklare stack die FastAPI, React en MongoDB integreert. De automatisering van setuptaken, naleving van best practices en flexibele architectuur maken het een waardevolle tool voor Python-ontwikkelaars. Of je nu een task manager of een complexe webapplicatie bouwt, de FARM-generator versnelt de ontwikkeling en borgt schaalbaarheid. Probeer het vandaag nog met de installatie-instructies en bekijk de volledige documentatie in de GitHub-repository om het volle potentieel te benutten!

Wil je meer leren? Bekijk dan deze handige bronnen:

• Officiële repository: Bekijk de broncode, lees de volledige documentatie en volg updates of draag bij.
• FastAPI-documentatie: Leer meer over de features van FastAPI en hoe het de backend aanstuurt.
• Introduction to FastAPI Course: Bouw robuuste, productieklare API’s met FastAPI, beheers HTTP-operaties, validatie en async execution om efficiënte data- en ML-pijplijnen te maken.