Migrating multi-app project from Ant + Vaadin 13 to Maven + Vaadin 14

Flow
1

We are currently trying to migrate a Vaadin 13 project to Vaadin 14 with npm. As in Vaadin 14 the vaadin-maven-plugin is needed, we are also trying to migrate our Ant-Based build to maven.
Our project consists of > 10 different Applications, which are using a shared codebase.
We already migrated this project to Maven and Vaadin 13.
The project looks like this:

- Parent  
-- Application-1 (needs Library-2 and Library-3)  
-- Application-2 (needs Library-2 and Library-4)  
-- Library-1 (needs Third_Party)  
-- Library-2 (needs Library-1)  
-- Library-3  
-- Library-4  
-- Third_Party (Maven-Module which imports 3rd-Party dependencies like vaadin, jetty etc.)

The vaadin-server is started as an embedded server using jetty.
Now we are trying to migrate this project to Vaadin 14 with npm but we couldn’t find a documentation for this kind of project.
The problem is that Library-1 contains custom Vaadin-Components (frontend JsModules and backend Java-Files) which are needed in other libraries and applications. Also all the modules might use or even extend some Vaadin-Components.
We already did all of the following:

  • Move frontend-stuff to “src/main/resources/META-INF/resources/frontend” for Library-Modules.
  • Move frontend-stuff to “frontend” for Application-Modules.
  • Add vaadin-maven-plugin (goal: prepare-frontend) to either the parent module or the application module or all Modules which use or create Vaadin-Components.

When running the project, the frontend-plugin seems to generate the package.json and webpack-files but they don’t contain any of the required Vaadin-Components (eg. Vaadin-Button).
Also if we open the application in the browser, our custom components aren’t loaded.

So we are looking for some advice on how to migrate that kind of project to Vaadin 14 with npm.

2

Move frontend-stuff to “src/main/resources/META-INF/resources/frontend” for Library-Modules.

This is the correct location for jar packaged library-modules

Move frontend-stuff to “frontend” for Application-Modules.

This is the correct location for war pacaged main applicaton module

Add vaadin-maven-plugin (goal: prepare-frontend)

You need to add also build-frontend, include production mode server, and set productionMode system property to true.

3

Hello Tatu,
thanks for the quick response.
Our applications are also Jars, which run Vaadin in an embedded Jetty server but as much as I understand this shouldn’t make a difference.
I created a small demo-project with one library and one application and most of the things seem to work.
However, there are a few issues:

  1. When we create a production Jar for the application, running the Main in Eclipse seems to pick that up, instead of using the development mode. To fix this, we need to make a clean after every build, so that Eclipse rebuilds everything in debug-mode.
  2. When we have a mixin or even a component in our library, which we would like to extend in our applications frontend-code, we need to import it using “…/…/…/library/src/main/resources/META-INF/resources/frontend/src/mixin” instead of using “./src/mixin”.
    However, this way the imported module is not able to find it’s npm dependencies and the needed dependencies need to be installed manually inside the library module.

How can I solve the given problems?

4

I solved the second issue by importing from “@vaadin/flow-frontend” instead of using relative cross module imports.