README

What if tooling was done with 1 command?

Craft CMS 5 infused with Vite, TypeScript and tailwindcss. Lightning fast development, HMR and a production ready build process.
_{Made possible by}

_{The team behind the magic}
_{Simon Wesp} _{Thomas Bendl}

Turbostart 🚀

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

Quickstart

mkdir my-project && cd my-project
ddev config --project-type=craftcms --docroot=web
ddev composer create-project -n szenario-fordesigners/craft-vite-starter
make install
make dev

Tech Stack

Requirements

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

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
make share - starts the development server and a public ddev share tunnel with working HMR. ngrok by default; for no account, run ddev config global --share-default-provider=cloudflared once

Subsequent Use

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

Responsive Images

This starter kit comes with named AVIF and WebP image transforms (avif480 … avif3840, webp480 … webp3840, no upscaling). Render every image through the component, which builds the srcset from them:

{% include "_includes/components/image.twig" with { asset: entry.image.one(), sizes: "(min-width: 768px) 50vw, 100vw" } only %}

Set sizes for any image narrower than the viewport and priority: true for the above-the-fold (LCP) images. The other lazy images fade in via lazyish. All params are documented at the top of templates/_includes/components/image.twig. For a lightbox or download link, use the webp3840 transform.