Inspired by Florian Geierstangers awesome work on typo3 + vite + DDEV, I teamed up with BokuNoMaxi and added Svelte into the mix.

We came up with several variations:

👉 typo3 + LaravelMix + Svelte
https://github.com/mandrasch/ddev-typo3-mix-svelte

👉 typo3 + Vite + Svelte
https://github.com/mandrasch/ddev-typo3-vite-svelte

👉 WordPress ACF Blocks + Vite + Svelte https://github.com/mandrasch/ddev-wp-acf-blocks-svelte

Still work in progress, but maybe useful for your use cases. Let us know if you have questions or feedback! :)

Screenshots

Why?

The approach above allows to add interactive components to PHP Content Management Systems. This is called Islands Architecture.

Svelte has also the advantage that it is precompiled to vanilla JavaScript and CSS, therefore you'll end up with only some more kilobytes JavaScript added to your page. (More information: React vs. Svelte: The War Between Virtual and Real DOM)

With DDEV you can create Docker PHP + NodeJS environments which run on every operating system in the same way. These environment configurations can be shared via git. Therefore the open source software DDEV is a great and robust foundation for team projects.

Learn More

Talk by Jesse Skinner:

Have fun!