Failed to load resource: the server responded with a status of 404 (Vaadin 14 + Spring Boot)

Im having problem loading my AppLayout addon UI in production. I don't know what happened but this app has already been deployed to server for several times until this time that I have to test something. previous config wont work anymore, so I tried other config but failed.

This is my application.properties

server.port=3000
# Ensure application is run in Vaadin 14/npm mode
vaadin.productionMode=true
#vaadin.compatibilityMode = false
logging.level.org.atmosphere = warn

And this is my POM

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.main.app</groupId>
<artifactId>webex-event-management</artifactId>
<name>webex-event-management</name>
<version>2.0-SNAPSHOT</version>
<packaging>jar</packaging>

<properties>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

    <!--<vaadin.version>14.0.15</vaadin.version>-->
    <vaadin.version>14.1.17</vaadin.version>

    <drivers.dir>${project.basedir}/drivers</drivers.dir>
    <drivers.downloader.phase>pre-integration-test</drivers.downloader.phase>
</properties>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.1.7.RELEASE</version>
</parent>

<pluginRepositories>
    <pluginRepository>
        <id>central</id>
        <url>https://repo1.maven.org/maven2/</url>
        <snapshots><enabled>false</enabled></snapshots>
    </pluginRepository>
</pluginRepositories>

<repositories>
    <repository>
        <id>central</id>
        <url>https://repo1.maven.org/maven2/</url>
        <snapshots><enabled>false</enabled></snapshots>
    </repository>
    <!-- Repository used by many Vaadin add-ons -->
    <repository>
        <id>Vaadin Directory</id>
        <url>https://maven.vaadin.com/vaadin-addons</url>
        <snapshots><enabled>false</enabled></snapshots>
    </repository>
