Modul 11: Praxis

json-server als Mock-Backend

Blitzschnelles REST-API-Prototyping mit json-server

Was ist json-server?

json-server erstellt aus einer einzigen JSON-Datei eine vollständige REST-API — mit CRUD-Operationen, Filterung, Paginierung und Sortierung. In unter 30 Sekunden hast du ein Mock-Backend.

Perfekt für Frontend-Entwicklung, wenn das echte Backend noch nicht fertig ist, oder für Prototypen und Demos.

🛤️

Rails-Vergleich: Rails API vs json-server

In Rails erzeugst du mit rails new api --api ein API-Backend mit Datenbank, Migrations und Controllern. json-server braucht davon nichts — eine JSON-Datei reicht. Dafür ist es nur für Prototyping gedacht, nicht für Produktion.

Feature	Rails API	json-server
Setup-Zeit	~5 Minuten	~30 Sekunden
Datenbank	PostgreSQL/SQLite	JSON-Datei
Validierung	ActiveModel	Keine (oder Middleware)
Produktion	Ja	Nein (nur Prototyping)

Installation und Setup

Terminal

# json-server installieren
npm install -D json-server

db.json

{
  "kontakte": [
    {
      "id": 1,
      "name": "Anna Schmidt",
      "email": "anna@beispiel.de",
      "telefon": "+49 170 1234567",
      "firma": "TechStart GmbH",
      "rolle": "Entwicklerin"
    },
    {
      "id": 2,
      "name": "Max Weber",
      "email": "max@beispiel.de",
      "telefon": "+49 171 9876543",
      "firma": "WebDesign AG",
      "rolle": "Designer"
    },
    {
      "id": 3,
      "name": "Lisa Müller",
      "email": "lisa@beispiel.de",
      "telefon": "+49 172 5555555",
      "firma": "DataFlow GmbH",
      "rolle": "Projektmanagerin"
    }
  ],
  "firmen": [
    { "id": 1, "name": "TechStart GmbH", "stadt": "Berlin" },
    { "id": 2, "name": "WebDesign AG", "stadt": "München" },
    { "id": 3, "name": "DataFlow GmbH", "stadt": "Hamburg" }
  ]
}

Server starten

package.json (Scripts)

{
  "scripts": {
    "dev": "nuxt dev",
    "mock-api": "json-server --watch db.json --port 3001",
    "dev:full": "concurrently \\\\"npm run dev\\\\" \\\\"npm run mock-api\\\\""
  }
}

Terminal

# json-server starten
npx json-server --watch db.json --port 3001

# Ausgabe:
#   \\{^_^}/ hi!
#
#   Loading db.json
#   Done
#
#   Resources
#   http://localhost:3001/kontakte
#   http://localhost:3001/firmen
#
#   Home
#   http://localhost:3001

💡

Paralleles Starten

Mit concurrently kannst du Nuxt und json-server gleichzeitig starten: npm install -D concurrently. So brauchst du nur ein Terminal-Fenster.

CRUD-Operationen

json-server bietet automatisch alle REST-Operationen für jede Top-Level-Eigenschaft in der JSON-Datei:

CRUD mit curl

# GET — Alle Kontakte
curl http://localhost:3001/kontakte

# GET — Einzelner Kontakt
curl http://localhost:3001/kontakte/1

# GET — Filtern
curl 'http://localhost:3001/kontakte?firma=TechStart%20GmbH'

# GET — Volltextsuche
curl 'http://localhost:3001/kontakte?q=schmidt'

# GET — Paginierung
curl 'http://localhost:3001/kontakte?_page=1&_per_page=10'

# GET — Sortierung
curl 'http://localhost:3001/kontakte?_sort=name&_order=asc'

# POST — Neuer Kontakt (ID wird automatisch vergeben)
curl -X POST http://localhost:3001/kontakte \\
  -H 'Content-Type: application/json' \\
  -d '{ "name": "Tom Braun", "email": "tom@beispiel.de" }'

# PUT — Kontakt komplett ersetzen
curl -X PUT http://localhost:3001/kontakte/1 \\
  -H 'Content-Type: application/json' \\
  -d '{ "name": "Anna Schmidt-Müller", "email": "anna@neu.de" }'

# PATCH — Kontakt teilweise aktualisieren
curl -X PATCH http://localhost:3001/kontakte/1 \\
  -H 'Content-Type: application/json' \\
  -d '{ "telefon": "+49 170 9999999" }'

# DELETE — Kontakt löschen
curl -X DELETE http://localhost:3001/kontakte/2

Verwendung mit Vue/Nuxt

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // API-URL konfigurierbar per Umgebungsvariable
      apiBase: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:3001'
    }
  }
})

composables/useKontakte.ts

interface Kontakt {
  id: number
  name: string
  email: string
  telefon?: string
  firma?: string
  rolle?: string
}

export const useKontakte = () => {
  const config = useRuntimeConfig()
  const apiBase = config.public.apiBase

  // Alle Kontakte laden
  const {
    data: kontakte,
    pending,
    refresh
  } = useFetch<Kontakt[]>(\\\`\${apiBase}/kontakte\\\`)

  // Kontakt erstellen
  async function erstellen(kontakt: Omit<Kontakt, 'id'>) {
    await \$fetch(\\\`\${apiBase}/kontakte\\\`, {
      method: 'POST',
      body: kontakt
    })
    await refresh()
  }

  // Kontakt aktualisieren
  async function aktualisieren(id: number, daten: Partial<Kontakt>) {
    await \$fetch(\\\`\${apiBase}/kontakte/\${id}\\\`, {
      method: 'PATCH',
      body: daten
    })
    await refresh()
  }

  // Kontakt löschen
  async function loeschen(id: number) {
    await \$fetch(\\\`\${apiBase}/kontakte/\${id}\\\`, {
      method: 'DELETE'
    })
    await refresh()
  }

  return { kontakte, pending, refresh, erstellen, aktualisieren, loeschen }
}

Docker Compose Setup

Für eine teamweite Entwicklungsumgebung kannst du json-server und Nuxt zusammen in Docker Compose laufen lassen:

docker-compose.dev.yml

services:
  # Nuxt Dev Server
  nuxt:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - '3000:3000'
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NUXT_PUBLIC_API_BASE=http://json-server:3001
    depends_on:
      - json-server

  # json-server als Mock-Backend
  json-server:
    image: node:20-alpine
    working_dir: /data
    command: npx json-server --watch db.json --port 3001 --host 0.0.0.0
    ports:
      - '3001:3001'
    volumes:
      - ./db.json:/data/db.json

Terminal

# Beide Services starten
docker compose -f docker-compose.dev.yml up

# Nur json-server starten
docker compose -f docker-compose.dev.yml up json-server

# Im Hintergrund
docker compose -f docker-compose.dev.yml up -d

⚠️

Wichtig: Host-Binding

In Docker muss json-server mit --host 0.0.0.0 gestartet werden, damit er von anderen Containern erreichbar ist. Ohne diesen Parameter lauscht er nur auf localhost innerhalb des eigenen Containers.

Zusammenfassung

💡

json-server auf einen Blick

db.json — Eine JSON-Datei = komplette REST-API
Auto-CRUD — GET, POST, PUT, PATCH, DELETE automatisch
Filtern — ?feld=wert und ?q=suche
Paginierung — ?_page=1&_per_page=10
Sortierung — ?_sort=feld&_order=asc
Docker — Einfach als Container für das Team bereitstellen
Nur für Prototyping! — Nicht in Produktion verwenden