DEV Community

Matthias Andrasch
Matthias Andrasch

Posted on

4

Integrate Svelte into PHP CMS: Typo3 and WordPress πŸ‘¨β€πŸ”§

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

Screenshot Svelte Demo Block in WordPress

Screenshot Svelte Demo Block in typo3

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!

Image of Stellar post

πŸš€ Stellar Dev Diaries Series: Episode 1 is LIVE!

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

Top comments (0)

Image of Stellar post

Check out Episode 1: How a Hackathon Project Became a Web3 Startup πŸš€

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

πŸ‘‹ Kindness is contagious

Value this insightful article and join the thriving DEV Community. Developers of every skill level are encouraged to contribute and expand our collective knowledge.

A simple β€œthank you” can uplift someone’s spirits. Leave your appreciation in the comments!

On DEV, exchanging expertise lightens our path and reinforces our bonds. Enjoyed the read? A quick note of thanks to the author means a lot.

Okay