WordPress has come a long way in the past few years, but the build tools and frontend frameworks are still pretty basic. Integrating modern frameworks and build tools like Vite and DDEV into the WordPress ecosystem requires a significant amount of custom work.
At Viget, we built a system to easily set up WordPress with DDEV and have Vite build all the frontend styles. I will walk through how to set up DDEV to work with Vite and how to get the updated assets from Vite loaded into WordPress for development and production.
DDEV + WordPress Setup
Getting WordPress up and running on DDEV is quite easy. If you haven't already, follow the DDEV setup guide to get it up and running on your local computer. Once DDEV is set up, add DDEV to WordPress by making a new directory and path to it by running - mkdir my-wp-site && cd my-wp-site
Then configure DDEV to use the project type of WordPress by running - ddev config --project-type=wordpress
Next, you will start DDEV by running - ddev start - once DDEV has started you will need to download the core WordPress files by running ddev wp core download.
Once the core WordPress files have been downloaded, you should be able to run ddev launch and you will see the new WordPress site running on your local machine.
I would recommend turning on xdebug by running ddev xdebug, which makes it easy to find and debug problems.
Here is our completed (at this point) DDEV configuration. Feel free to adjust the PHP version as well as the database type and version. If you are setting up DDEV on an existing project, make sure you are matching the PHP and database version of your project.
name: wpstarter
type: wordpress
docroot: ""
php_version: "8.2"
webserver_type: nginx-fpm
router_http_port: "80"
router_https_port: "443"
xdebug_enabled: true
additional_hostnames: []
additional_fqdns: []
database:
type: mysql
version: "8.0"
use_dns_when_possible: true
composer_version: "2"
nodejs_version: "22"
corepack_enable: false
override_config: trueVite Setup
Now that DDEV is up and running we need to get Vite pulled in our WordPress theme so Vite will build our frontend assets.
Path to your WordPress theme wp-content/themes/[YOUR_THEME] and in the root of your theme directory run ddev npm install -D vite.
Once Vite has been installed, add to your package.json file the scripts to run Vite and build the assets.
"scripts": {
"dev": "vite",
"build": "vite build",
},In order to get Vite, DDEV, and WordPress working together we need to do some custom configuration. In the root of your theme directory create a new Vite config file named vite.config.js.
In the Vite configuration, set up the Vite build and how Vite should run its local server. Feel free to update the root or output directory to whatever you want. You will notice there is a custom port number in the server section; we will set that up in the DDEV next.
import { defineConfig } from 'vite'
import path from 'path';
const THEME = '/wp-content/themes/[YOUR_THEME]';
export default defineConfig(({ command }) => ({
root: 'src',
base: command === 'serve' ? '' : THEME + '/dist/',
build: {
// output dir for production build
outDir: '../dist',
emptyOutDir: true,
// emit manifest so PHP can find the hashed files
manifest: true,
// our entry
rollupOptions: {
input: {
'main': path.resolve(__dirname, 'src/main.js'),
}
},
},
server: {
host: "0.0.0.0",
origin: "https://[YOUR_THEME].ddev.site:" + parseInt(process.env.VITE_PRIMARY_PORT ?? '5273'),,
// Update this to your DDEV local url
strictPort: true,
port: parseInt(process.env.VITE_PRIMARY_PORT ?? '5273'),
// VITE_PRIMARY_PORT will be set in your ddev .env file.
},
}));At this point you should be able to run npm run build and Vite will build whatever assets you have set up in main.js. Now that Vite is running, we need to pull in the assets into the WordPress theme and set up DDEV to handle HMR so that when there are edits made to the frontend files, it will update our local server and reflect the change.
Vite + DDEV + WordPress Setup
At this point, DDEV is running and WordPress is running on the localhost. Vite should also run and build the assets you have set up in the Vite Config under rollupOptions.
Next, we need to open up some custom ports on DDEV for Vite so that we can pull in the Vite assets to WordPress.
DDEV + Vite
When we run ddev start we want DDEV to also run npm run dev to build our frontend assets. This is helpful so we only need to type one command to start our site and begin working on it.
We can do this by adding a web daemon to the DDEV config.yaml file. This will start a new daemon named “vite” in the theme directory, which will install npm and run dev.
web_extra_daemons:
- name: 'vite'
command: "npm install && npm run dev"
directory: /var/www/html/wp-content/themes/[YOUR_THEME]We also need custom DDEV ports for Vite so it can be accessed within the DDEV container.
web_extra_exposed_ports:
- name: vite
container_port: 5173
http_port: 5172
https_port: 5173Place both of these code blocks at the end of your DDEV config.yaml file. The DDEV config file updates should look something like this:
name: wpstarter
type: wordpress
docroot: ""
php_version: "8.2"
webserver_type: nginx-fpm
router_http_port: "80"
router_https_port: "443"
xdebug_enabled: true
additional_hostnames: []
additional_fqdns: []
database:
type: mysql
version: "8.0"
use_dns_when_possible: true
composer_version: "2"
nodejs_version: "22"
corepack_enable: false
override_config: true
web_environment:
- ENVIRONMENT=dev
#- ENVIRONMENT=prod # This loads the production environment scripts for testing
- WP_ENVIRONMENT_TYPE=development
web_extra_exposed_ports:
- name: vite
container_port: 5173
http_port: 5172
https_port: 5173
web_extra_daemons:
- name: 'vite'
command: "npm install && npm run dev"
directory: /var/www/html/wp-content/themes/[YOUR_THEME]Next, create a .env in the .ddev directory and add the following:
# start vite
VITE_PROJECT_DIR=wp-content/themes/[YOUR_THEME]
VITE_PRIMARY_PORT=5173 #This corasponds to the port number set the DDEV config.yaml
VITE_SECONDARY_PORT=5272
# end viteThis sets three local server variables which we can access in PHP and Vite.
Pulling in assets to WordPress
Now that DDEV and Vite are working together, the assets created by Vite need to be pulled into the <head> of the WordPress site. The tricky part is loading the HMR files from Vite’s local server when DDEV is in development. While still allowing it to load up the assets in our dist directory when the site is in production.
We are going to write a PHP Class that will pull the frontend files into WordPress. In our DDEV configuration, we have an option for ENVIRONMENT which allows us to change between the development and production environment. Depending on what environment we have set, we will switch between the Vite HMR files or the dist directory files.
In your theme directory, create a directory named inc. Inside of that directory create a new file named class-vite.php. I could go line by line on how to write the functionality to pull in the Vite assets into WordPress, but let’s be honest – you probably just want to copy the whole file. Copy the code from class-vite.php and add it to your file class-vite.php. That PHP class has a lot of notes so feel free to read through them if you want to understand how that class is working. Then in your theme function.php file, add the following code to include the new Vite class.
// Init Vite.
require_once get_stylesheet_directory() . '/inc/class-vite.php';
if ( class_exists( 'Vite' ) ) {
new Vite();
}Restart DDEV by running ddev restart. You now should see the Vite dev assets in the <head> of your site. Any updates you make to main.js will update the site styles. Having DDEV and Vite in WordPress sites has made building and styling blocks in WordPress so much easier.
Conclusion
If you are someone who has scrolled to the end to get the finished files, you are in the right place. Viget has a WordPress Site Starter repo that has all the base files and configuration setup. You can run the install with one command and DDEV, Vite and WordPress will all be set up for you.
We built the WordPress Site Starter to help us automate the base setup so that we can focus on custom design and features. To learn more about Viget’s WordPress Site Starter, check out this article.