This project demonstrates how to integrate Vite with with TYPO3 both as an optimized CSS/JS build pipeline and a fast local development server. This setup enables Hot Module Reloading, out-of-the-box TypeScript support, SCSS compilation, PostCSS and especially Vite's plugins for Vue, Svelte, React, Preact and Solid.
Watch a demo video at https://florian.geierstanger.org/blog/typo3-vite
- Update 2023-12-13: This repo was an initial exploration that lead to https://github.com/s2b/vite-asset-collector
- Docker Desktop or Colima
- DDEV
- Mutagen needs to be enabled for HMR
git clone https://github.com/fgeierst/typo3-vite-demo.git
cd typo3-vite-demo
ddev start
ddev exec cp .env.example .env
ddev composer install
ddev snapshot restore --latest
Login via typo3-vite-demo.ddev.site/typo3 using these credentials:
- Username:
admin - Password:
oZim4R7eLEWzzL
The development server is already running in the background (started by ddev start). You can control it with
ddev vite-serve start|stop
Running ddev pnpm dev does the same, but shows Vite's output in the terminal - which is helpful for debugging.
All files that are imported by the main entry point main.js are watched and trigger a Hot Module Replacement.
ddev pnpm build
Switch applicationContext to production in .env (or in .ddev/config.yaml under web_environment)
# TYPO3_CONTEXT="Development/Local"
TYPO3_CONTEXT="Production/Staging"
This enviromental variable is read out in setup.typoscript and determines if TYPO3 loads CSS/JS from Vite's local dev server at port 5173 — or the optimized production build assets from Ressources/Public/Vite/.
The latter filenames are hashed, therefore a UserFunction InsertViteAssets.php parses manifest.json (generated by Vite) to get the correct names.