</repositories>

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>${vaadin.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

<dependencies>
    <dependency>
        <groupId>com.vaadin</groupId>
        <!-- Replace artifactId with vaadin-core to use only free components -->
        <artifactId>vaadin</artifactId>
        <exclusions>
            <!-- Webjars are only needed when running in Vaadin 13 compatibility mode -->
            <exclusion>
                <groupId>com.vaadin.webjar</groupId>
                <artifactId>*</artifactId>
            </exclusion>
            <exclusion>
                <groupId>org.webjars.bowergithub.insites</groupId>
                <artifactId>*</artifactId>
            </exclusion>
            <exclusion>
                <groupId>org.webjars.bowergithub.polymer</groupId>
                <artifactId>*</artifactId>
            </exclusion>
            <exclusion>
                <groupId>org.webjars.bowergithub.polymerelements</groupId>
                <artifactId>*</artifactId>
            </exclusion>
            <exclusion>
                <groupId>org.webjars.bowergithub.vaadin</groupId>
                <artifactId>*</artifactId>
            </exclusion>
            <exclusion>
                <groupId>org.webjars.bowergithub.webcomponents</groupId>
                <artifactId>*</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-spring-boot-starter</artifactId>
        <exclusions>
            <!-- Excluding so that webjars are not included. -->
            <exclusion><groupId>com.vaadin</groupId>
                <artifactId>vaadin-core</artifactId></exclusion>
        </exclusions>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>6.0.6</version>
    </dependency>
    <dependency>
        <groupId>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
        <version>2.8.5</version>
    </dependency>
    <dependency>
        <groupId>com.googlecode.json-simple</groupId>
        <artifactId>json-simple</artifactId>
        <version>1.1.1</version>
    </dependency>
    <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-email</artifactId>
        <version>1.4</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.dataformat</groupId>
        <artifactId>jackson-dataformat-xml</artifactId>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.9.8</version>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-select-flow</artifactId>
        <version>1.0.0.beta1</version>
        <type>jar</type>
    </dependency>
    <dependency>
        <groupId>org.vaadin.marcus</groupId>
        <artifactId>shortcut</artifactId>
        <version>0.3.0</version>
        <type>jar</type>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-accordion-flow</artifactId>
        <version>1.0.3</version>
        <type>jar</type>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
        <exclusions>
            <exclusion>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-logging</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
    <dependency>
        <groupId>com.github.appreciated</groupId>
        <artifactId>apexcharts</artifactId>
        <version>2.0.0.beta5</version>
    </dependency>
    <dependency>
        <groupId>org.postgresql</groupId>
        <artifactId>postgresql</artifactId>
        <version>42.2.5</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.apache.poi/poi -->
    <dependency>
        <groupId>org.apache.poi</groupId>
        <artifactId>poi</artifactId>
        <version>4.1.1</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml -->
    <dependency>
        <groupId>org.apache.poi</groupId>
        <artifactId>poi-ooxml</artifactId>
        <version>4.1.1</version>
    </dependency>
    <dependency>
        <groupId>com.github.appreciated</groupId>
        <artifactId>app-layout-addon</artifactId>
        <version>4.0.0.rc4</version>
    </dependency>
    <dependency>
        <groupId>org.vaadin.helper</groupId>
        <artifactId>async-manager</artifactId>
        <version>1.1.0-alpha1</version>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-testbench</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

<build>
    <finalName>webex-event</finalName>
    <defaultGoal>spring-boot:run</defaultGoal>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <configuration>
                <executable>true</executable>
            </configuration>
        </plugin>

        <!--
            Take care of synchronizing java dependencies and imports in
            package.json and main.js files.
            It also creates webpack.config.js if not exists yet.
        -->
        <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>${vaadin.version}</version>
            <executions>
                <execution>
                    <goals>
                        <goal>prepare-frontend</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

<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>
            </dependency>
        </dependencies>

        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <configuration>
                        <jvmArguments>-Dvaadin.productionMode</jvmArguments>
                    </configuration>
                </plugin>
                <plugin>
                    <groupId>com.vaadin</groupId>
                    <artifactId>vaadin-maven-plugin</artifactId>
                    <executions>
                        <execution>
                            <goals>
                                <!--<goal>prepare-frontend</goal>-->
                                <goal>build-frontend</goal>
                            </goals>
                            <phase>compile</phase>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>
    </profile>

    <profile>
        <id>integration-tests</id>
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <executions>
                        <execution>
                            <id>start-spring-boot</id>
                            <phase>pre-integration-test</phase>
                            <goals>
                                <goal>start</goal>
                            </goals>
                        </execution>
                        <execution>
                            <id>stop-spring-boot</id>
                            <phase>post-integration-test</phase>
                            <goals>
                                <goal>stop</goal>
                            </goals>
                        </execution>
                    </executions>
                </plugin>

                <!-- Runs the integration tests (*IT) after the server is started -->
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-failsafe-plugin</artifactId>
                    <executions>
                        <execution>
                            <goals>
                                <goal>integration-test</goal>
                                <goal>verify</goal>
                            </goals>
                        </execution>
                    </executions>
                    <configuration>
                        <trimStackTrace>false</trimStackTrace>
                        <enableAssertions>true</enableAssertions>
                        <systemPropertyVariables>
                            <!-- Pass location of downloaded webdrivers to the tests -->
                            <webdriver.chrome.driver>${webdriver.chrome.driver}</webdriver.chrome.driver>
                        </systemPropertyVariables>
                    </configuration>
                </plugin>

                <plugin>
                    <groupId>com.lazerycode.selenium</groupId>
                    <artifactId>driver-binary-downloader-maven-plugin</artifactId>
                    <version>1.0.17</version>
                    <configuration>
                        <onlyGetDriversForHostOperatingSystem>true
                        </onlyGetDriversForHostOperatingSystem>
                        <rootStandaloneServerDirectory>
                            ${project.basedir}/drivers/driver
                        </rootStandaloneServerDirectory>
                        <downloadedZipFileDirectory>
                            ${project.basedir}/drivers/driver_zips
                        </downloadedZipFileDirectory>
                        <customRepositoryMap>
                            ${project.basedir}/drivers.xml
                        </customRepositoryMap>
                    </configuration>
                    <executions>
                        <execution>
                            <!-- use phase "none" to skip download step -->
                            <phase>${drivers.downloader.phase}</phase>
                            <goals>
                                <goal>selenium</goal>
                            </goals>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>
    </profile>

</profiles>

</project>

already tried running it using

java -jar -Dvaadin.productionMode=true my-jar.jar 

But still wont work. I already have run out of ideas and currently working for a covid case tracker app with the same problem. Please help guys.

Problem solved. it seems that you need to add the app-layout component while your application is loading rather than adding it after your logged in.

found it here.. https://github.com/appreciated/vaadin-app-layout/issues/306