TYPO3 Vite Demo

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

New TYPO3 extension

• Update 2023-12-13: This repo was an initial exploration that lead to https://github.com/s2b/vite-asset-collector

Based on

• https://github.com/torenware/ddev-viteserve
• https://vitejs.dev/guide/backend-integration.html

Prerequisites

• Docker Desktop or Colima
• DDEV
• Mutagen needs to be enabled for HMR

Local installation guide

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

Vite development server

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.

File watcher

All files that are imported by the main entry point main.js are watched and trigger a Hot Module Replacement.

Test the production build

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.