JavaScript/Sass build pipeline 

The resources build pipeline in Build/resources/ uses Webpack to bundle React / Yoast components (wrapped as web components via @r2wc/react-to-web-component), build the Yoast webworker and compile SCSS into production CSS assets.

Prerequisites 

  • Node.js v22.20.0 (see Build/resources/.nvmrc)
  • Yarn package manager

Install dependencies:

cd Build/resources
yarn install
Copied!

Commands 

Build (production) 

cd Build/resources
yarn build
Copied!

Start (development server) 

cd Build/resources
yarn start
Copied!

Start with Hot Module Replacement 

cd Build/resources
yarn start:hot
Copied!

Tech stack 

  • Webpack 5 via @wordpress/scripts
  • React with @r2wc/react-to-web-component for wrapping React components as custom elements
  • Babel for JavaScript transpilation
  • SCSS / PostCSS for stylesheets
  • Yoast packages: yoastseo, @yoast/analysis-report, @yoast/components, @yoast/search-metadata-previews, @yoast/social-metadata-previews, and more

JavaScript entries 

Configured in Build/resources/webpack.config.js:

webcomponents.tsx 

Entry
./javascript/webcomponents.tsx
Output
Resources/Public/JavaScript/dist/webcomponents.js
Description
Bundles all 13 React-based web components. Each React component is wrapped with @r2wc/react-to-web-component and registered as a custom element. See Web Components for the full component reference.

worker.js 

Entry
./javascript/worker.js
Output
Resources/Public/JavaScript/dist/worker.js
Description
The Yoast SEO analysis web worker that performs text analysis in a background thread.

SCSS entries 

backend-module.scss 

Entry
./sass/backend-module.scss
Output
Resources/Public/CSS/yoast-seo-backend.min.css
Description
Styles for the Yoast SEO backend module (overview, dashboard).

yoast.scss 

Entry
./sass/yoast.scss
Output
Resources/Public/CSS/yoast.min.css
Description
Core Yoast SEO styles used across the TYPO3 backend interface.

Webpack configuration 

The build uses a base configuration in Build/resources/webpack.config.base.js that extends @wordpress/scripts/config/webpack.config with:

  • Babel loader for all .js files
  • RemoveEmptyScriptsPlugin to clean up empty JS files generated from SCSS-only entries
  • Custom DefinePlugin for process.env.NODE_DEBUG and SCRIPT_DEBUG
  • The DependencyExtractionWebpackPlugin from @wordpress/scripts is removed since dependencies are bundled rather than externalized