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
themes
folder and run the following command:yo liferay-theme
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
wars
folder and expect it to build. You can test if your project is recognized by Workspace by running this command from Workspace’s root folder:../gradlew projects
Your CLI should display your new theme under the
themes
project.Root project 'liferay-workspace' +--- Project ':themes' | \--- Project ':themes:my-generated-theme'
If you moved a WAR-style theme (Gradle/Maven-based) into the
themes
folder, it is not recognized by the Gradleprojects
command.Note: Workspace identifies whether a theme was generated by the Theme Generator by checking whether it has a
package.json
file. Any theme without this file is not compatible in thethemes
folder.
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 theme
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
Generator only.
To build an existing WAR-style theme in Workspace, run the ../gradlew build
command. Liferay Workspace builds the theme using Gradle. Under the hood,
Liferay’s
Theme Builder Gradle
Plugin is
applied and used to build your theme. It works similarly in a Maven workspace.
See the
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.