Skip to main content

Build Tooling

Location​

All Node tooling lives in configs/.

That folder contains:

  • package.json
  • webpack configuration
  • build scripts
  • installed Node dependencies

This is intentional. ReactWP keeps:

  • source code in src/
  • generated WordPress output in dist/
  • build logic in configs/

Main Commands​

Run these commands from configs/:

npm run build
npm run build:themes
npm run build:plugins
npm run build:mu-plugins
npm run watch
npm run prod
npm run get:core

More focused commands also exist:

npm run build:themes:js
npm run build:themes:css
npm run watch:themes
npm run watch:themes:js
npm run watch:themes:css
npm run prod:themes

What Each Command Does​

  • build runs the project pipeline in development mode
  • watch keeps themes, plugins, and mu-plugins rebuilding as files change
  • prod runs production builds with JS minification, CSS compression, and copied theme image optimization
  • get:core refreshes WordPress core inside dist/

The project pipeline delegates work to smaller scripts, mainly:

  • scripts/project-pipeline.mjs
  • scripts/theme-pipeline.mjs
  • scripts/build-theme-styles.mjs

Theme JS And Theme CSS Are Separate​

The default theme does not rely only on style injection from JavaScript.

Theme CSS is compiled separately from:

  • src/themes/reactwp/scss/default.scss

into:

  • dist/wp-content/themes/reactwp/assets/css/reactwp.min.css

This matters because:

  • CSS becomes a real cacheable asset
  • the theme can ship critical shell styles in PHP and the rest in compiled CSS
  • theme JS and theme CSS can be watched or built independently

Shared Webpack Config​

webpack.shared.config.js is the base factory used by:

  • webpack.themes.config.js
  • webpack.plugins.config.js
  • webpack.mu-plugins.config.js

It centralizes:

  • JS and JSX compilation
  • asset output structure
  • template folder copying
  • shared alias and resolve behavior
  • production optimization rules

The target-specific config files still exist so themes, plugins, and mu-plugins remain easy to reason about separately.

Build Output​

The tooling writes generated files into the WordPress structure inside dist/.

In practice:

  • theme PHP templates are copied into dist/wp-content/themes/...
  • bundled JS and asset files are emitted into assets/
  • copied theme media stays in matching assets/fonts, assets/images, assets/videos, assets/audios, or assets/others folders
  • plugins and mu-plugins are copied into their WordPress destinations

get:core​

npm run get:core downloads and refreshes the WordPress install in dist/.

It also refreshes the bundled ACF PRO copy by default.

Useful environment flags:

  • REACTWP_WORDPRESS_URL to override the WordPress ZIP URL
  • REACTWP_ACF_URL to override the ACF ZIP URL
  • REACTWP_SKIP_ACF=1 to skip the ACF download