Spring Boot Project to Vaadin App - Software Development at Program Tom LTD

To transform a plain Spring Boot project into a basic Vaadin “Hello World” app, you’ll need to add Vaadin dependencies, configure the build for frontend resources, update your main application class, and create a simple Vaadin route (view). This assumes a Maven-based project using Spring Boot 3.x (Vaadin 24+ requires it) and Java 17+. If your project uses older versions, upgrade first.

1. Update `pom.xml` for Dependencies and Build Plugin

Add the Vaadin BOM (Bill of Materials) for version management, the Spring Boot starter for Vaadin integration, and the Maven plugin to handle frontend builds (e.g., compiling JavaScript/CSS).

<properties>
    <vaadin.version>24.4.0</vaadin.version> <!-- Use the latest stable version -->
    <java.version>17</java.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-spring-boot-starter</artifactId>
    </dependency>
</dependencies>

<build>
    <plugins>
        <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>

Why? The starter handles auto-configuration, including servlet setup. The plugin prepares Vaadin’s frontend assets.

2. Configure the Main Application Class

Update your @SpringBootApplication class to implement AppShellConfigurator (required for Vaadin 23+ to manage themes and PWA settings). Add @EnableVaadin if not auto-detected. Create a basic theme folder for completeness (optional for hello world, but recommended).

Create directory: src/main/resources/META-INF/resources/frontend/themes/my-theme/ (replace my-theme with your theme name).
Add a simple styles.css in that folder: body { margin: 0; } (minimal).

package com.example; // Your package

import com.vaadin.flow.component.page.AppShellConfigurator;
import com.vaadin.flow.theme.Theme;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

@SpringBootApplication
@Theme("my-theme") // Matches the theme folder name
public class MyApplication extends SpringBootServletInitializer implements AppShellConfigurator {

    public static void main(String[] args) {
        SpringApplication.run(MyApplication.class, args);
    }
}

Why? This enables Vaadin’s theme system and integrates it with Spring Boot’s servlet context.

3. Create a Simple “Hello World” Vaadin Route (View)

Add a new Java class for the UI. Annotate it with @Route("") to map it to the root URL (/). Extend VerticalLayout and add a basic component like an H1 header.

package com.example.views; // Your package

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.component.html.H1;

@Route("") // Maps to root path: http://localhost:8080/
public class MainView extends VerticalLayout {

    public MainView() {
        setSpacing(false); // Optional: Remove default spacing

        H1 title = new H1("Hello World from Vaadin + Spring Boot!");
        title.getElement().getThemeList().add("dark"); // Optional: Apply dark theme to header

        add(title);
    }
}

Why? Vaadin routes are Spring-managed components. This renders a simple page with the greeting. Access it at http://localhost:8080/ after starting the app.

4. Prepare and Run the Project

Run mvn clean vaadin:prepare-frontend (or mvn vaadin:prepare-frontend if already clean) to build frontend resources.
Start the app: mvn spring-boot:run (or via your IDE).
Open http://localhost:8080/ in a browser. You should see the “Hello World” header. Logs will confirm Vaadin dev mode and Vite server startup.

Troubleshooting Tips

Version Mismatch: Vaadin 24+ needs Spring Boot 3.x and Jakarta EE (not javax). Update servlet/JPA deps if needed (e.g., jakarta.servlet-api:6.0.0).
White Label Error: Ensure the plugin is in <plugins> (not <dependencies>), theme folder exists, and @Route class is scanned (same package or subpackage as main class).
Production Build: Use mvn clean package -Pproduction for optimized builds.

Why use Vaadin

Vaadin brings unmatched productivity to Java Developers. With any other framework or technology – you need to dive deep into JavaScript, CSS, the HTTP Layer. Here – everything is Java code and all the boilerplate and communication is abstracted away. This is way – it was the framework of choice for several of my apps – packaged on my site https://programtom.com/dev/product-category/technologies/spring-boot-framework/?orderby=date-desc. If you’d like (or have the requirements – it allows easily integrate popular CSS (and JavaScript frameworks – https://github.com/tomavelev/java_bootstrap_vaadin_components

1. Update pom.xml for Dependencies and Build Plugin