📣 See new project as well: https://github.com/mandrasch/ddev-wp-acf-blocks-svelte 📣
🚧 Work in progress 🚧
Tools / Libraries used:
- https://ddev.readthedocs.io/en/stable/
- https://github.com/torenware/ddev-viteserve
- https://github.com/idleberg/php-wordpress-vite-assets
Inspired by https://github.com/fgeierst/typo3-vite-demo.
This could be more effective when roots/bedrock is used I guess.
Clone it, then
ddev start
ddev wp core download
# finish install in browser:
ddev launch
ddev wp theme activate twentytwentytwo-child
# Jump into DDEV container and run composer there
# TODO: Can I trigger this from outside via 'ddev composer ...'?
# (Or should I just use roots/bedrock? ;-))
ddev ssh
cd wp-content/themes/twentytwentytwo-child
composer install
exit
ddev vite-serve start && ddev launch
# Stop vite-server
ddev vite-serve stop
# If you want to start this the classic way,
# jump into DDEV container and do the following:
ddev ssh
cd wp-content/themes/twentytwentytwo-child
npm run devCurrent quick & dirty way to distinguish between local dev and production:
Use define('WP_ENV','production'); or define('WP_ENV','development'); in wp-config.php to either include compiled assets or the vite dev server client script.
ddev ssh
cd wp-content/themes/twentytwentytwo-child
npm run build- Use
IS_DDEV_PROJECTfor simple detection of dev environment (thx to @furo42) - Convert to roots/bedrock or https://github.com/wecodemore/wpstarter
- Use this new method https://ddev.readthedocs.io/en/latest/users/extend/customization-extendibility/#exposing-extra-ports-via-ddev-router rather than docker.compose file
# https://ddev.readthedocs.io/en/latest/users/quickstart/#wp-cli
ddev config --project-type=wordpress
ddev start
ddev wp core download
ddev launch
ddev wp theme activate twentytwentytwo-child
# Install vite + idleberg/wordpress-vite-assets
# jump into DDEV container via ddev ssh:
ddev ssh
cd wp-content/themes/twentytwentytwo-child
npm init -y
npm i --save-dev vite
npm i --save-dev sass
composer require idleberg/wordpress-vite-assets
exit
# (create vite.config.js, add to scripts in package.json, ...)
# (add script to functions.php)
# add viteserve to ddev
ddev get torenware/ddev-viteserve
# modify .ddev/.env, adjust
# VITE_PROJECT_DIR=wp-content/themes/twentytwentytwo-child/
# VITE_JS_PACKAGE_MGR=npm
ddev restart
ddev vite-serve start && ddev launch
# for debug / viewing error messages:
# TODO: How can we check the logs via viteserve?
ddev vite-serve stop
ddev ssh
cd wp-content/themes/twentytwentytwo-child
npm run dev- Another WP + vite lib: https://github.com/kucrut/vite-for-wp
See https://my-ddev-lab.mandrasch.eu/ for more tutorials and infos.