Using the NPMResolver API in Your Portlets

If you’re developing an npm-based portlet, your OSGi bundle’s package.json is a treasure-trove of information. It contains everything that’s stored in the npm registry about your bundle: default entry point, dependencies, modules, package names, versions, and more. Since Liferay DXP 7.0 Fix Pack 37 and Liferay Portal 7.0 CE GA6, Liferay DXP’s NPMResolver APIs expose this information so you can access it in your portlet. If it’s defined in the OSGi bundle’s package.json, you can retrieve the information in your portlet with the NPMResolver API. For instance, you can use this API to reference an npm package’s static resources (such as CSS files) and even to make your code more maintainable.

To enable the NPMResolver in your portlet, use the @Reference annotation to inject the NPMResolver OSGi component into your portlet’s Component class, as shown below:

import com.liferay.frontend.js.loader.modules.extender.npm.NPMResolver;

public class MyPortlet extends MVCPortlet {
  
  @Reference
  private NPMResolver `_npmResolver`;
  
}

Note: Because the NPMResolver reference is tied directly to the OSGi bundle’s package.json file, it can only be used to retrieve npm module and package information from that file. You can’t use the NPMResolver to retrieve npm package information for other OSGi bundles.

Now that the NPMResolver is added to your portlet, the tutorials in this section describe retrieving your OSGi bundle’s npm package and module information.