Knilis – WordPress (headless) + React

Premium Nederlandse politieke/organisatie-website met meerdere pagina's en CMS-achtige content.

Wat zit erin?

• WordPress in Docker (MySQL + WordPress) op poort 8080
• Custom plugin knilis-api die de REST API uitbreidt met custom fields (SEO, hero, secties)
• React + Vite frontend op poort 3000 (eigen CSS, geen Tailwind): bento grids, grote typografie, mobile-first

Pagina's

Route	Pagina
/	Home
/over	Over
/speerpunten	Speerpunten
/speerpunten/:slug	Speerpunt detail
/programma	Programma
/programma/:slug	Programma detail
/contact	Contact (formulier)
/nieuws	Nieuws (WordPress posts)
/nieuws/:id	Nieuwsartikel
/onderhoud	Onderhoudspagina
/nieuwsbrief	Nieuwsbrief (aanmelden)
/algemene-voorwaarden	Algemene voorwaarden
/disclaimer	Disclaimer

Snel starten

1. WordPress starten (Docker)

docker compose up -d

• Eerste keer duurt even (images downloaden + database).
• WordPress: http://localhost:8080
• Installeer via de wizard, activeer daarna de plugin Knilis API onder Plugins.
• Vul de database met standaardcontent via Instellingen → Knilis API → Database vullen.

2. React frontend starten

cd frontend
npm install
npm run dev

• Frontend: http://localhost:3000
• API-requests naar /wp-json worden door Vite doorgestuurd naar WordPress (geen CORS).

3. Bouwen voor WordPress

cd frontend && npm run build:theme

Kopieert dist/ naar wp-theme/knilis/dist/. De WordPress-theme laadt de React-app automatisch.

Projectstructuur

knillis/
├── docker-compose.yml            # WordPress + MySQL
├── docker/
│   └── wordpress.Dockerfile      # WordPress image met plugin
├── wp-plugin/
│   └── knilis-api/               # Plugin: REST API, admin UI, seed
│       └── README.md             # Plugin documentatie
├── wp-theme/
│   └── knilis/                   # Theme: SPA shell (laadt React)
├── frontend/                     # React + Vite app
│   └── src/
│       ├── api/                  # WordPress REST API client
│       ├── components/           # Gedeelde UI-componenten
│       │   ├── edit-mode/        # WYSIWYG bewerkcomponenten
│       │   ├── layout/           # Header en Footer
│       │   └── sections/         # 12 sectietypes
│       ├── config/               # Routes, navigatie, fallbacks
│       ├── context/              # EditModeContext
│       ├── hooks/                # usePage, useSiteSettings, usePageWithEditMode
│       ├── pages/                # Één bestand per route
│       ├── templates/            # PageTemplate, NewsArticleTemplate, NewsletterTemplate
│       ├── types/                # TypeScript types
│       ├── styles/               # CSS: variables → layout → components → pages
│       └── README.md             # Frontend structuuroverzicht
└── docs/
    └── ARCHITECTURE.md           # Data flow, sectieregistry, edit mode

Documentatie

Bestand	Inhoud
docs/ARCHITECTURE.md	Data flow, sectieregistry, edit mode, build
frontend/src/README.md	Frontend mappenstructuur en patronen
wp-plugin/knilis-api/README.md	Plugin: REST endpoints, sectietypes, seeding
.cursor/AGENTS.md	AI-gids: structuur, patronen, hoe iets toevoegen

Handige commando's

Commando	Doel
docker compose up -d	WordPress + MySQL starten
docker compose down	WordPress stoppen
cd frontend && npm run dev	Frontend dev server
cd frontend && npm run build	Frontend bouwen
cd frontend && npm run build:theme	Bouwen + kopiëren naar WordPress-theme
cd frontend && npm run preview	Productie-preview