How to skip existing frontend folder from vaadin build compilation?

Flow
1

We are using vaadin 24.6.0. We have a spring boot microservice that has an existing frontend/src folder which contains frontend code developed using plain web components.

We are introducing vaadin in this application hence I wanted to keep the vaadin files separately. I have added the below tags to the

<configuration>
   <frontendDirectory>${project.basedir}/vaadin-frontend</frontendDirectory>
   <generatedTsFolder>${project.basedir}/vaadin-frontend/generated</generatedTsFolder>
</configuration>

The new folder vaadin-frontend does get created on execution of the maven command but the build still compiles files from the existing frontend folder which should be skipped.

How do I tell vaadin build to not compile or parse the existing frontend folder?

Thanks.

1 Like
2

Vaadin looks up for ${project.basedir}/src/main/frontend folder by default and fallbacks to ${project.basedir}/frontend if the former isn’t found.

And basically in your case it eventually finds the ${project.basedir}/frontend folder and doesn’t use the frontendDirectory path, because the vaadin-frontend folder doesn’t exist (having frontend folder takes precedence over parameter, because custom named folder is not found).

You need to create vaadin-frontend folder manually then these properties should work.
I just tested with Vaadin 24.6.2:

  • moved ${project.basedir}/src/main/frontend to ${project.basedir}/ (it had theme files and some placeholder files).
  • renamed it to vaadin-frontend
  • added the same parameters:
<plugin>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-maven-plugin</artifactId>
                <version>${vaadin.version}</version>
                <configuration>
                    <frontendDirectory>${project.basedir}/vaadin-frontend</frontendDirectory>
                    <generatedTsFolder>${project.basedir}/vaadin-frontend/generated</generatedTsFolder>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>prepare-frontend</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
  • run it with mvn

By the way, the generatedTsFolder parameter is not needed because it equals the default generated path.

3

Thanks for the response @mikhail.21 but surprisingly it didn’t work. I did create the vaadin-frontend folder before running the maven command but I still get the errors The command is mvn -B -DskipTests=true clean vaadin:build-frontend -Pproduction package -DCVESCORE=11 -DBUILDNUMBER=1

A couple of errors are - these indicate that vaadin is still looking into the frontend folder. Note the frontend folder is in the root directory.

[ERROR] frontend/src/router/routes.ts(169,18): error TS7006: Parameter 'context' implicitly has an 'any' type.
[ERROR] frontend/src/router/routes.ts(174,18): error TS7006: Parameter 'context' implicitly has an 'any' type.

One difference I noticed was I do not have the prepare-frontend goal defined for the vaadin-maven-plugin. I have the build-frontend goal defined for the flow-maven-plugin. It is part of the profiles` as shown below

<profiles>
        <profile>
            <!-- Production mode is activated using -Pproduction -->
            <id>production</id>
            <properties>
                <vaadin.productionMode>true</vaadin.productionMode>
            </properties>

            <dependencies>
                <dependency>
                    <groupId>com.vaadin</groupId>
                    <artifactId>flow-server-production-mode</artifactId>
                    <version>${vaadin.version}</version>
                </dependency>
            </dependencies>

            <build>
                <plugins>
                    <plugin>
                        <groupId>com.vaadin</groupId>
                        <artifactId>flow-maven-plugin</artifactId>
                        <version>${vaadin.version}</version>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>build-frontend</goal>
                                </goals>
                                <phase>compile</phase>
                            </execution>
                        </executions>
                        <configuration>
                            <frontendDirectory>${project.basedir}/vaadin-frontend</frontendDirectory>
                            <generatedTsFolder>${project.basedir}/vaadin-frontend/generated</generatedTsFolder>
                            <optimizeBundle>false</optimizeBundle>
                            <forceProductionBuild>true</forceProductionBuild>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>

The vaadin-maven-plugin is defined under plugins as shown below

<build>
<plugins>
<plugin>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-maven-plugin</artifactId>
                <version>${vaadin.version}</version>
                <configuration>
                    <optimizeBundle>false</optimizeBundle>
                    <forceProductionBuild>true</forceProductionBuild>
                    <frontendDirectory>${project.basedir}/vaadin-frontend</frontendDirectory>
                    <generatedTsFolder>${project.basedir}/vaadin-frontend/generated</generatedTsFolder>
                </configuration>
            </plugin>
</plugins>
</build>

Is the above config correct?

Thanks.

4

Your config seems correct except two small things:

I just tested with running build-frontend and it gave me no errors, but I have no TypeScript sources in my ./frontend/src folder. Could you please check where the generated folder is created, in the ./vaadin-frontend or in ./frontend folder? I.e. I need to know which one is picked by Vaadin. Because the TS errors above might be produced by TS compilation running by something else than Vaadin.

5

Note: calling vaadin: build-frontend is not needed.

1 Like
6

@mikhail.21 - I tried the above steps but got the same outcome - same errors when parsing the files under existing /frontend folder.

The generated folder is created under the vaadin-frontend folder. The existing frontend folder is untouched.

7

After the above recommendations I have matched my pom.xml to the one specified on this link. Now the command I executed is

mvn -B clean vaadin:build-frontend vaadin:prepare-frontend -Pproduction package -DCVESCORE=11 -DBUILDNUMBER=1

Does it look correct now?

8

I think mvn -B clean package -Pproduction -DCVESCORE=11 -DBUILDNUMBER=1 should be enough.

1 Like
9

Then it means that Vaadin actually uses vaadin-frontend folder. I have two clues:

  • Some part of Vaadin frontend build still uses frontend folder and feeds it to TypeScript compiler.
  • Or something else than Vaadin looks inside frontend folder and compiles TS sources.

Could you share a minimal reproducible example with us so that we’ll take a look what is exactly happening?

10

Creating an example will need sometime. Will try to do it in the coming days and revert back.

1 Like