custom frontend folder does not work

[haijian-vaadin]

Description of the bug

As a developer, I want to use a different frontend folder instead of the default one under the project's root, for example, src/main/frontend to be aligned with a Maven project.

I tried with the configuration for the maven plugin in the pom.xml file

<configuration>
    <frontendDirectory>src/main/frontend</frontendDirectory>
</configuration>

But still most of the code is generated under the default frontend directory, including the theme generation, so that I got the error in the console

com.vaadin.flow.server.ExecutionFailedException: Discovered @Theme annotation with theme name 'custom-frontend', but could not find the theme directory in the project or available as a jar dependency. Check if you forgot to create the folder under '/Users/haijian/Downloads/custom-frontend/src/main/frontend/themes' or have mistyped the theme or folder name for 'custom-frontend'.
        at com.vaadin.flow.server.frontend.TaskUpdateThemeImport.verifyThemeDirectoryExistence(TaskUpdateThemeImport.java:120) ~[flow-server-10.0.0.alpha4.jar:10.0.0.alpha4]
        at com.vaadin.flow.server.frontend.TaskUpdateThemeImport.execute(TaskUpdateThemeImport.java:79) ~[flow-server-10.0.0.alpha4.jar:10.0.0.alpha4]
        at com.vaadin.flow.server.frontend.NodeTasks.execute(NodeTasks.java:937) ~[flow-server-10.0.0.alpha4.jar:10.0.0.alpha4]
        at com.vaadin.base.devserver.startup.DevModeInitializer.runNodeTasks(DevModeInitializer.java:414) ~[vaadin-dev-server-10.0.0.alpha4.jar:na]
        at com.vaadin.base.devserver.startup.DevModeInitializer.lambda$initDevModeHandler$0(DevModeInitializer.java:343) ~[vaadin-dev-server-10.0.0.alpha4.jar:na]
        at java.base/java.util.concurrent.CompletableFuture$AsyncRun.run(CompletableFuture.java:1800) ~[na:na]
        at java.base/java.util.concurrent.CompletableFuture$AsyncRun.exec(CompletableFuture.java:1792) ~[na:na]
        at java.base/java.util.concurrent.ForkJoinTask.doExec(ForkJoinTask.java:295) ~[na:na]
        at java.base/java.util.concurrent.ForkJoinPool$WorkQueue.topLevelExec(ForkJoinPool.java:1016) ~[na:na]
        at java.base/java.util.concurrent.ForkJoinPool.scan(ForkJoinPool.java:1665) ~[na:na]
        at java.base/java.util.concurrent.ForkJoinPool.runWorker(ForkJoinPool.java:1598) ~[na:na]
        at java.base/java.util.concurrent.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:183) ~[na:na]

Expected behavior

After configuration with

<configuration>
    <frontendDirectory>src/main/frontend</frontendDirectory>
</configuration>

or some other ways of defining a custom folder, Vaadin will generate the code to that folder and Application runs normally.

Minimal reproducible example

custom-frontend.zip

Versions

• Vaadin / Flow version: 23.0.0.alpha3
• Java version: 16.0.1, vendor: Amazon.com Inc.
• OS version: Mac Os

[mstahv]

Upvote!

In addition to just moving the frontend directory, I'd like to move also the front-end build files. Both having the directory and build files are quite badly against Maven conventions. If we could move those away from the top level directory, it would give much cleaner image for evaluators and users, who get confused about those files (many have chosen Vaadin not to fiddle with JS and/or JS build).

https://maven.apache.org/guides/introduction/introduction-to-the-standard-directory-layout.html

[mstahv]

See also: #6629

[mcollovati]

It seems there are several points to consider for this issue.

First, there are two available configurations for front-end stuff in maven plugin: frontendDirectory and generatedTsFolder.
First one is for fronted sources, but it is also used as a base path for some generated file, created in frontendDirectory/generaetd
The second is used by Endpoint generator, but also for themes (TaskUpdateThemeImport).

Default values are:

• frontendDirectory: ${project.basedir}/fronted/
• generatedTsFolder: ${project.basedir}/fronted/generated

One of the problem here is that if they are completely unrelated, so changes to frontendDirectory are not reflected into generatedTsFolder.

Here are some usages of the above configurations:

• TaskGenerateIndexTs generates file in ${frontendDirectory}/generated
• TaskGenerateIndexTs has an hard-coded relative path to ../../target; should potentially be computed based on generated index.ts folder and given buildDirectory
• TaskGenerateFeatureFlags generates file in ${frontendDirectory}/generated
• TaskUpdateWebpack sets javascript const frontendGeneratedFolder to the value of generatedTsFolder
• TaskUpdateThemeImport creates file in generatedTsFolder
• TaskUpdateSettingsFile hard-codes generated path to generated
• EndpointGeneratorTaskFactoryImpl produces contents in generatedTsFolder
• TaskGenerateBootstrap creates vaadin.ts in ${frontendDirectory/generated} and expects themes and index.ts (not custom) to be in the same directory. OK for index.ts, but fails for themes if generatedTsFolder is different from ${frontendDirectory}/generated.
• FrontendTools.resolveFrontendPath seems to expect fronted folder as direct child of project root. To be investigated, because it gets projectRoot folder as a paremeter, but fronted is hard-coded and may be wrong with custom frontendDirectory configuration

A test exists for custom front-end directory (flow-tests/test-npm-only-features/test-npm-custom-frontend-directory), but it does not have themes.

Vite suffers from additional problems (see #14046)

Some actions we can consider:

• move all generated files to buildDirectory
• use generatedTsFolder only for Enpoints generator, and use a common hard-coded folder for all other generated stuff (${frontendDirectory}/generated or better somewhere under buildDirectory)
• handle default value for generatedTsFolder programmatically in plugins so that it will be based on frontendDirectory, when not explicitly set

Internal improvements

• add a test for webpack with custom front-end dir directory themes
• add tests for Vite with custom front-end directory

[vaadin-bot]

This ticket/PR has been released with Vaadin 23.0.13.

[vaadin-bot]

This ticket/PR has been released with Vaadin 23.1.6.

[vaadin-bot]

This ticket/PR has been released with Vaadin 23.2.0.