Documentation versions (currently viewingVaadin 14)

You are viewing documentation for an older Vaadin version. View latest documentation

Creating a Multi-Module Portlet Project

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

It is 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, giving 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.

A 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. In this chapter, we look 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 frontend asset module. All frontend assets used by Vaadin Portlets are packaged into a single WAR by the frontend asset module. The asset WAR can be deployed onto the same web server as the portlet WARs, or onto some other file provider. Below is a sketch of a possible project structure.

+-- 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 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 frontend changes. In the next section, we show 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:

  1. Portlet modules build WARs without frontend resources

    This is achieved by not using vaadin-maven-plugin in the pom.xml. Normally, Vaadin 14+ projects would have vaadin-maven-plugin in the pom.xml to enable packaging frontend files into the WAR. Not using the plugin will leave the WAR without frontend resources.

  2. Static asset module packages frontend resources from all portlet WARs

    This will require 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 frontend 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 frontend resources from the deployed static frontend resource provider.

Building Two Assets

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


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


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, with regard to add-ons, is the frontend resource folder. The folder is normally located at the root of the module for Vaadin 14+ projects. In order for the frontend resources to packaged into the JAR file, place the files under the frontend folder to /src/main/resources/META-INF/frontend/.

Retrieving Frontend Resources from the Static-Assets Artifact

Vaadin Portlet applications need to be instructed to retrieve the static frontend 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"

/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 in some other web location, use the full URL to do so (keeping the /VAADIN/…​ portion intact).

The relative URL is mapped to port 8080, so the above partial URL would be mapped as 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 do not add frontend resources, you can simply rebuild the portlet WAR and only redeploy that WAR file.

  • If you add frontend resources to your portlet module, you will need to rebuild and redeploy the static-assets WAR, as well as the portlet WAR itself.