mirror of
https://github.com/complexcaresolutions/cms.c2sgmbh.git
synced 2026-03-17 20:54:11 +00:00
docs(frontend): update to use production API, DB, SEO and consent
- Change all API URLs from pl.c2sgmbh.de (dev) to cms.c2sgmbh.de (prod) - Add environment configuration section with production endpoints - Add explanation why production data is used for development - Add SEO integration section with production data examples - Update Cookie-Consent section for production API - Add Videos, Timelines, Workflows to API endpoints - Add CORS configuration note - Update tenant-specific features for current state 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
eea0ce26e9
commit
7b51f928dd
1 changed files with 171 additions and 34 deletions
|
|
@ -1,21 +1,53 @@
|
|||
# Frontend-Entwicklung - Payload CMS Multi-Tenant
|
||||
|
||||
> **Server:** sv-frontend (LXC 704) - 10.10.181.104
|
||||
> **Backend API:** https://pl.c2sgmbh.de/api
|
||||
> **Backend API:** https://cms.c2sgmbh.de/api (Production)
|
||||
|
||||
## Übersicht
|
||||
|
||||
Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS als Headless CMS über die REST-API.
|
||||
|
||||
**Wichtig:** Die Frontend-Entwicklung verwendet die **Produktions-API und -Datenbank**, um mit echten Inhalten zu arbeiten. SEO-Einstellungen und Cookie-Consent-Konfigurationen werden ebenfalls aus der Produktionsumgebung geladen.
|
||||
|
||||
---
|
||||
|
||||
## Umgebungskonfiguration
|
||||
|
||||
### Environment Variables (.env.local)
|
||||
|
||||
```env
|
||||
# API-Endpunkte (PRODUKTION)
|
||||
NEXT_PUBLIC_PAYLOAD_URL=https://cms.c2sgmbh.de
|
||||
NEXT_PUBLIC_API_URL=https://cms.c2sgmbh.de/api
|
||||
|
||||
# Analytics (optional)
|
||||
NEXT_PUBLIC_UMAMI_HOST=https://analytics.c2sgmbh.de
|
||||
NEXT_PUBLIC_UMAMI_WEBSITE_ID=<website-id>
|
||||
|
||||
# Tenant-Konfiguration (je nach Projekt)
|
||||
NEXT_PUBLIC_TENANT_ID=4
|
||||
NEXT_PUBLIC_TENANT_SLUG=c2s
|
||||
```
|
||||
|
||||
### Warum Production-Daten?
|
||||
|
||||
| Aspekt | Grund |
|
||||
|--------|-------|
|
||||
| **Content** | Echte Inhalte für realistische Entwicklung |
|
||||
| **SEO** | Produktions-Meta-Tags und Structured Data |
|
||||
| **Cookie-Consent** | Live Cookie-Konfigurationen (DSGVO-relevant) |
|
||||
| **Media** | Produktions-Bilder mit allen Größen |
|
||||
| **Consistency** | Keine Sync-Probleme zwischen Dev/Prod |
|
||||
|
||||
---
|
||||
|
||||
## API-Dokumentation
|
||||
|
||||
| Ressource | URL |
|
||||
|-----------|-----|
|
||||
| **Swagger UI** | https://pl.c2sgmbh.de/api/docs |
|
||||
| **OpenAPI JSON** | https://pl.c2sgmbh.de/api/openapi.json |
|
||||
| **REST API Base** | https://pl.c2sgmbh.de/api |
|
||||
| **Swagger UI** | https://cms.c2sgmbh.de/api/docs |
|
||||
| **OpenAPI JSON** | https://cms.c2sgmbh.de/api/openapi.json |
|
||||
| **REST API Base** | https://cms.c2sgmbh.de/api |
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -25,6 +57,7 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
|
|||
|
||||
- [ ] **Block-Komponenten entwickeln**
|
||||
- [ ] Hero Block
|
||||
- [ ] Hero Slider Block
|
||||
- [ ] Text Block
|
||||
- [ ] Image Text Block
|
||||
- [ ] Card Grid Block
|
||||
|
|
@ -38,6 +71,9 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
|
|||
- [ ] Testimonials Block
|
||||
- [ ] Newsletter Block
|
||||
- [ ] Process Steps Block
|
||||
- [ ] FAQ Block
|
||||
- [ ] Team Block
|
||||
- [ ] Services Block
|
||||
|
||||
- [ ] **Newsletter-Anmelde-Formular**
|
||||
- API: `POST /api/newsletter/subscribe`
|
||||
|
|
@ -45,7 +81,7 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
|
|||
- Felder: email, firstName (optional), tenantId, source
|
||||
|
||||
- [ ] **Cookie-Banner implementieren**
|
||||
- Cookie Configurations aus API laden
|
||||
- Cookie Configurations aus Production-API laden
|
||||
- Consent-Logs an Backend senden
|
||||
- DSGVO-konform mit Opt-In
|
||||
|
||||
|
|
@ -57,9 +93,9 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
|
|||
- Unterstützte Locales: `de` (default), `en`
|
||||
|
||||
- [ ] **SEO-Integration**
|
||||
- Meta-Tags aus Pages/Posts
|
||||
- Meta-Tags aus Pages/Posts (Production)
|
||||
- Structured Data (JSON-LD)
|
||||
- Sitemap: https://pl.c2sgmbh.de/sitemap.xml
|
||||
- Sitemap: https://cms.c2sgmbh.de/sitemap.xml
|
||||
|
||||
- [ ] **Suche implementieren**
|
||||
- API: `GET /api/search?q=...&locale=de`
|
||||
|
|
@ -69,26 +105,26 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
|
|||
### Tenant-spezifische Features
|
||||
|
||||
#### porwoll.de
|
||||
- [ ] Immobilien-Listing
|
||||
- [ ] Objektsuche mit Filtern
|
||||
- [ ] Kontaktformular mit Objekt-Referenz
|
||||
- [ ] Portfolio-Galerie (Fotografie)
|
||||
- [ ] Buchungsformular
|
||||
- [ ] Before/After Bildvergleich
|
||||
|
||||
#### complexcaresolutions.de (C2S)
|
||||
- [ ] Team-Übersicht
|
||||
- [ ] Leistungs-Seiten
|
||||
- [ ] Zertifizierungen
|
||||
- [ ] Karriere-Seite mit Stellenangeboten
|
||||
|
||||
#### gunshin.de (Fotografin-Portfolio)
|
||||
- [ ] Portfolio-Galerie
|
||||
- API: `GET /api/portfolios?where[tenant][equals]=5`
|
||||
- Kategorien: `GET /api/portfolio-categories`
|
||||
- [ ] Projekt-Detailseiten mit Lightbox
|
||||
#### gunshin.de (Game Development)
|
||||
- [ ] Projekt-Galerie
|
||||
- API: `GET /api/projects?where[tenant][equals]=5`
|
||||
- [ ] Portfolio-Seiten
|
||||
- [ ] Referenzen-Slider
|
||||
|
||||
#### zweitmein.ng
|
||||
- [ ] Produkt-Übersicht (falls E-Commerce)
|
||||
- [ ] FAQ-Sektion
|
||||
- [ ] Preistabellen
|
||||
- [ ] Kontaktformular
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -107,14 +143,18 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
|
|||
| FAQs | `GET /api/faqs` | FAQ-Einträge |
|
||||
| Portfolios | `GET /api/portfolios` | Portfolio-Projekte |
|
||||
| Media | `GET /api/media` | Medien/Bilder |
|
||||
| Videos | `GET /api/videos` | Video-Bibliothek |
|
||||
| Timelines | `GET /api/timelines` | Chronologische Events |
|
||||
| Workflows | `GET /api/workflows` | Prozess-Darstellungen |
|
||||
|
||||
### Globals
|
||||
### Globals (SEO & Settings aus Production)
|
||||
|
||||
| Global | Endpoint | Beschreibung |
|
||||
|--------|----------|--------------|
|
||||
| Site Settings | `GET /api/globals/site-settings` | Logo, Name, SEO |
|
||||
| Site Settings | `GET /api/globals/site-settings` | Logo, Name, Kontakt |
|
||||
| Navigation | `GET /api/globals/navigation` | Menü-Struktur |
|
||||
| SEO Settings | `GET /api/globals/seo-settings` | Default SEO |
|
||||
| SEO Settings | `GET /api/globals/seo-settings` | Default SEO (Production) |
|
||||
| Privacy Policy | `GET /api/globals/privacy-policy-settings` | Datenschutz |
|
||||
|
||||
### Spezielle Endpoints
|
||||
|
||||
|
|
@ -123,6 +163,8 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
|
|||
| `/api/search` | GET | Volltextsuche |
|
||||
| `/api/search/suggestions` | GET | Auto-Complete |
|
||||
| `/api/newsletter/subscribe` | POST | Newsletter-Anmeldung |
|
||||
| `/api/timelines` | GET | Timeline-Daten |
|
||||
| `/api/workflows` | GET | Workflow-Daten |
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -132,10 +174,13 @@ Alle Collection-Anfragen sollten nach Tenant gefiltert werden:
|
|||
|
||||
```typescript
|
||||
// Beispiel: Posts für Tenant "c2s" (ID: 4)
|
||||
fetch('https://pl.c2sgmbh.de/api/posts?where[tenant][equals]=4&locale=de')
|
||||
fetch('https://cms.c2sgmbh.de/api/posts?where[tenant][equals]=4&locale=de')
|
||||
|
||||
// Beispiel: Pages für Tenant "gunshin" (ID: 5)
|
||||
fetch('https://pl.c2sgmbh.de/api/pages?where[tenant][equals]=5&locale=de')
|
||||
fetch('https://cms.c2sgmbh.de/api/pages?where[tenant][equals]=5&locale=de')
|
||||
|
||||
// Beispiel: SEO-Settings (Global, kein Tenant-Filter)
|
||||
fetch('https://cms.c2sgmbh.de/api/globals/seo-settings')
|
||||
```
|
||||
|
||||
### Tenant-IDs
|
||||
|
|
@ -181,10 +226,10 @@ Unterstützte Locales: `de` (default), `en`
|
|||
|
||||
```typescript
|
||||
// Deutsch (default)
|
||||
fetch('https://pl.c2sgmbh.de/api/posts?locale=de')
|
||||
fetch('https://cms.c2sgmbh.de/api/posts?locale=de')
|
||||
|
||||
// Englisch
|
||||
fetch('https://pl.c2sgmbh.de/api/posts?locale=en')
|
||||
fetch('https://cms.c2sgmbh.de/api/posts?locale=en')
|
||||
|
||||
// Fallback: Wenn EN nicht vorhanden, wird DE zurückgegeben
|
||||
```
|
||||
|
|
@ -196,7 +241,7 @@ fetch('https://pl.c2sgmbh.de/api/posts?locale=en')
|
|||
### Anmeldung
|
||||
|
||||
```typescript
|
||||
const response = await fetch('https://pl.c2sgmbh.de/api/newsletter/subscribe', {
|
||||
const response = await fetch('https://cms.c2sgmbh.de/api/newsletter/subscribe', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
|
|
@ -219,18 +264,25 @@ const response = await fetch('https://pl.c2sgmbh.de/api/newsletter/subscribe', {
|
|||
|
||||
---
|
||||
|
||||
## Cookie-Consent
|
||||
## Cookie-Consent (Production-Daten)
|
||||
|
||||
### Konfiguration laden
|
||||
|
||||
```typescript
|
||||
const config = await fetch('https://pl.c2sgmbh.de/api/cookie-configurations?where[tenant][equals]=4')
|
||||
// Cookie-Konfiguration aus Production laden
|
||||
const config = await fetch('https://cms.c2sgmbh.de/api/cookie-configurations?where[tenant][equals]=4')
|
||||
.then(r => r.json())
|
||||
|
||||
// config.docs enthält:
|
||||
// - Kategorien (necessary, analytics, marketing, etc.)
|
||||
// - Cookie-Details pro Kategorie
|
||||
// - Texte für Banner (lokalisiert)
|
||||
```
|
||||
|
||||
### Consent loggen
|
||||
|
||||
```typescript
|
||||
await fetch('https://pl.c2sgmbh.de/api/consent-logs', {
|
||||
await fetch('https://cms.c2sgmbh.de/api/consent-logs', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
|
|
@ -245,12 +297,49 @@ await fetch('https://pl.c2sgmbh.de/api/consent-logs', {
|
|||
|
||||
---
|
||||
|
||||
## SEO-Integration (Production-Daten)
|
||||
|
||||
### Global SEO-Settings
|
||||
|
||||
```typescript
|
||||
// SEO-Defaults aus Production laden
|
||||
const seoSettings = await fetch('https://cms.c2sgmbh.de/api/globals/seo-settings')
|
||||
.then(r => r.json())
|
||||
|
||||
// Enthält:
|
||||
// - defaultTitle, titleTemplate
|
||||
// - defaultDescription
|
||||
// - defaultImage (OG-Image)
|
||||
// - robotsDefault
|
||||
```
|
||||
|
||||
### Page-spezifische SEO
|
||||
|
||||
```typescript
|
||||
// SEO-Daten aus Page laden
|
||||
const page = await fetch('https://cms.c2sgmbh.de/api/pages?where[slug][equals]=about&where[tenant][equals]=4')
|
||||
.then(r => r.json())
|
||||
|
||||
// page.docs[0].meta enthält:
|
||||
// - title, description
|
||||
// - image (OG-Image Override)
|
||||
// - noIndex, noFollow
|
||||
```
|
||||
|
||||
### Sitemap
|
||||
|
||||
Die Sitemap wird automatisch von Payload generiert:
|
||||
- **URL:** https://cms.c2sgmbh.de/sitemap.xml
|
||||
- Enthält alle publizierten Pages und Posts
|
||||
|
||||
---
|
||||
|
||||
## Kontaktformular
|
||||
|
||||
Formular-Submissions werden über die Forms-Collection verarbeitet:
|
||||
|
||||
```typescript
|
||||
await fetch('https://pl.c2sgmbh.de/api/form-submissions', {
|
||||
await fetch('https://cms.c2sgmbh.de/api/form-submissions', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
|
|
@ -272,14 +361,14 @@ Falls User-Authentifizierung benötigt wird:
|
|||
|
||||
```typescript
|
||||
// Login
|
||||
const { token, user } = await fetch('https://pl.c2sgmbh.de/api/users/login', {
|
||||
const { token, user } = await fetch('https://cms.c2sgmbh.de/api/users/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password })
|
||||
}).then(r => r.json())
|
||||
|
||||
// Authentifizierte Requests
|
||||
fetch('https://pl.c2sgmbh.de/api/...', {
|
||||
fetch('https://cms.c2sgmbh.de/api/...', {
|
||||
headers: { 'Authorization': `JWT ${token}` }
|
||||
})
|
||||
```
|
||||
|
|
@ -293,7 +382,9 @@ fetch('https://pl.c2sgmbh.de/api/...', {
|
|||
Die Payload-Typen können aus dem Backend exportiert werden:
|
||||
|
||||
```bash
|
||||
# Auf dem Payload-Server
|
||||
# Auf dem Payload-Server (Production)
|
||||
ssh payload@162.55.85.18
|
||||
cd ~/payload-cms
|
||||
pnpm payload generate:types
|
||||
|
||||
# Datei: src/payload-types.ts
|
||||
|
|
@ -316,14 +407,60 @@ Diese Datei kann ins Frontend-Projekt kopiert werden für typsichere API-Calls.
|
|||
- TTL: 60 Sekunden für Suche
|
||||
- Cache wird bei Content-Änderungen invalidiert
|
||||
|
||||
### CORS
|
||||
|
||||
Die Production-API erlaubt Requests von:
|
||||
- `*.porwoll.tech` (Development)
|
||||
- `porwoll.de`, `complexcaresolutions.de`, `gunshin.de` (Production)
|
||||
|
||||
---
|
||||
|
||||
## Development Server (sv-frontend)
|
||||
|
||||
### SSH-Zugang
|
||||
|
||||
```bash
|
||||
ssh frontend@10.10.181.104
|
||||
```
|
||||
|
||||
### Projekt starten
|
||||
|
||||
```bash
|
||||
cd ~/frontend.porwoll.de
|
||||
pnpm dev
|
||||
# Läuft auf Port 3000 → https://porwoll-dev.porwoll.tech
|
||||
```
|
||||
|
||||
### AI-Tools
|
||||
|
||||
```bash
|
||||
claude # Claude Code CLI
|
||||
codex # Codex CLI
|
||||
gemini # Gemini CLI
|
||||
```
|
||||
|
||||
### Service-Management
|
||||
|
||||
```bash
|
||||
# Systemd Service starten
|
||||
systemctl start frontend-porwoll
|
||||
|
||||
# Service stoppen
|
||||
systemctl stop frontend-porwoll
|
||||
|
||||
# Logs anzeigen
|
||||
journalctl -u frontend-porwoll -f
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Ressourcen
|
||||
|
||||
- **Payload CMS Docs:** https://payloadcms.com/docs
|
||||
- **API-Dokumentation:** https://pl.c2sgmbh.de/api/docs
|
||||
- **Backend-Repository:** https://github.com/c2s-admin/cms.c2sgmbh.git
|
||||
- **API-Dokumentation:** https://cms.c2sgmbh.de/api/docs
|
||||
- **Backend-Repository:** https://github.com/complexcaresolutions/cms.c2sgmbh.git
|
||||
- **Analytics:** https://analytics.c2sgmbh.de
|
||||
|
||||
---
|
||||
|
||||
*Erstellt: 11.12.2025*
|
||||
*Letzte Aktualisierung: 18.12.2025*
|
||||
|
|
|
|||
Loading…
Reference in a new issue