How to use generator liferay js - liferay/liferay-js-toolkit GitHub Wiki

:warning: The contents of this wiki have been migrated to the liferay/liferay-frontend-projects monorepo and more specifically to the to the maintenance/projects/js-toolkit/docs directory. Development and updates will continue there, and this repo will be archived (ie. switched to read-only mode).

👀 Artifacts generated by this tool won't work unless you have Liferay 7.1 and the JS Portlet Extender installed, or 7.2+ (the extender is built into any version greater than or equal to 7.2).

The liferay-js Yeoman generator is a tool to generate projects based on a toolchain where npm and liferay-npm-bundler are used to manage project's configuration and build process.

There's an analogous tool based on Java, named blade but projects generated with such tool need that the developer has a JDK installed to build and deploy. This is not optimal for frontend-only developers so the liferay-js generator covers that niche.

However there's a prerequisite to be able to deploy projects generated by this tool: you need to activate the Liferay Frontend JS Portlet module in your Liferay's instance. To do that, just head up to the App Manager in the Control Panel, search for com.liferay.frontend.js.portlet.extender and make sure it is active.

Now, let's see the steps needed to generate a project from scratch.

Install the generator

  1. Install Node.js and npm if you don't have them already.

  2. Then install Yeoman by running the following command:

npm install -g yo ↩
  1. Install the liferay-js generator:
npm install -g generator-liferay-js ↩

Run the generator

After installing, you are ready to go and generate your first project, by running the command:

yo liferay-js ↩

The generator will prompt you with some questions regarding your project configuration. The first one is deciding what type of project you want to create:

? What type of project do you want to create? (Use arrow keys)
  -- Widget projects --
❯ JavaScript Widget
  Angular Widget
  React Widget
  Vue.js Widget
  Metal.js Widget

(Move up and down to reveal more choices)

After that, depending on what you choose, you may be prompted with more questions to fine tune the project and, once the project is generated, you may run the following npm scripts in your project.

Running npm scripts in your project

Once the project is generated, all actions are run by using npm scripts. You can see all available commands here.

Further configuration of the project

Once the project is generated, you can configure some of its features following these guidelines.