Adopt NPM/Yarn with drupal-libraries-sync for Front-End Libraries in Varbase Starter Site Templat

Problem/Motivation

Drupal modules often require third-party front-end libraries to be placed under web/libraries.
While PHP dependencies are already handled via Composer, front-end assets are better managed using NPM or Yarn, with Yarn being the recommended option.

To modernize the Varbase Starter template and align it with current Drupal and front-end best practices, we should adopt NPM/Yarn-based library management with automated syncing into web/libraries.

This approach was discussed and collaboratively refined with Jose, including implementation ideas and workflow design.

Proposed resolution

Adopt NPM/Yarn-based front-end library management for the Varbase Starter site template (Yarn recommended).
Keep and use the existing sync script:

./recipes/varbase_starter/scripts/drupal-libraries-sync.js

Composer Integration
Add Composer scripts to support syncing via Yarn or NPM:

"drupal-libraries-sync": [
  "@drupal-libraries-yarn-sync"
],
"drupal-libraries-yarn-sync": [
  "yarn install",
  "node ./recipes/varbase_starter/scripts/drupal-libraries-sync.js"
],
"drupal-libraries-npm-sync": [
  "npm install",
  "node ./recipes/varbase_starter/scripts/drupal-libraries-sync.js"
],
"post-create-project-cmd": [
  "@drupal-libraries-sync"
]

Front-End Dependencies (package.json)
Declare front-end libraries under dependencies

Support automatic syncing after install

"scripts": {
  "drupal-libraries-sync": "node ./recipes/varbase_starter/scripts/drupal-libraries-sync.js",
  "postinstall": "node ./recipes/varbase_starter/scripts/drupal-libraries-sync.js"
},
"dependencies": {
  "@ckeditor/ckeditor5-media-embed": "~45.2.0",
  "ace-builds": "~1",
  "dropzone": "~5",
  "jquery.fancytree": "~2",
  "swagger-ui-dist": "~3"
},
"drupal-libraries": {
  "library-directory": "web/libraries",
  "libraries": [
    { "name": "dropzone", "package": "dropzone" },
    { "name": "ace", "package": "ace-builds/src-min" },
    { "name": "ckeditor5/plugins/media-embed", "package": "@ckeditor/ckeditor5-media-embed" },
    { "name": "jquery.fancytree", "package": "jquery.fancytree/dist" },
    { "name": "swagger-ui/dist", "package": "swagger-ui-dist" }
  ]
}

Expected Capabilities

• Run yarn install or npm install to fetch front-end libraries
• Run yarn drupal-libraries-sync to sync libraries to web/libraries
• Run npm drupal-libraries-sync as an alternative
• Run composer drupal-libraries-sync for CI and automation

Optionally run:

• composer drupal-libraries-yarn-sync
• composer drupal-libraries-npm-sync

(Yarn is recommended as the default.)

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ Testing to ensure no regression
• ✅ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes
• ❌ Release varbase-11.0.0-alpha1, varbase_starter-1.0.0-alpha1

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• feat: #3570874 Adopt NPM/Yarn with drupal-libraries-sync for Front-End Libraries in Varbase Starter Site Template