What if tooling was done with 1 command?

Craft CMS 5 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 5
• 🚢 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 starter template.
Thanks to Andrew Welch for the great craft-vite plugin!

Contributors

Simon Wesp 💻

Thomas Bendl 💻

Esteban Castro 💻