README

Twig starter running on Vite with optional Web Components and page transitions with Barba.js

Local machine prerequisites:

1. Docker
2. DDEV
3. Composer

Create a new project with this starter

1. Open terminal prompt, and run:

composer create-project leeroy/craft-starter-twig PATH --no-install

1. Edit .ddev/config.yaml file and change the name (php_version or database if needed).
2. Then to install a clean version of Craft, run:

make install

1. Follow the prompts (DDEV helped filling the .env file)

Once the process is complete, type make dev to start developing on the project. 🚀

The command above will automatically:

1. Copy your local SSH keys into the container
2. Start your DDEV project
3. Install Composer
4. Install yarn
5. Do a one-time build of Vite
6. Generate APP_ID and save to your .env file
7. Generate SECURITY_KEY and save to your .env file
8. Installing Craft for the first time, allowing you to set the admin's account credentials
9. Install all Craft plugins

Developing on an existing project

make dev

This command will automatically:

1. Copy your local SSH keys into the container
2. Start your DDEV project
3. Install Composer
4. Install yarn
5. Do a one-time build of Vite
6. Spin up the Vite dev server
7. Output a ddev describe to show the project domain
8. Open up the browser (for MacOS users)

Open up a browser to your project domain (something like xxxx.ddev.site) to verify that Vite is connected. Begin crafting beautiful things. ❤️

Databases

Export a database with:

ddev export-db > ./dumpfile.sql.gz

Import a database with:

ddev import-db < dumpfile.sql.gz

You can also use DDEV's included phpMyAdmin for database imports — just be aware it's much slower.

Makefile

A Makefile has been included to provide a unified CLI for common development commands.

• make install - Runs a complete one-time process to set the project up and install Craft.
• make boot - Starts the DDEV project, ensuring that SSH keys have been added, and npm & Composer have been installed.
• make up - Runs the Craft commands to clear cache and load the yaml configuration files. It's done also when running one of the make dev commands
• make dev - Runs a one-time build of all front-end assets, then starts Vite's server for HMR.
• make build - Builds all front-end assets.
• make composer xxx - Run Composer commands inside the container, e.g. make composer install
• make craft xxx - Run Craft commands inside the container, e.g. make craft project-config/touch
• make yarn xxx - Run yarn commands inside the container, e.g. make yarn install

DDEV

Using the 'ddev' command

Make sure that nothing else is running at the same time (Apache or other Docker-based environment).
To turn off Lando:

lando poweroff

Front-end

Everything is setup so that the code is prettified and linted as you develop, and before every commit.
Be sure to install the recommended extensions by clicking Install on the prompt window, or open the Command Palette (Cmd/CTRL + Shift + P) and search for Extensions > Show Recommended Extensions.

EditorConfig and Prettier are there to apply formatting rules (missing semicolon, extra spaces, etc.)
ESLint and Stylelint checks for code quality (unused variables, unreachable code, etc.)

Extras

If you need interactivity, think of Web Components, or the Sprig plugin

You can debug PHP code easily with Xdebug, just follow the instructions to setup your IDE.
Then, use ddev xdebug on and ddev xdebug off to turn it on/off.

Thanks

Thanks to onedarnleyroad/craftcms for some great ideas used in this starter (makefile, etc.)