Creating Multi-Module Portlet Project

Shows how to create a multi-module Vaadin Portlet Maven project, in which each portlet is in its own module, and frontend assets are in one module

Vaadin Portlet Multi-Module Project Structure
Configuring a Vaadin Portlet Multi-Module Project
Deploying a Multi-Module Portlet Project

It’s possible to set up your Vaadin Portlet project as a multi-module Maven project. This allows each portlet to be placed into its own module, allowing for greater separation between the portlets. The separation makes it easier to separate concerns and allow several people or teams to work on the portlets simultaneously.

The multi-module Vaadin Portlet project can contain non-Vaadin Portlets in their own modules. A module may of course contain multiple portlets, if it makes sense for the project.

Multi-module project is the recommended setup for Vaadin Portlet projects. This chapter looks into what a multi-module project looks like for Vaadin Portlets, and how it can be set up.

Vaadin Portlet Multi-Module Project Structure

The project consists of 1+N modules, where N is the number of portlets in the project. The 1 stands for the Vaadin front-end asset module. All front-end assets used by the Vaadin Portlets are packaged into a single WAR by the front-end asset module. The asset WAR can be deployed onto the same web server as the portlet WARs, or onto some other file provider. The following is a sketch of a possible project structure.

project-base
+-- frontend-bundle
+-- vaadin-portlet-1
+-- vaadin-portlet-2
:
+-- vaadin-portlet-n

For an example of a multi-module Vaadin Portlet project, take a look at the addressbook-portlet and the associated tutorial, Address Book Demonstration. The tutorial covers the project structure and how the different portlet components interact.

Setting up the above project structure requires some configuration in the pom.xml files of each module directly related to portlets. After the configuration is done, and everything has been built and deployed once, further portlet deployments require deploying only the WAR file for the module being edited, if there are no front-end changes. This section shows how to configure a multi-module Vaadin Portlet project.

Configuring a Vaadin Portlet Multi-Module Project

Configuring a Vaadin Portlet multi-module project has two requirements:

Portlet modules build WARs without front-end resources

This is achieved by not using vaadin-maven-plugin in the pom.xml. Normally, Vaadin 23+ projects would have vaadin-maven-plugin in the pom.xml to enable packaging frontend files into the WAR. Not using the plugin leaves the WAR without front-end resources.
Static asset module packages front-end resources from all portlet WARs

This requires a bit more configuration. The static assets module needs to depend on all Vaadin portlet modules. This means, that each portlet module needs to build a WAR and a JAR package. In addition, for the front-end resources to be available, the portlet modules need to be set up similarly to Vaadin add-on projects. Finally, the portlet modules need to be configured to fetch front-end resources from the deployed static front-end resource provider.

Enable webpack

Starting with Vaadin 23.2, Vite is the default tool for front-end builds. However, Vaadin Portlet requires webpack to be used. All modules must enable it with the webpackForFrontendBuild feature flag, even if they do not package fronted files into the WAR.

com.vaadin.experimental.webpackForFrontendBuild=true

See Feature Flags for more information.

Building Two Assets

Building both a WAR and a JAR can be achieved by configuring the maven-war-plugin as follows:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <configuration>
        <attachClasses>true</attachClasses>
    </configuration>
</plugin>

Adding the attachClasses flag instructs Maven to build a JAR file with the -classes classifier. Use this JAR as a dependency in your static assets module:

<dependency>
    <groupId>your.group</groupId>
    <artifactId>module-name</artifactId>
    <classifier>classes</classifier>
</dependency>

Replace the groupId and artifactId with the correct values. The portlet module is now used as a dependency for the static assets module.

Structuring Module as a Vaadin Add-on

The significant part of the project structure of an add-ons is the frontend resource folder. The folder is normally located at the root of the module for Vaadin 23+ projects. In order for the front-end resources to be packaged into the JAR file, place the files under the frontend folder to /src/main/resources/META-INF/frontend/.

Retrieving Front-End Resources from the Static Asset Artifact

Vaadin Portlet applications need to be instructed to retrieve the static front-end assets from the WAR build from the static-vaadin-assets module. This is done by adding the file ./src/main/resources/META-INF/VAADIN/config/flow-build-info.json.

After creating the file, put the following contents into the JSON file:

{
  "externalStatsUrl": "/vaadin-portlet-static/VAADIN/config/stats.json"
}

For portlets running in Liferay 7, the JSON file should contain an o segment:

{
"externalStatsUrl": "/o/vaadin-portlet-static/VAADIN/config/stats.json"
}

The /vaadin-portlet-static/ is the assumed name of the WAR build from the static module. If you rename the WAR, change the JSON file to match. If you need to place the static asset WAR to some other web location, use the full URL to do so (keeping the /VAADIN/… portion intact).

Note	The relative URL is mapped to port `8080`, so the above partial URL would map as `http://127.0.0.1:8080/vaadin-portlet-static/VAADIN/config/stats.json`. If your web server is mapped to a different port, provide the full URL instead of a relative URL.

Deploying a Multi-Module Portlet Project

The deployment of a multi-module Vaadin Portlet project is very similar to that of the single-module project: deploy all the portlet WAR files and the static assets WAR file to your web server.

When editing a single portlet module, there are two different deployment patterns:

If you only edit the Java code of the portlet and don’t add front-end resources, you can rebuild the portlet WAR and only redeploy that WAR file.
If you add front-end resources to your portlet module, you need to rebuild and redeploy the static assets WAR, as well as the portlet WAR itself.

ADA1B3CB-4B3E-4C9D-95CC-412B56CDD2CD

Documentation