oliverthiele / ot-febuild
FE Build - TYPO3 extension that serves as a target for frontend build output (e.g. from Webpack). No assets included.
Package info
github.com/oliverthiele/ot-febuild
Type:typo3-cms-extension
pkg:composer/oliverthiele/ot-febuild
Requires
- php: >=8.3
- typo3/cms-core: *
README
TYPO3 extension providing a dedicated deployment target for compiled frontend assets (CSS, JavaScript, fonts, SVG icons). No assets are included — the extension defines only the directory structure.
Features
- Keeps compiled assets separate from the sitepackage and its Git history
- Assets resolvable via
EXT:ot_febuild/Resources/Public/Assets/ - Compatible with TYPO3
versionNumberInFilenamefor automatic cache busting - Public directory automatically symlinked to
public/_assets/by TYPO3 - Works with any frontend build tool (Webpack, Vite, esbuild, etc.)
Requirements
| Requirement | Version |
|---|---|
| PHP | >=8.3 |
| TYPO3 | any |
Installation
composer require oliverthiele/ot-febuild
Configuration
Build Output
Point your build tool's output directory to the extension's public assets path:
vendor/oliverthiele/ot-febuild/Resources/Public/Assets/
Expected directory layout after a build:
Resources/Public/Assets/
├── Fonts/
├── JavaScript/
├── Styles/
└── Website/
├── Icons/
├── Logos/
└── SVG/
TypoScript
Include the compiled CSS and JavaScript in your page TypoScript:
page {
includeCSS.main = EXT:ot_febuild/Resources/Public/Assets/Styles/Main.css
includeJSFooter.main = EXT:ot_febuild/Resources/Public/Assets/JavaScript/Main.js
}
Usage
Webpack Example
Configure the Webpack output path to write directly into the extension:
output: { path: path.resolve(__dirname, 'vendor/oliverthiele/ot-febuild/Resources/Public/Assets'), }
Deployment via rsync
Sync compiled assets from a local DDEV environment to a remote server:
rsync -avzP -e 'ssh -p 22' \
vendor/oliverthiele/ot-febuild/Resources/Public/Assets/ \
user@example.com:/path/to/project/packages/ot_febuild/Resources/Public/Assets/
License
GPL-2.0-or-later — © Oliver Thiele