Do you have a Spring project you'd like to enhance with a user interface? Or perhaps you're considering an alternative to your existing frontend solution? With Vaadin, you can seamlessly integrate UI and backend development in Java and evolve your project into a full-stack application. In this post, I'll show you how to get started by embedding Vaadin into your existing Spring project and step-by-step creating a view that utilizes your existing services.
For this article, I'll consider two scenarios: a typical Java application with Spring and a Spring web application with Thymeleaf. For my demo, I used the spring-rest-petclinic (without any app-specific UI except Swagger for visualizing REST interfaces) and the spring-petclinic, which uses Thymeleaf as its frontend technology.
Example 1: Integrating Vaadin into a Spring application
This project serves as a backend for any frontend technology. It provides database access operations, corresponding services for business logic, and REST interfaces for external access. If you want to add Vaadin to this module (for example, to display data or initiate certain processes at runtime), follow these steps:
1. Check application compatibility
Verify that the application configurations are compatible with the Vaadin version you intend to use. For example:
- Vaadin 24 is compatible with Java 17.
2. Add Vaadin configuration to pom.xml
Add necessary configurations to the pom.xml
- Add a property for managing the Vaadin version:
```unset
<properties>
<vaadin.version>24.6.1</vaadin.version>
</properties>
``` - Ensure
spring-boot-starter-parentis set as the parent in yourpom.xml:
```unset
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.4.1</version>
<relativePath />
</parent>
``` - Include the required Vaadin dependencies:
```unset
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin</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>
</dependency>
</dependencies>
``` - Add the Vaadin Maven plugin:
```unset
<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>
``` - Add a Maven profile for production builds:
```unset
<profiles>
<profile>
<id>production</id>
<build>
<plugins>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<configuration>
<productionMode>true</productionMode>
</configuration>
</plugin>
</plugins>
</build>
</profile>
</profiles>
```
3. Handle project-specific configurations
Exclude Swagger-UI requests
Swagger UI is used to document REST interfaces. To avoid collisions with Vaadin requests, exclude Swagger-UI paths:
```unset
vaadin.excludeUrls=/swagger-ui/**
```
Redirect Swagger-UI requests
Ensure Swagger-UI remains functional by adding a mapping in the controller:
```java
@RequestMapping(value = "/swagger-ui")
public void redirectToSwagger(HttpServletResponse response) throws IOException {
response.sendRedirect(this.servletContextPath + "/swagger-ui/index.html");
}
```
4. Create a Vaadin view
Create a new package, org.springframework.samples.petclinic.ui, and implement a Vaadin view:
```java
@Route("")
@RouteAlias("vets")
public class VetView extends VerticalLayout {
public VetView(VetRepository vetRepository) {
var grid = new Grid<>(Vet.class);
grid.setItems(vetRepository.findAll());
grid.setColumns("firstName", "lastName", "specialties");
grid.setSizeFull();
add(grid);
setSizeFull();
}
}
```
5. Final steps
Ensure the pom.xml is configured to use JAR packaging:
```unset
<packaging>jar</packaging>
```
You can then run the application with Maven by starting it using:
```unset
mvn spring-boot:run
```
Access the application in your browser at http://localhost:8080.
The complete example repository is available on GitHub: https://github.com/SebastianKuehnau/spring-petclinic-rest-with-vaadin
Example 2: Integrating Vaadin into a Spring web application
This example uses Thymeleaf as its frontend technology. The integration steps are similar to those in the previous example. However, there are a few differences:
- Swagger-UI is not used, so no exclusions are necessary.
- The Thymeleaf welcome page mapped to the root URI (
/) must be updated. Change its mapping to/welcome:
```java
@Controller
class WelcomeController {
@GetMapping("/welcome")
public String welcome() {
return "welcome";
}
}
```
The updated example repository is available on Github: https://github.com/SebastianKuehnau/spring-petclinic-with-vaadin
Final thoughts
Integrating Vaadin into existing Spring projects is straightforward. While you must account for project-specific requirements, such as handling existing routes or external tools like Swagger, the steps to include Vaadin are clear and manageable.
Once integrated, you can create modern UIs that not only make your application accessible to a wider audience but also simplify the operation of certain use cases. By bridging the gap between backend and frontend seamlessly, Vaadin empowers you to take your applications to the next level.
New to Vaadin? Try it out by creating a new project at start.vaadin.com.