What is ddev-wordpress-vite?

This add-on simply adds a yaml config that exposes and routes the ports necessary to load up the Vite dev server ande make use of their HMR features inside DDEV.

You can read more about ViteJS on vitejs.dev

Getting started

Install the DDEV add-on:

For DDEV v1.23.5 or above run

ddev add-on get mrOttoW/ddev-wordpress-vite

For earlier versions of DDEV run

ddev get mrOttoW/ddev-wordpress-vite

Then restart your project

ddev restart

Or simply bootstrap a new WP project with these combined commands using this add-on: (make sure to change title & URL inside wp core install command accordingly)

For DDEV v1.23.5 or above run

mkdir wordpress 
ddev config --docroot=wordpress --project-type=wordpress
ddev add-on get mrOttoW/ddev-wordpress-vite
ddev start
ddev exec wp core download --path="wordpress"
ddev exec wp core install --path="wordpress" --title="WPVitePlayground" --admin_name="admin" --admin_password="password" --admin_email="admin@local.ddev" --url="https://wp-vite-playground.ddev.site"

For earlier versions of DDEV run

mkdir wordpress 
ddev config --docroot=wordpress --project-type=wordpress
ddev get mrOttoW/ddev-wordpress-vite
ddev start
ddev exec wp core download --path="wordpress"
ddev exec wp core install --path="wordpress" --title="WPVitePlayground" --admin_name="admin" --admin_password="password" --admin_email="admin@local.ddev" --url="https://wp-vite-playground.ddev.site"