Vaadin applications can run in two modes: development mode; or production mode.
Development mode is designed to make it easier to build applications. Changes you make to a project are detected automatically, refreshing the browser to display the new page and application. The amount of data sent to the browser, though, is not optimized to be small. Instead, it contains debugging information to make it easier to find the cause of any problems. It provides helpful debugging tools and information in the browser through the development tools window.
Whereas, Production mode sends as little data as possible to the end user’s browser. It optimizes the performance wherever possible. In this mode, no development tools are used, and debugging information is disabled.
Development Mode Methods
When using development mode, you have two choices or methods of how to utilize this mode: use a Pre-Compiled Front-End Bundle; or use a Front-End Development Server. The difference between these methods is in how the front-end files are handled.
When using a pre-compiled front-end bundle, the front-end files are collected and compiled into a bundle and are served to the browser similar to when in production mode. The difference is that debugging features are enabled.
Pre-Compiled Front-End Bundle for Faster Start-Up
The build and start-up time can be improved significantly if no front-end installation or compilation is made. This means not installing the tools Node.js, npm/pnpm. It also means not downloading npm packages, or running the Vite development server.
If your project uses only the standard Vaadin Flow components or third-party Vaadin add-ons (e.g., from Vaadin Directory) without client code, Vaadin skips front-end compilation and uses the default themes and front-end files shipped with the Vaadin platform.
Making a new front-end bundle takes time. However, the generated front-end files — located in the
src/main/dev-bundle directory, inside the project’s root — can be added to the Version Control System. This allows other developers to fetch the application bundle and thereby run it.
The application bundle is the same as the default bundle, but it’s made for a specific application. Vaadin defines two origins for the front-end development bundle: the "default" bundle updated and provided by the Vaadin platform in each release version; and the "application" bundle, which is made by locally running the project and taking into account the specific front-end customizations.
Vaadin generates an application bundle in the following situations:
An npm/pnpm package is added with
@NpmPackageor directly into
Vaadin add-on with front-end customizations is added;
Custom theme packaged as a
JARdependency is added, if it defines any assets to be added to the project; or
Exported web component is added.
Custom theme files are served separately from the front-end bundle. They can be modified on the fly; the browser live-reload will trigger refresh immediately — no re-compilation is needed.
When customizing an Application Theme in this mode, the following points should be taken into account:
Vaadin component styles are set up in
styles.cssor in the imported stylesheet file located in the theme directory, with the
assetsblock in the
theme.jsonfile to specify the external assets — fonts, images, or stylesheets — to be added to the application development bundle, so that they can be used in the application.
Loading CSS into the shadow DOM of Vaadin components by placing them in the theme’s
componentssub-folder is not currently supported.
This is the default mode.
Front-End Development Server for Easier Debugging
When working with a front-end-heavy project, there can be a front-end development server running for fast compilation and live-reload when the front-end files are changed.
Vite installation is made through npm/pnpm. Running Vite requires Node.js. See Node.js installation and Configuring front-end package manager for more information.
This mode is recommended if components or views use Templates and are edited often. Since Vaadin 24.0 this mode is used when the configuration parameter
frontend.hotdeploy is set to
true (see Configuration Properties for more information). For older Vaadin versions, this is a default and the only development mode.
From Pre-Compiled Bundle to Front-End Development Server
One of the following methods can be used to disable the pre-compiled front-end bundle, and use instead the front-end development server, depending on your project’s setup:
- Installing and using Node.js locally and in CI servers.
- Configuring the front-end package manager.
- Development Tools
- Boost productivity with the Vaadin Dev Tools, such as Component Locator, that are available when running applications in development mode.