Modern frontend setup for TYPO3 with Vite - Livestream with Simon Praetorius

Опубликовано: 07 Август 2026
на канале: Never Code Alone
631
18

This live coding session with Simon Praetorius focuses on setting up a TYPO3 frontend using Vite.

It's 2024, and there are still far too many custom Grunt, Gulp, and Webpack setups. These are often outdated, overly complex, and therefore barely maintainable. This has to stop. There should be a better way to solve this.

This is where Vite comes in:

Vite is a modern frontend tool that combines speed and flexibility with easy configuration. This is why it's one of the most popular bundlers and the default choice for Vue, Svelte, Angular, Laravel, and many others.

Vite offers native support for TypeScript and is compatible with all major frameworks (React, Angular, Vue, Svelte, Lit, etc.). It also seamlessly integrates all well-known CSS processors (Sass, Less, PostCSS, etc.).


Vite is a modern frontend tool that combines speed and flexibility with easy configuration. 00:00 Implementing TYPO3 Vite and web design with HTML and CSS

03:00 Vite: What is it used for and what makes it better compared to Webpack and Gulp?

07:35 TYPO3 installation and setting up a frontend site package for beginners

32:20 Hot reload with NPM Filewatcher

43:00 Web development with TYPO3 extensions in the backend on a local DDEV environment

About Simon Praetorius:

Simon is a TYPO3 developer and maintainer of the Fluid template language used in TYPO3. With over 13 years of professional experience as a developer and technical lead in digital agencies, he has acquired extensive expertise in the development and management of complex projects. Since 2023, he has been self-employed, supporting agencies and TYPO3 end customers in the conception, implementation, and further development of demanding TYPO3 projects. He also developed the Vite integration "Vite AssetCollector" for TYPO3, which is used in the video.


In addition, he developed the Vite AssetCollector integration for TYPO3, which is used in the video. Links:

Website: https://www.praetorius.me/
Documentation for Vite integration: https://docs.typo3.org/p/praetorius/v...
Slides from the TYPO3 Developer Days 2024: https://speakerdeck.com/s2b/vite-typo...

Image source Simon Praetorius: Markus Luigs
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Here are our social media channels:

► Patreon:   / nevercodealone  
► Twitter:   / nevercodealone  
► Instagram:   / nevercodealone  
► LinkedIn:   / never-code-alone  
► Facebook:   / nevercodealone  
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
These are our websites:

► Never Code Alone offers free and commercial live coding events and advanced PHP courses and supports social projects https://nevercodealone.de

► TESTIFY - Agency for Website Testing with Cypress.IO and the Codeception Testing Framework https://testify.team/

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Want to support Never Code Alone?

Then please subscribe and leave your questions and/or suggestions in the comments.

Thanks for watching!

I hope you enjoyed the video.



▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Want to support Never Code Alone?

Then please subscribe and leave your questions and/or suggestions in the comments.

Thanks for watching!

I hope you enjoyed the video.


▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Want to support Never Code Alone?

Then please subscribe and leave your questions and/or suggestions in the comments.

Thanks for watching!

I hope you enjoyed the video. ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Contact: [email protected]