4

For some cases, there is the need to add a JavaScript or CSS package to a project. One of those cases was the DropzoneJS package for the drupal/entity_browser. All recommendations I could read online read like

  1. Download manually
  2. Install manually

or like

Use Drush

This is not really satisfying as there should be a way without user interaction or working around interaction in setup scripts.

Improve this question

2 Answers 2

Reset to default
16

The library can be installed into a custom path by utilizing extra : installer-paths to for e.g.:

web/sites/libraries/{$name}

Additional to that, we define the required package repository with the needed type of drupal-library. Example composer.json for a project:

{
    "name"              : "example-composer/example-project",
    "description"       : "Project template for Drupal 8 projects with composer",
    "type"              : "project",
    "minimum-stability" : "dev",
    "prefer-stable"     : true,
    "scripts"           : {
        "post-install-cmd" : "sh ./scripts/composer/post-install.sh"
    },
    "require"           : {
        "composer/installers"       : "^1.0.20",
        "drupal/entity_browser"     : "8.1.0-alpha1",
        "cweagans/composer-patches" : "~1.0",
        "drupal/core"               : "8.0.*",
        "drush/drush"               : "~8.0",
        "drupal/console"            : "~0.9",
        "drupal/devel"              : "dev-8.x-1.x",
        "drupal/entity_browser"     : "8.1.0-alpha1",
        "drupal/inline_entity_form" : "8.1.0-alpha2",
        "drupal/dropzonejs"         : "8.1.*@dev",
        "enyo/dropzone"             : "dev-master"
    },
    "repositories"      : [
        {
            "type" : "composer",
            "url"  : "https://packagist.drupal-composer.org"
        },
        {
            "type"    : "package",
            "package" : {
                "name"    : "enyo/dropzone",
                "version" : "dev-master",
                "type"    : "drupal-library",
                "dist"    : {
                    "url"  : "https://github.com/enyo/dropzone.git",
                    "type" : "drupal-library"
                },
                "source"  : {
                    "url"       : "https://github.com/enyo/dropzone.git",
                    "type"      : "git",
                    "reference" : "origin/master"
                }
            }
        }
    ],
    "extra"             : {
        "installer-paths" : {
            "web/core"                    : [
                "type:drupal-core"
            ],
            ...
            "web/sites/libraries/{$name}" : [
                "type:drupal-library"
            ]
        }
    }
}

The dist part can be left off and is only needed for --prefer-dist cases when installing via php composer.phar update --prefer-dist (opposite: --prefer-source). To install a version and not the latest from the master branch, you need to set the version directly at the package to require then from there. Example:

"require" : {
    "enyo/dropzone" : "v4.2.*@dev"
},
"repositories" : [
    {
        "type"    : "package",
        "package" : {
            "name"    : "enyo/dropzone",
            "version" : "v4.2.0",
            "type"    : "drupal-library",
            "source"  : {
                "url"       : "https://github.com/enyo/dropzone.git",
                "type"      : "git",
                "reference" : "origin/master"
            }
        }
    }
]
Improve this answer
12
  • 2
    For this type of libraries I prefer bower.
    – user21641
    Dec 22, 2015 at 8:46
  • 1
    @Ivan Jaros, I agree with you. Composer is for PHP libraries.
    – itsdarrylnorris
    Dec 22, 2015 at 11:30
  • 2
    @IvanJaros Because it does not solve conflicts (multiple packages installing the same dependencies multiple times). Also you need packages that have a bower.json to not install stuff that the original dev only needed to develop the package or build the distributable files. Upside: It serves very small packages if well configured.
    – kaiser
    Dec 22, 2015 at 14:22
  • 1
    What Kaiser said @Ivan. Great for small, insular projects; doesn't necessarily scale well to larger projects with more entry points, unless you're careful/lucky in my experience
    – Clive ♦
    Dec 22, 2015 at 16:33
  • 6
    An interesting discussion, but the only practical among you is @kaiser who came with an answer. The others are apparently not convinced enough to come with an actual example how to do the same with Bower. People like me, looking for a answer, will go with an answer, not with some unpractical opinionated discussion.
    – ñull
    May 4, 2017 at 9:16
1

An alternative answer, "don't use composer".

We've had pretty good success using a root npm package called "copy-files-from-to" https://www.npmjs.com/package/copy-files-from-to

Example package.json

{
  "license": "MIT",
  "scripts": {
    "postinstall": "copy-files-from-to"
  },
  "dependencies": {
    "blazy": "^1.8.2",
    "copy-files-from-to": "^2.3.0",
    "select2": "github:select2/select2"
  },
  "copyFiles": [
    {
      "from": "node_modules/blazy/*.js",
      "to": "public/libraries/blazy/"
    },    
    {
      "from": "node_modules/select2/dist/**",
      "to": "public/libraries/select2/dist/"
    }
  ]
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.