Vite – TYPO3's nimble frontend companion

Link to documentation: https://www.praetorius.me/link/vite

It’s 2024, and there are still too many custom grunt/gulp/webpack setups out there. They are usually outdated, overcomplicated and thus barely maintainable. This needs to stop. There should be a better way to do this.

Meet Vite:

Vite is a modern frontend tool that combines speed and flexibility with a straightforward configuration. That‘s why it’s one of the most popular bundlers out there and the default choice for Vue, Svelte, Angular, Laravel and many others.

It has built-in support for TypeScript and can be used with all popular frameworks (React, Angular, Vue, Svelte, Lit, …). It also seamlessly integrates all popular CSS processors (Sass, Less, PostCSS, …).

With this feature set, Vite hits the sweet spot for most TYPO3 projects. I’m going to present my production-ready Vite integration for TYPO3, called Vite AssetCollector.

Transcript

1. SIMON PRAETORIUS vite TYPO3’s nimble frontend companion
2. 13 years in TYPO3 agencies OpenSource: ✦ Fluid Components ✦ Vite AssetCollector ✦ Fluid Maintainer Team independent since June 2023 hire me for your project! Simon Praetorius
3. vite? Simon Praetorius Vite: TYPO3’s nimble frontend companion Why
4. bundlers? Simon Praetorius Vite: TYPO3’s nimble frontend companion Why
5. Simon Praetorius Vite: TYPO3’s nimble frontend companion Slider.ts Slider.scss Typography.scss App.vue Home.svg Bundle.min.js Bundle.min.css Assets/*
6. Simon Praetorius Vite: TYPO3’s nimble frontend companion Which bundler?
7. Decision Factors Simon Praetorius Vite: TYPO3’s nimble frontend companion Build Results Compatibility Consistency Optimization Developer Experience Setup Speed Extensibility Maintenance Maintainers Community Release Cycle
8. Bundler History Simon Praetorius Vite: TYPO3’s nimble frontend companion 2012 2018 2020 2022 gulp grunt webpack rollup vite esbuild rspack turbopack 2024
9. Legacy Bundlers Simon Praetorius Vite: TYPO3’s nimble frontend companion gulp grunt webpack rollup vite esbuild rspack turbopack 2012 2018 2020 2022 2024
10. Bleeding Edge Bundlers Simon Praetorius Vite: TYPO3’s nimble frontend companion rspack turbopack webpack rollup vite esbuild 2012 2018 2020 2022 2024
11. Sweet Spot Simon Praetorius Vite: TYPO3’s nimble frontend companion rollup vite esbuild 2012 2018 2020 2022 2024 webpack
12. Simon Praetorius vite Vite: TYPO3’s nimble frontend companion
13. Architecture Simon Praetorius Vite: TYPO3’s nimble frontend companion rollup esbuild for node_modules, for project files fast during local development: rollup flexible bundling for production: for everything
14. built-in support for ✦ SCSS ✦ LESS ✦ PostCSS ✦ LightningCSS bundling of referenced assets (webfonts, images, …) Simon Praetorius Vite: TYPO3’s nimble frontend companion CSS Features
15. ✦ built-in TypeScript support ✦ automatic code-splitting ✦ output as ES Modules ✦ optional: CommonJS for legacy browsers JavaScript Features Simon Praetorius Vite: TYPO3’s nimble frontend companion
16. ✦ development without manual browser refresh ✦ JavaScript framework support ✦ robust file watcher ✦ cache busting Hot Module Replacement Simon Praetorius Vite: TYPO3’s nimble frontend companion
17. well-maintained plugins for frameworks: ✦ React ✦ Vue ✦ Svelte ✦ … compatibility with rollup plugins Extensibility Simon Praetorius Vite: TYPO3’s nimble frontend companion
18. Community & Usage Simon Praetorius Vite: TYPO3’s nimble frontend companion
19. Vite Score Card Simon Praetorius Vite: TYPO3’s nimble frontend companion Build Results Developer Experience Maintenance
20. Simon Praetorius vite & TYPO3 Vite: TYPO3’s nimble frontend companion
21. Simon Praetorius Vite: TYPO3’s nimble frontend companion Setup Plugin for TYPO3 Extension Vite AssetCollector collects & bundles assets from TYPO3 extensions embeds assets provided by vite vite TYPO3
22. Simon Praetorius Vite: TYPO3’s nimble frontend companion Production Setup Plugin for TYPO3 Extension Vite AssetCollector vite TYPO3 generates static assets and manifest.json file parses manifest.json and embeds static assets
23. Simon Praetorius Vite: TYPO3’s nimble frontend companion Development Setup Plugin for TYPO3 Extension Vite AssetCollector vite TYPO3 watches & serves assets with separate web server links to vite dev server
24. Simon Praetorius Vite: TYPO3’s nimble frontend companion Vite TYPO3 Plugin ✦ vite plugin (written in TypeScript) ✦ configures vite for TYPO3 ✦ discovers TYPO3 extensions in composer project ✦ bundles assets defined in Configuration/ViteEntrypoints.json
25. Simon Praetorius Vite: TYPO3’s nimble frontend companion Vite AssetCollector ✦ TYPO3 extension ✦ Production/Development switch ✦ ViewHelpers to embed assets ✦ YAML processor %vite()% ✦ SVG icon provider
26. Simon Praetorius Vite: TYPO3’s nimble frontend companion Get started
27. 1. Install Extension Simon Praetorius Vite: TYPO3’s nimble frontend companion composer req praetorius/vite-asset-collector
28. npm install --save-dev vite vite-plugin-typo3 2. Install Vite Simon Praetorius Vite: TYPO3’s nimble frontend companion
29. 3. Configure Vite Simon Praetorius Vite: TYPO3’s nimble frontend companion import { defineConfig } from "vite" import typo3 from "vite-plugin-typo3" export default defineConfig({ plugins: [typo3()] }) vite.config.js (project root):
30. 4. Configure Extension Simon Praetorius Vite: TYPO3’s nimble frontend companion [ "../Resources/Private/Main.entry.js", "../Resources/Private/Slider.entry.js" ] Configuration/ViteEntrypoints.json:
31. 5. Call ViewHelper Simon Praetorius Vite: TYPO3’s nimble frontend companion <vac:asset.vite entry="EXT:sitepackage/Resources/ Private/Main.entry.js" /> Layouts/Default.html:
32. 6. Start Server Simon Praetorius Vite: TYPO3’s nimble frontend companion npm exec vite (or use ddev add-on, see documentation)
33. Deployment Simon Praetorius Vite: TYPO3’s nimble frontend companion npm exec vite build
34. Simon Praetorius Vite: TYPO3’s nimble frontend companion Best Practices
35. Entrypoint Files Simon Praetorius Vite: TYPO3’s nimble frontend companion import "path/to/Slider.js" import "swiper/css" import "path/to/Slider.css" Slider.entry.js:
36. Glob Imports (1) Simon Praetorius Vite: TYPO3’s nimble frontend companion // Import all CSS files import.meta.glob( "path/to/*.css", { eager: true } ) Main.entry.js:
37. Glob Imports (2) Simon Praetorius Vite: TYPO3’s nimble frontend companion // Import everything except Slider import.meta.glob([ "Components/**/*.{css,js}", '!**/Organism/Slider/*' ], { eager: true }) Main.entry.js:
38. Content Blocks (1) Simon Praetorius Vite: TYPO3’s nimble frontend companion Configuration/ViteEntrypoints.json: [ "../ContentBlocks/**/*.entry.{js,css}" ]
39. Content Blocks (2) Simon Praetorius Vite: TYPO3’s nimble frontend companion Frontend.html: <vac:asset.vite entry="EXT:sitepackage/ContentBlocks/ ContentElements/my-teaser/ Assets/MyTeaser.entry.css" />
40. CSS Processors Simon Praetorius Vite: TYPO3’s nimble frontend companion npm add -D sass npm add -D less npm add -D stylus
41. Assets in (S)CSS Simon Praetorius Vite: TYPO3’s nimble frontend companion Fonts.scss: @font-face { font-family: 'MyFont'; src: url( '@sitepackage/Resources/ .../MyFont.eot' ); }
42. Documentation & Support Simon Praetorius Vite: TYPO3’s nimble frontend companion ← praetorius.me/link/vite Join #vite on TYPO3 Slack
43. ✦ easy setup ✦ simple, short configuration ✦ fast local development ✦ optimized production builds ✦ future-proof Vite Delivers Simon Praetorius Vite: TYPO3’s nimble frontend companion
44. not vite? Simon Praetorius Vite: TYPO3’s nimble frontend companion Why
45. Simon Praetorius TYPO3 TechLead & Developer www.praetorius.me s2b @s2b@norden.social moin@praetorius.me