Add JS to Drupal 8 website

For the last two months I’ve been working on my first Drupal 8 website. Its quite a huge leap from version 7 but the new features and methodology of working with a Drupal CMS is way better.

One bit I struggled with was inserting a custom Javascript file that made use of jQuery functions. This is how I managed to do it (I assume you know how to develop a Drupal 8 theme and how to develop with Drupal 8 in general):

In the theme_name.libraries.yml file, define you library and add the js file i.e.

  js/main.js: { every_page: true }
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

Save the file. Next, edit the theme_name.info.yml to add the library i.e.

 - 'theme_name/custom-js'

Save the file. Open your custom Javascript file e.g. main.js and add you code in the following format. The code demo below ensures Drupal’s no-conflict policy for Javascript libraries. We want to ensure that the different libraries you use function independently. This example caters for jQuery:


    // insert your code here


Save your file and you should be good to go.