Managing Themes in Liferay Workspace

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.

1. Navigate to your workspace’s themes folder and run the following command:

   yo liferay-theme
   

   Follow the prompts to create your theme.

2. 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.

3. 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 Gradle projects 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 the themes 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.