Encodera

Thanks for reading!

Donate to the site — we work hard for you.

Contents

Creating a project

A Vaadin project is an ordinary Spring Boot project on Maven with the Vaadin libraries added. The application starts with one command: the embedded Tomcat server runs inside it, so there is nothing to install separately.

Where to get a project

There are two official generators:

  • start.vaadin.com — the Vaadin generator. Choose Flow, set the project name and click Download to get an archive with a ready project.
  • start.spring.io — the Spring generator. Choose Maven, Java 25 and add the Vaadin dependency.

Both give the same base as the official vaadin/skeleton-starter-flow-spring template on GitHub. Unpack the archive into a blog folder — the course shows the files of this project from here on.

pom.xml

The key parts of pom.xml are the Spring Boot parent, the Vaadin BOM (it sets the versions of all modules) and the frontend build plugin:

<!-- pom.xml (key parts) -->
<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>4.1.1</version>
</parent>
 
<groupId>com.example</groupId>
<artifactId>blog</artifactId>
<version>1.0-SNAPSHOT</version>
 
<properties>
    <java.version>25</java.version>
    <vaadin.version>25.3.0</vaadin.version>
</properties>
 
<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>
        <artifactId>vaadin-core</artifactId>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-spring-boot-starter</artifactId>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-dev</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>
 
<build>
    <defaultGoal>spring-boot:run</defaultGoal>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
        <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>${vaadin.version}</version>
            <executions>
                <execution>
                    <goals>
                        <goal>build-frontend</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

vaadin-core holds the free components. Generators sometimes write vaadin — the same components plus commercial ones (charts, reports) that need a license. vaadin-core is enough for this course. vaadin-dev turns on development mode and does not get into the final build.

Project structure

PathWhat is inside
pom.xmlDependencies and plugins
src/main/java/com/example/blog/Application.javaThe main class
src/main/java/com/example/blog/views/Screens (views)
src/main/resources/application.propertiesSettings
src/main/resources/META-INF/resources/styles.cssYour own styles
src/main/frontend/generated/Files Vaadin creates itself; do not edit them

The main class

// src/main/java/com/example/blog/Application.java
package com.example.blog;
 
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.page.AppShellConfigurator;
import com.vaadin.flow.theme.lumo.Lumo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
@SpringBootApplication
@StyleSheet(Lumo.STYLESHEET)
public class Application implements AppShellConfigurator {
 
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

@SpringBootApplication starts Spring. The AppShellConfigurator interface tells Vaadin that page-wide settings live in this class, and @StyleSheet(Lumo.STYLESHEET) loads Lumo, the standard theme.

Running

./mvnw

On Windows use mvnw.cmd. Thanks to defaultGoal this is the same as ./mvnw spring-boot:run. The end of the log shows:

Vaadin is running in DEVELOPMENT mode - do not use for production deployments.
... TomcatWebServer : Tomcat started on port 8080 (http) with context path '/'
... Application     : Started Application in 14.45 seconds
... DevModeHandlerManagerImpl : Application running at http://localhost:8080/

Open http://localhost:8080 in the browser. With no screens in the project yet, Vaadin reports that the route was not found — the first screen comes in the next lesson. While the server runs with devtools, it restarts by itself after classes are recompiled.

Common mistake

If port 8080 is taken by another program, startup fails:

Web server failed to start. Port 8080 was already in use.

Stop the other program or set the port in src/main/resources/application.properties: server.port=8081.

Thanks for reading!

Donate to the site — we work hard for you.