Vaadin Spring Boot webapp returns failed to load resource on Dev mode

Viewed 80

I am new to using Vaadin. I am use to having frontend on a separate app. But just this time, i am trying out Vaadin.

Right now, i am following some simple guides and tutorial. I have this view

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route(value = "user")
public class UserView extends VerticalLayout {
    public UserView() {
        add(new Button("Click Me!"));
    }
}

But i can't seem to make it work.

Run it via Eclipse's Run Spring Boot App

But all i get in the browser is this

enter image description here

This is my logs on startup

2022-07-30 23:01:22.276  INFO 18764 --- [  restartedMain] org.atmosphere.cpr.AtmosphereFramework   : Atmosphere Framework 2.7.3.slf4jvaadin4 started.
2022-07-30 23:01:22.279  INFO 18764 --- [  restartedMain] org.atmosphere.cpr.AtmosphereFramework   : Installed AtmosphereInterceptor  Track Message Size Interceptor using | with priority BEFORE_DEFAULT 
2022-07-30 23:01:22.316  INFO 18764 --- [  restartedMain] c.v.f.s.DefaultDeploymentConfiguration   : 
Vaadin is running in DEVELOPMENT mode - do not use for production deployments.
2022-07-30 23:01:22.357  INFO 18764 --- [  restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2022-07-30 23:01:22.366  INFO 18764 --- [  restartedMain] ph.expense.tracker.TrackerApplication    : Started TrackerApplication in 8.172 seconds (JVM running for 9.05)
2022-07-30 23:01:25.811  INFO 18764 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : [webpack-dev-server] Project is running at:
2022-07-30 23:01:25.812  INFO 18764 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : [webpack-dev-server] Loopback: http://localhost:59281/
2022-07-30 23:01:25.812  INFO 18764 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : [webpack-dev-server] On Your Network (IPv4): http://192.168.1.200:59281/
2022-07-30 23:01:25.812  INFO 18764 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : [webpack-dev-server] Content not from webpack is served from 'D:\Development\git\expense-tracker\target\classes\META-INF\VAADIN\webapp, D:\Development\git\expense-tracker\src\main\webapp' directory
2022-07-30 23:01:28.353  INFO 18764 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : [build-status] : Compiled.
[38;5;35m
----------------- Frontend compiled successfully. -----------------

[0m2022-07-30 23:01:28.356  INFO 18764 --- [nPool-worker-19] c.v.b.devserver.AbstractDevServerRunner  : Started Webpack. Time: 7732ms
2022-07-30 23:01:28.440  INFO 18764 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : Issues checking in progress...
2022-07-30 23:01:28.597  INFO 18764 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : No issues found.

Here is my pom.xml

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>testing</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Test Demo Vaadin</description>
    <properties>
        <java.version>17</java.version>
        <vaadin.version>23.1.2</vaadin.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.modelmapper</groupId>
            <artifactId>modelmapper</artifactId>
            <version>3.0.0</version>
        </dependency>
        <dependency>
            <groupId>javax.validation</groupId>
            <artifactId>validation-api</artifactId>
        </dependency>
    </dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <version>${vaadin.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <profiles>
        <profile>
            <id>production</id>
            <build>
                <plugins>
                    <plugin>
                        <groupId>com.vaadin</groupId>
                        <artifactId>vaadin-maven-plugin</artifactId>
                        <version>${vaadin.version}</version>
                        <executions>
                            <execution>
                                <id>frontend</id>
                                <phase>compile</phase>
                                <goals>
                                    <goal>prepare-frontend</goal>
                                    <goal>build-frontend</goal>
                                </goals>
                                <configuration>
                                    <productionMode>true</productionMode>
                                </configuration>
                            </execution>
                        </executions>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>

</project>

Anyone knows whats lacking on my code?

EDIT - 1

Eclipse: 2020-12 (4.18.0)

MSEdge: Version 103.0.1264.77

EDIT - 2

Tried with Firefox, multiple scrollbars disappears but connection lost is still there but there are some 404 on faveicon, i think this is not an issue

enter image description here

1 Answers

Solved the problem.

Its a bit of an oversight. I have actually an @Controller declared somewhere and its conflicting the with @Route.

Removed the @Controller bean and it worked!.

So for everyone, make sure there are no routing configured other than @Route of Vaadin.

Related