Craft 5, DDEV, and Vite

The code files list­ed below are updat­ed for the lat­est Vite and Craft Vite.

Vite is a mod­ern front-end tool by the cre­ator of Vue.js, Evan You. It was built with JavaScript appli­ca­tions in mind but with the help of con­tri­bu­tions from the Craft com­mu­ni­ty, we can get a lot of the nicei­eties of Vite in our own projects, too.

If you’d like to just get up and run­ning, you can use CraftQuest’s Craft 5 starter project with Vite already con­fig­ured.

Code files you’ll need to fol­low along with the video:

• package.json
• vite.php
• vite.config.js
• app.js
• docker-compose.vite.yaml

Here are some links men­tioned in the video, includ­ing resources I used to cre­ate the video:

• Vite.js
• nys­tu­dio107/craft-vite: Allows the use of the Vite.js next gen­er­a­tion fron­tend tool­ing with Craft CMS
• craft-vite doc­u­men­ta­tion
• Defin­ing Cus­tom Ser­vices — DDEV-Local Documentation
• onedarnleyroad/​craftcms: A Craft CMS starter project using DDEV for local host­ing and Vite for front-end bundling and HMR.