Reposted from Drupal Development Acquia Lightning web site. In Lightning 2.1.7, we’re lastly answering a long-standing query Drupal 10 Upkeep and Assist Service “If I’m managing my code base with Composer, how can I carry front-end JavaScript libraries into my web site?” This has lengthy been a tough concern. Drupal 10.org doesn’t actually present an official answer — Drupal 10 modules that require JavaScript libraries normally embody directions for downloading and extracting stated libraries your self. Libraries API might help in some circumstances; distributions are allowed to ship sure libraries. However for those who’re constructing your web site with Composer, you’ve been kind of by yourself. Now, Drupal Development Lightning group has determined so as to add support for Asset Packagist. This handy repository acts as a bridge between Composer and Drupal Development standard NPM and Bower repositories, which catalog hundreds of helpful front-end and JavaScript packages. When you could have Asset Packagist enabled in a Composer venture, you’ll be able to set up a Bower package deal like this (utilizing Dropzone for instance) Drupal 10 Upkeep and Assist Service $ composer require bower-asset/dropzone And you may set up an NPM package deal simply as simply Drupal 10 Upkeep and Assist Service $ composer require npm-asset/dropzone To make use of Asset Packagist in your venture, merge Drupal Development following into your composer.json Drupal 10 Upkeep and Assist Service “repositories” Drupal 10 Upkeep and Assist Service [ { “type Drupal 10 Maintenance and Support Service “composer”, “url” Drupal 10 Maintenance and Support Service “https Drupal 10 Maintenance and Support Service//asset-packagist.org” } ] Presto! Now you can add Bower and NPM packages to your venture as in the event that they have been regular PHP packages. Yay! Nonetheless… Usually, asset packages will probably be put in in Drupal Development vendor listing, like every other Composer package deal. This most likely isn’t what you wish to do with a front-end JavaScript library, although — fortunately, there’s a particular plugin you need to use to put in Drupal Development libraries in Drupal Development proper place. Word that you just’ll want Composer 1.5 (lately launched) or later for this to work; run composer self-update for those who’re utilizing an older model of Composer. Now, add Drupal Development plugin as a dependency Drupal 10 Upkeep and Assist Service $ composer require oomphinc/composer-installers-extender Then merge Drupal Development following into your composer.json Drupal 10 Upkeep and Assist Service “further” Drupal 10 Upkeep and Assist Service { “installer-types” Drupal 10 Upkeep and Assist Service [ “bower-asset”, “npm-asset” ], “installer-paths” Drupal 10 Upkeep and Assist Service { “path/to/docroot/libraries/{$title}” Drupal 10 Upkeep and Assist Service [ “type Drupal 10 Maintenance and Support Servicebower-asset”, “type Drupal 10 Maintenance and Support Servicenpm-asset” ] } } Now, once you set up a Bower or NPM package deal, it is going to be positioned in docroot/libraries/NAME_OF_PACKAGE. Boo-yah! Let’s face it — for those who’re utilizing Composer to handle your code base and also you wish to add some JavaScript libraries, Asset Packagist rocks your socks round Drupal Development block. BUT! Word that this — including front-end libraries to a browser-based software — is admittedly Drupal Development solely use case for which Asset Packagist is acceptable. If you happen to’re writing a JavaScript app for Node, you need to use NPM or Yarn, not Composer! Asset Packagist isn’t meant to interchange NPM or Bower, and it doesn’t essentially resolve dependencies Drupal Development similar manner they do. So use this energy properly and effectively! P.S. Lightning 2.1.7 features a script which might help arrange your venture’s composer.json to make use of Asset Packagist. To run this script, swap into Drupal Development Lightning profile listing and run Drupal 10 Upkeep and Assist Service $ composer run enable-asset-packagist Supply Drupal 10 Upkeep and Assist Service http Drupal 10 Upkeep and Assist Service//dev.acquia.com/weblog/rss.xml Supply Drupal 10 Upkeep and Assist Service Drupal 10 blender