Installing the JS Generator and Generating a Bundle

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.

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.

    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.

« Liferay JS GeneratorUnderstanding the JS Portlet Extender Configuration »