Creating a Liferay DXP theme can be accomplished using two different tools:
- Liferay Theme Generator (Node.js-based themes that use the Liferay JS Theme Toolkit)
- Project template/archetype (Gradle/Maven-based)
Liferay Workspace offers an environment where developers can use the Liferay Theme Generator to create themes and their work can be seamlessly integrated into their overall DevOps strategy. You can leverage the Liferay Theme Generator to create Node.js-based themes inside workspace or you can leverage it externally and copy themes into Workspace.
Workspace also offers a traditional Java-based theme approach (leveraging Gradle/Maven) for those that can’t use the Liferay JS Theme Toolkit’s tools in their CI environment.
Below you’ll learn how to manage both Node.js-based themes and Gradle/Maven-based themes in Workspace.
Node.js Themes in Workspace
Liferay Workspace reserves the
themes folder only for themes that are created
with the Themes Generator. There are no Blade CLI-provided commands or Maven
archetypes to generate a theme. You must leverage the
Liferay Theme Generator
from within the
themes folder to create them; you can also copy a generated
theme into the folder.
You’ll demo this theme management capability next. Be sure the Liferay Theme Generator’s required tooling is installed.
Navigate to your workspace’s
themesfolder and run the following command:
Follow the prompts to create your theme.
Navigate into your new theme and run
../gradlew build. Liferay Workspace builds the front-end theme using Gradle. Under the hood, Liferay’s Node Gradle Plugin is applied and used to build your theme.
Workspace is smart enough to differentiate between theme types. For instance, you can’t copy a theme built with the Theme Generator into the
warsfolder and expect it to build. You can test if your project is recognized by Workspace by running this command from Workspace’s root folder:
Your CLI should display your new theme under the
Root project 'liferay-workspace' +--- Project ':themes' | \--- Project ':themes:my-generated-theme'
If you moved a WAR-style theme (Gradle/Maven-based) into the
themesfolder, it is not recognized by the Gradle
Note: Workspace identifies whether a theme was generated by the Theme Generator by checking whether it has a
package.jsonfile. Any theme without this file is not compatible in the
Excellent! You learned how generated themes are recognized in workspace and where they should reside. Next you’ll learn how workspace manages WAR-style themes.
Gradle/Maven Themes in Workspace
Liferay Workspace provides the
wars folder for any WAR-style project. Themes
created with Blade CLI or
Maven using the
project template or archetype are automatically generated here when creating the
project within Workspace.
Themes built using Liferay’s
theme project template are always WARs and should
always reside in Workspace’s
wars folder. They should never be moved to the
themes folder; that folder is reserved for themes generated by the Theme
To build an existing WAR-style theme in Workspace, run the
command. Liferay Workspace builds the theme using Gradle. Under the hood,
Theme Builder Gradle
applied and used to build your theme. It works similarly in a Maven workspace.
Building Themes in a Maven Project
tutorial for more information.
Awesome! You know how WAR-style themes are built in workspace and where they should reside.