Isomorphic npm Portlet

The Isomorphic npm Portlet sample provides a portlet that uses isomorphic code (i.e., can run from client and/or server side) on the client side.

Figure 1: This sample portlet displays the results of running code designed for the server in the browser.

Figure 1: This sample portlet displays the results of running code designed for the server in the browser.

This portlet showcases running code designed to execute in the server in the browser. Note that this portlet does not run JavaScript code in the server; it’s executing isomorphic JavaScript code in the browser.

Important: This sample works for Liferay DXP 7.0 Fix Pack 44+ and Liferay Portal CE GA7+.

What API(s) and/or code components does this sample highlight?

This sample leverages the npm development workflow support.

You can do many things with isomorphic code. You can run it in

  • the server only (e.g., Node.js)
  • the client only (e.g., browser)
  • both the server and client (e.g., Node.js + browser)

Isomorphic code cannot run server-side because Liferay DXP is Java based and cannot execute JavaScript that way. This sample portlet shows how Liferay’s npm bundler can transform server-side code to make it work in the client (e.g., emulates some of Node.js’ APIs in the client).

How does this sample leverage the API(s) and/or code component?

This sample uses the npm registry to download project dependencies and uses the liferay-npm-bundler tool to bundle the project dependencies inside the OSGi bundle JAR file.

To accomplish the bundling, the project’s build process relies on a build script inside its package.json file:

"scripts": {
    "build": "babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources && liferay-npm-bundler"
},

Where Is This Sample?

This sample is built with the following build tool:

« Billboard.js npm PortletjQuery npm Portlet »
Este artigo foi útil?
Utilizadores que acharam útil: 0 de 0