Vaadin Flow supports live reload features out of the box. This enables developers to view their changes in the browser without manually restarting the server and refreshing the browser after each change in the code. In this blog post, I'll show you how to enable automatic browser reloads for your Vaadin project when making changes to the Java backend.
Live reload for frontend files
Your application will automatically live reload when you make changes to the frontend files in development mode.
Code located in JavaScript, TypeScript or CSS files in the frontend folder is actively monitored by Vaadin when you run your application in development mode. Modifying, adding or removing a file in the frontend folder automatically triggers recompilation of the frontend bundle, after which the browser reloads.
Live reload for Java code
To enable live reloads for changes in the Java code base, you need to compile the modified code and update the server, either by restarting or hot-swapping classes before refreshing the browser.
There are three options for live reload when making changes to a Vaadin Flow application:
- Spring Boot Developer Tools (open-source, enabled by default if you create a project via start.vaadin.com, for Spring Boot-based applications only)
- JRebel (commercial, for all applications)
- HotswapAgent (open-source, for all applications)
Spring Boot Developer Tools have an automatic optimized server restart feature that’s enabled by default for Spring Boot-based Vaadin applications. If you run another technology stack, or wish to further optimize the setup in your Spring Boot application, you can hot-swap classes on your development server with the JRebel and HotswapAgent tools.
Live Reload with Spring Boot Developer Tools
The Spring Boot Developer Tools are a set of development-time tools for a smoother developer experience. The spring-boot-devtools module comes pre-installed by default when generating a Spring Boot-based Vaadin Flow application from start.vaadin.com.
Run your application using mvn spring-boot:run via the Application class and open it in your browser. The server will restart and refresh your browser when you make changes to the Java code and recompile.
You can also install it manually by including it as a dependency in your pom.xml:
<dependencies>
...
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
</dependencies>
Make sure to disable any other live reload browser extensions, because they may conflict.
Live Reload with JRebel
JRebel is a commercial developer productivity tool for automatic, real-time update of Java code in a running application.
You can set up and activate JRebel by following their Quick Start guide for your IDE of choice. Always use the latest version to ensure it contains the built-in live reload integration.
After installing, run or debug your Vaadin application using the JRebel Agent by selecting the following icon from your IDE toolbar:
Vaadin detects the JRebel Agent and automatically reloads the application in the browser after the Java changes have been hotpatched.
HotswapAgent
HotswapAgent is a plugin system that ships preconfigured for all major frameworks. It enables special reloading mechanisms after class redefinition.
We recommend you to run your Vaadin application with the latest version of the TravaOpenJDK DCEVM, which includes HotswapAgent with full live reload support.
Start by downloading and unpacking the DCEVM JDK, add it to your IDE, and set your project / run configuration to use it. Then enable HotswapAgent with the -XX:HotswapAgent=fatjar JDK parameter.
Finally, start the Vaadin application in development mode with your IDE-specific debug command. The browser will update automatically when you edit a Java file and recompile.
All of these instructions can be found in more detail in the technical documentation.
Ready to get started? Download a Vaadin 23 project with Spring Boot Developer Tools and start coding with live reload!