Oliver Rasche
55f7f82a42
sys_category gains a story selection and a layout (Options tab, alongside the images field EXT:news puts there), so one editorial decision serves every product list that renders the category. ProductListJsonRenderer emits them beside the products in the 7.3 list envelope; each card carries forCategories - the product categories it came from - so the front end hides it with the same ?cat=/?subcat= filter it applies to the products. Stories are collected over the category and its descendants and deduplicated. Story links follow the existing rule (detail page's parent path plus slug, which SuccessStoryPathRewrite maps back), taking the page from the element's FlexForm or the new site setting vitec.storyDetailPid. Spec raised to 1.17 with clause 7.15.2.1; the header had been left at 1.12 although entries up to 1.15 already existed, so today's two entries were renumbered to 1.16 and 1.17.
VITEC Platform
Headless TYPO3 v14 + React — the VITEC website
TYPO3 runs the editorial backend and serves content as JSON; a decoupled React front end renders it. This repository is the TYPO3 Composer distribution.
-61DAFB?logo=react&logoColor=black){kind=icon}
Overview This is a TYPO3 CMS base distribution configured for headless operation. Editors work in the TYPO3 backend; every page is exposed as a JSON document (no server‑side HTML). The compiled React application in
public/_frontend/consumes that JSON. All custom domain logic — content elements, plugins, layout containers and the JSON renderers — lives in theevomedien/vitecextension.
Table of contents
- How it fits together
- Tech stack
- Repository layout
- Requirements
- Getting started
- Configuration
- Everyday commands
- Deployment notes
- Documentation
- License
How it fits together
┌────────────┐ edits ┌─────────────────────┐ JSON per page ┌────────────────┐
│ Editors │ ─────────────▶ │ TYPO3 v14 backend │ ────────────────▶ │ React (Vite) │
│ (backend) │ │ headless: 1 │ /page → { … } │ public/_front │
└────────────┘ └─────────────────────┘ └────────────────┘
│
▼
evomedien/vitec extension
(content elements · plugins · JSON-LD)
The heavy lifting — the JSON envelope, per‑plugin renderers, layout containers and
schema.org structured data — is documented in the extension’s architecture spec:
packages/vitec/Documentation/Headless-JSON-Architecture.md.
Tech stack
| Layer | Technology |
|---|---|
| CMS / backend | TYPO3 CMS ^14.3 (headless) |
| Language / runtime | PHP 8.4 |
| Dependency management | Composer (base distribution) |
| Headless rendering | friendsoftypo3/headless, nb-headless-content-blocks |
| Content modelling | friendsoftypo3/content-blocks, b13/container |
| News | georgringer/news |
| Custom logic | evomedien/vitec (see packages/vitec/) |
| Front end | React, built with Vite → public/_frontend/ |
Repository layout
live/
├── config/
│ ├── sites/vitec/config.yaml # site config (headless: 1, Sets, routing)
│ └── system/settings.php # TYPO3 system config (git-ignored — secrets)
├── packages/
│ └── vitec/ # the custom extension (see its own README)
├── public/
│ ├── index.php # TYPO3 front controller
│ ├── _frontend/ # compiled React app (Vite build)
│ ├── _assets/ # published extension assets
│ ├── fileadmin/ typo3/ …
├── var/ # caches, logs (git-ignored)
├── vendor/ # Composer dependencies (git-ignored)
├── Documentation/ # project-level docs
├── composer.json / composer.lock
├── auth.json # Composer auth for private repos (git-ignored)
└── fix-asset-perms.sh # deploy helper — fixes asset file permissions
Requirements
- PHP 8.4
- Composer 2
- MySQL / MariaDB (database)
- Node.js (only to build the front end)
- Access to the private
t3planetComposer repository (viaauth.json)
Getting started
# 1. Install PHP dependencies (requires a valid auth.json for the private repo)
composer install
# 2. Configure the system (database, encryption key, …)
# config/system/settings.php is git-ignored; create it via the Install Tool
# or copy it from a secure source.
# 3. Apply the database schema
vendor/bin/typo3 database:updateschema "*.add,*.change"
# 4. Warm up
vendor/bin/typo3 cache:flush
The document root is public/. Point the web server there; public/index.php is
the TYPO3 entry point.
Configuration
- Headless mode & routing —
config/sites/vitec/config.yaml:base: / headless: 1 dependencies: - friendsoftypo3/headless - friendsoftypo3/headless-mixed - nb-headless-content-blocks/headless-content-blocks - georgringer/news - System settings & secrets —
config/system/settings.phpandauth.jsonare git-ignored. Never commit database credentials or Composer tokens.
Everyday commands
vendor/bin/typo3 cache:flush # clear all caches
vendor/bin/typo3 database:updateschema "*.add,*.change" # apply schema changes
bash fix-asset-perms.sh # fix asset permissions (see below)
Deployment notes
- Document root:
public/. - Asset permissions: when files are deployed over an SSHFS/Windows mount they can
land with a too‑restrictive mode (no “other” read), which makes the web server return
403 for backend icons/CSS/JS. Run
fix-asset-perms.shon the server after deploying assets (it sets files to644/ directories to755underpublic/_assetsand the extension’sResources/Public, then flushes caches). - Never commit
config/system/settings.phporauth.json(already git-ignored).
Documentation
| Document | Purpose |
|---|---|
packages/vitec/README.md |
The custom extension — features & content elements |
packages/vitec/Documentation/Headless-JSON-Architecture.md |
Authoritative headless architecture & JSON interface spec |
Documentation/CustomFrameClasses.md |
Custom frame classes |
VITEC-ContentBlocks-Setup.md |
Content Blocks setup notes |
License
GPL‑2.0‑or‑later — © evomedien.
VITEC · TYPO3 headless backend + React front end
vitecdev 17ZJfy75sJoU68J6