9 – Step by step on how to add Javascript dependencies for modules as Blazy or Slick using Composer

Because my project is deployed to a remote server I need to reduce human access to that server, this is Why I add a composer extra repositories to manage javascript dependencies and then add those dependencies to mi theme library.

  1. Add repositories.
    Blazy and Slick require external libraries that according to the authors it must be done manually. But, you could do it automatically. In the composer.json file add this code in the repositories area.
        {
            "type": "package",
            "package": {
                "name": "kenwheeler/slick",
                "version": "1.8.1",
                "type": "drupal-library",
                "dist": {
                    "url": "https://github.com/kenwheeler/slick/archive/v1.8.1.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "dinbror/blazy",
                "version": "1.8.2",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/dinbror/blazy",
                    "type": "git",
                    "reference": "tags/1.8.2"
                }
            }
        }

Note: that we are using the latest versions for both libraries, but you could fix the text to connect your required version.

  1. Install modules
    Using composer commands to install the modules.
composer require dinbror/blazy
composer require kenwheeler/slick

Note: Because we are setting both packages with type “drupal-library”, they will be installed according to extra params in composer on the propper “installer-paths” folder found in the composer file too.

  1. Add dependencies to your THEME libraries file
    In your custom THEME in the file YOUR_THEME.libraries.yml and the below lines taking care of identation.
blazy:
  js:
    /libraries/blazy/blazy.min.js: {}
    /libraries/blazy/blazy.js: {}
slick:
  js:
    /libraries/slick/slick/slick.min.js: {}
  css:
    /libraries/slick/slick/slick.css: {}
  1. Rebuild your cache
    This way your new changes will take effect. (Drush required)
drush cr