Installing the JS Generator and Generating a Bundle

This document has been replaced by an article on Liferay Learn and is no longer maintained here. The Liferay CLI tool is used for creating JavaScript application projects for Liferay versions 7.1+.

Here you’ll learn how to install the Liferay JS Generator and use it to create JavaScript widgets. See the Angular Application, React Application, and Vue Application articles to learn how to use your existing Angular, React, and Vue apps in Liferay DXP.

Note: To use the Liferay JS Generator, you must have the Liferay JS Portlet Extender activated in your Liferay DXP instance. It’s activated by default. You can confirm this by opening the Control Menu, navigating to the App Manager, and searching for com.liferay.frontend.js.portlet.extender.

Follow these steps to create your JavaScript widget:

1. Install Node.js. Note that Node Package Manager (npm) is installed with this as well. You’ll use npm to install the remaining dependencies and generator, and configure your npm environment.

2. Install Yeoman for the generator:

   npm install -g yeoman
   

3. Install the Liferay JS Generator:

   npm install -g generator-liferay-js
   

4. Run the generator with the command below, select the JavaScript widget you want to create, and answer the prompts that follow.

   yo liferay-js
   

   

   Figure 1: The liferay-js generator prompts you for widget options.

5. If you specified your app server information when your widget was generated, you can deploy your widget by running the command below. You can verify this by checking the value of the liferayDir entry in the widget’s .npmbuildrc.

   npm run deploy
   

Great! Now you know how to install and run the Liferay JS Generator.