szenario-fordesigners/craft-vite-starter

Craft CMS 5 infused with Vite, TypeScript and WindiCSS.

What if tooling was done with 1 command?

Craft CMS 4 infused with Vite, TypeScript and WindiCSS.

Lightning fast development, HMR and a production ready build process.

<sub>Made possible by


The team behind the magic
Simon Wesp Thomas Bendl</sub>

Turbostart 🚀

bash <(curl -s https://raw.githubusercontent.com/szenario-fordesigners/craft-vite-starter/main/init.sh)

Quickstart

1. mkdir my-project && cd my-project
2. ddev config --project-type=craftcms --docroot=web --create-docroot
3. ddev composer create -y szenario-fordesigners/craft-vite-starter
4. make install
5. make dev

Tech Stack

• 🔥 Craft CMS 4
• 🚢 DDEV
• 📦 Vite
• 🔒 TypeScript
• 💨 WindiCSS

Requirements

• DDEV
• Unix-based OS (MacOS, Linux)

If you are on Windows

Use WSL2 and follow the instructions for Unix-based OS. DDEV Documentation is a great starting point.

Commands

• make install - patches the DDEV craft config and installs Craft CMS. Should only be used as a first time setup.
• make dev - starts the development server
• make build - bundles the assets for production

Subsequent Use

• ddev yarn - for managing frontend packages
• ddev composer - for managing backend packages
• ddev craft - exposes the Craft CLI

Critical CSS

To use Critical CSS, you need to manually add the pages that should be pre-rendered to the criticalPages array in vite.config.ts. The pages will be pre-rendered when building and the generated CSS will be inlined in the HTML.

Credits

This repository is based on the official Craft CMS 4 starter template.
Thanks to Andrew Welch for the great craft-vite plugin!

Contributors

Simon Wesp 💻

Thomas Bendl 💻

Esteban Castro 💻