npm is a powerful tool, and almost a necessity for Front-End development. Since Liferay DXP Fix Pack 30 and Liferay Portal 7.0 CE GA5, you can use npm as your JavaScript package manager tool—including npm and npm packages—while developing portlets in your normal, everyday workflow.

Deployed portlets leverage Liferay AMD Loader to share JavaScript modules and take advantage of semantic versioning when resolving modules among portlets on the same page. The liferay-npm-bundler helps prepare your npm modules for the Liferay AMD Loader.

This section of tutorials covers how to set up npm-based portlet projects and how Liferay Portal supports them.


The liferay-npm-bundler is a bundler (like Webpack or Browserify) that targets Liferay Portal as a platform and assumes you’re using your npm packages from portlets (as opposed to typical web...

Read More

Adding liferay-npm-bundler to Your Portlet

Adding liferay-npm-bundler to your portlet involves installing the package via npm and adding it to your npm build process. Installing liferay-npm-bundler Note: liferay-npm-bundler 1.x performs...

Read More

Configuring liferay-npm-bundler

The liferay-npm-bundler is configured via a .npmbundlerrc file placed in the portlet project’s root folder. You can create a complete configuration manually or extend a configuration preset (via...

Read More

The Structure of OSGi Bundles Containing npm Packages

To deploy JavaScript modules, you must create an OSGi bundle with the npm dependencies extracted from the project’s node_modules folder and modify them to work with the Liferay AMD Loader. The...

Read More

Understanding How liferay-npm-bundler Formats JavaScript Modules for AMD

Liferay AMD Loader is based on the AMD specification. All modules inside an npm OSGi bundle must be in AMD format. This is done for CommonJS modules by wrapping the module code inside a define...

Read More

How Liferay Portal Publishes npm Packages

When you deploy an OSGi bundle with the specified structure, as explained in The Structure of OSGi Bundles Containing NPM Packages tutorial, its modules are made available for consumption through...

Read More

Understanding How Liferay Portal Exposes Configuration For Liferay AMD Loader

NOTE: This tutorial is for users who know how Liferay AMD Loader works under the hood. You can learn more about Liferay AMD Loader in the Liferay AMD Module Loader tutorial. With de-duplication in...

Read More

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...

Read More
0 (0 Votes)
Using ES2015 Modules in your Portlet Previous