Using Vite with Boilerplate & WordPress

Boilerplate has been around long enough to move through several generations of front-end tooling: Grunt, Gulp, Webpack, and now Vite.

Each step solved the problems of its era. Grunt automated repetitive tasks. Gulp made asset pipelines easier to reason about. Webpack helped normalize modern JavaScript bundling. Vite brings the workflow into the current era with faster builds, simpler configuration, modern dependency handling, and strong long-term ecosystem adoption.

WordPress still renders the site

The important part is that Boilerplate does not use Vite to turn WordPress into a single-page application.

WordPress still owns the templates. PHP still renders the pages. The theme still follows familiar WordPress architecture. Vite is only responsible for the asset pipeline: JavaScript, SASS, PostCSS/Autoprefixer, sourcemaps, minification, copied fonts, and stable output files in dist/.

That separation keeps the theme practical. Developers get modern front-end tooling without giving up the reliability, template hierarchy, plugin compatibility, and content-management strengths of classic WordPress.

The asset contract matters

A WordPress theme needs predictable asset paths. Boilerplate’s Vite setup preserves a stable output contract: front-end JavaScript goes to dist/js/theme.js, front-end CSS goes to dist/css/theme.css, editor/admin CSS get their own files, and copied fonts live under dist/font/.

That means the build system can evolve without forcing the PHP side of the theme to constantly relearn where assets live.

Dev builds and production builds have different jobs

Development builds are for debugging. They can emit sourcemaps, skip minification, and run in watch mode while a developer works.

Production builds are for shipping. They minify CSS, run JavaScript through Terser, copy install assets when needed, and produce the compiled files WordPress will enqueue on the front end, in the editor, and in the admin.

The commands in package.json keep those workflows explicit: build, build:dev, compile, compile:dev, and watch. Environment variables like BP_INSTALL, BP_SOURCEMAP, and BP_BEEP_ON_BUILD_ERROR control the details.

Why Vite is the right direction

Vite has become one of the clearest long-term choices in modern front-end tooling. The official Vite docs explain its split between fast native-ESM development and optimized production builds, while ecosystem reports and package usage show very broad adoption.

For Boilerplate, that matters because a parent theme should not bet on fragile tooling. The build system should be boring, well-supported, fast enough to enjoy using, and mainstream enough that future developers can understand it quickly.