Including External JavaScript Libraries in Fragments from Documents and Media

Issue

Page Fragments sometimes lack access to external JavaScript or CSS components that are maintained locally within an instance. To make these resources available within custom Page Fragments, you must reference the external assets directly from Documents and Media.

Environment

• Liferay DXP 7.4

Resolution

To include external JavaScript or CSS libraries stored in Documents and Media inside a fragment, follow these steps:

1. Upload your JavaScript (.js) and CSS (.css) files to Documents and Media.
2. In your fragment's HTML or JavaScript layout, add <script> or <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, follow these steps:

1. Navigate to the Site Menu > Content & Data > Documents and Media.
2. Click the file's name to open the preview frame.
3. Inside the file preview, click the Info button (the info icon).
4. Copy the complete URL displayed next to Latest Version URL.

Additional Information

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

• Bundling Resources in a JavaScript Import Map Entry Client Extension