LIFERAY ES MODULE PORTLET

Sample repository to show how to use Liferay portlets with es modules.

Goal

Provide packages and components with a portlet and import them on runtime into a portlet. This should increase build time to a minimum because the liferay-npm-bundler doesn’t has to transpile files and only creates a jar file.

Explenation

The concept includes two modules. A provider module and a consumer modules. They are connected in a n to n relation.

Provider Module

A provider module exposes a package or component or basically anything through a portlet and serves the module then through an url.

To make this work, the following steps have to be done.

  1. Create an entry which is required for the liferay-npm-bundler.

    export default function main () {}

    See es-react-provider/src/entry.js as an example

  2. Create an index module which exports all modules which you’d like to provide through this module.

    import SampleModule from './modules/SampleModule' 
import AnotherSampleModule from './modules/AnotherSampleModule'

export { SampleModule, AnotherSampleModule }

    See es-react-provider/src/index.ts as an example

  3. Create two bundle processes which bundle the entry for the liferay-npm-bundler and the index.ts file.

    • The entry for the liferay-npm-bundler needs to be placed inside the build folder in the commonjs format for liferay to handle it correctly.
    • The bundled version of the index.ts needs to be placed inside the assets folder in the es format, preferably in the lib subfolder.

    See es-react-provider/rollup.config.js as an example

  4. Define the liferay-npm-bundler to

    • ignore the assets folder
    • make the portlet available through a defined url
    • create a jar file

    See es-react-provider/.npmbundlerrc as an example

Consumer Module

A consumer module uses the provided es modules from provider modules.

  1. Create an entry which includes a script html tag and imports a file.

    export default function main(entryParams) {
    const node = document.getElementById(entryParams.portletElementId);

    const script = document.createElement('script')
    script.setAttribute('type', 'module')
    script.innerText = `
        import { main } from '/o/es-react-portlet/lib/index.js';
        main(${JSON.stringify(entryParams)});
    `

    node.append(script)
}

    See es-react-portlet/src/entry.ts as an example

  2. Create an index module, which (in our example) consumes some of the provided modules.

    import { SampleModule, AnotherSampleModule } from '/o/es-provider/lib/index.js'

export function main (entryParams) { ... }

    See es-react-portlet/src/index.tsx as an example

  3. Create two bundle processes which bundle the entry for the liferay-npm-bundler and the index file.

    • The entry for the liferay-npm-bundler needs to be placed inside the build folder in the commonjs format for liferay to handle it correctly.
    • The bundled version of the index needs to be placed inside the assets folder in the es format, preferably in the lib subfolder.
    • The /o/es-provider/lib/index.js has to be defined to be an external module, so the bundler doesn’t throws an error on build time.

    See es-react-portlet/rollup.config.js as an example

  4. Define the liferay-npm-bundler to

    • ignore the assets folder
    • make the portlet available through a defined url
    • create a jar file

    See es-react-portlet/.npmbundlerrc as an example

Example

This workspace contains three modules.

Modules

es-react-provider

Contains and exposes react and react-dom as es modules.

es-react-components

Contains components which can be imported into a portlet.

es-react-portlet

Contains the actual portlet which uses the react and react-dom from the es-react-provider module and includes a sample component from the es-react-components module.

How to run

To run this example, all modules need to be built and deployt onto a liferay instance. After that, everything should work as expected.

GitHub

View Github