Live Reload
In Vaadin projects, live reload is supported out of the box for front-end code changes, and for Java changes in Spring Boot projects. For the latter, it also integrates with popular third-party Java hotpatching tools.
Front-End Changes
As of Vaadin 23.2, the front-end build and live-reload features are handled by Vite by default. However, webpack is still supported by enabling its associated feature flag. See the webpack Feature Flag section for how to do this. Support for webpack ends with the next major release — with Vaadin 24.
Code in the application’s frontend folder (JS/TS/CSS files) is monitored by vite-dev-server when running the application in development mode.
Adding, modifying, or removing a file in this folder triggers recompilation of the front-end bundle and a browser reload.
Java Changes
On the Java side, live reload means first compiling the modified code, then updating the running server — either by restarting it or by hotpatching the runtime — and then refreshing the browser. Live reload can use Spring Boot Developer Tools' automatic server restart feature. This is enabled by default in Spring Boot-based Vaadin applications. It can also use two hotpatching tools: JRebel and HotswapAgent. JRebel is a commercial product that may be used for all Vaadin applications. HotswapAgent is open source, and also may be used for all Vaadin applications. See the following sections for details on setting up the chosen technology:
To avoid interference, only one of these technologies should be configured in a project at a time. In general, hotpatching is faster than automatic restarts. It works best for small, incremental changes. For larger changes, such as class level modifications or changes to code that affect the whole application lifecycle (e.g., startup, shutdown, mapping between front-end and back-end components), they require a server restart in any case.
Automatic Server Restart
As an alternative to live reload, the Jetty and TomEE Maven plugins handle automatic server restart on Java changes. These don’t require installing third-party tools, but server restarts are slower and the browser doesn’t refresh automatically.
webpack Feature Flag
To use webpack for front-end builds, you must enable it with the webpackForFrontendBuild feature flag.
See Feature Flags for more information.