Including External JavaScript Libraries in Fragments from Documents and Media

Issue

• Need to use external JavaScript libraries that are uploaded to Documents and Media in fragments.

Environment

• Liferay DXP 7.4

Resolution

To include external JavaScript libraries stored in Documents and Media within a fragment:

1. Upload your JavaScript (.js) and CSS (.css) files to Documents and Media.
2. In your fragment's HTML or Javascript, add <script> and <link> tags to reference the files, using the full URL to the latest version as the src or href attribute.
   • To obtain the correct URL of the files:
     1. Go to Site Menu > Content & Data > Documents and Media.
     2. Click the file's name to open the preview.
     3. In the file preview, click the Info button (i icon).
     4. Copy the URL displayed next to "Latest Version URL".

Additional Information

For more robust JavaScript library management, particularly in production environments, consider using JavaScript import maps. This approach offers better organization, version control, and caching capabilities. Refer to these resources for more information:

• Bundling Resources in a JavaScript Import Map Entry Client Extension