Frontend structure

RapidClipse projects are based on Vaadin and its UI components. The client-side parts of the components are WebComponents, so they basically consist of HTML & CSS.

While the server-side parts are available as jar dependencies as usual and are managed with Maven, the client-side parts are available as ES6 modules (or JS modules).
As the name suggests, the ES6 modules are modular, so they can have dependencies on other modules.

Vaadin provides a Frontend-Tooling, which integrates the package management of the JS modules as well as the further processing of the modules and other frontend files.
Internally, PNPM is used to manage and assemble modules, and webpack is used to pack (in Production Mode) or deploy (in Development Mode).
This tooling is automated and encapsulated as "vaadin-maven-plugin", which is integrated as a Maven plugin into the normal Maven build lifecycle.

Components of the maven-plugin:

In addition to the JS Module files, the frontend tooling also takes into account the files from the "frontend" folder in the project root directory.
This "frontend" folder may contain additional CSS and JavaScript files, e.g. js files for defining custom components or css files for styling customizations - single files as well as whole custom themes.

Vaadin projects and thus also RapidClipse projects are by default in development mode. Here "build-frontend" is not executed, instead an additional "webpack-development-server" is started at application startup, which provides the module files and files from the "frontend" folder for the application "on-the-fly".

Frontend dependencies managed by npm/pmpm are located in the "node_modules" folder in the root folder of the project.
Other files related to frontend tooling: