Development Mode Overview
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. This mode provides many helpful debugging tools and information in the browser, through the development tools window.
Whereas, Production mode tries to send 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 debug 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
-
Run with 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.
When running with the front-end development server, JavaScript, CSS and other front-end files are served by it and given to the browser individually and as requested — instead of the Java server of the application on which it’s running.
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 and not downloading npm packages, nor 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.
Adding any custom JavaScript/TypeScript or add-ons with front-end customizations to the project triggers the front-end re-compilation using Vite during the next start-up of the application. Any new or missing front-end packages are downloaded using npm/pnpm before building. Vaadin does this automatically and is able to spot the front-end customizations.
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 it and thereby run the application bundle.
The application bundle is the same as the default bundle, but it’s made for the 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 intopackage.json; -
CSS or JavaScript is added with
@CssImport,@JsModuleor@JavaScript; -
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; -
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::part()selector. -
Use the
assetsblock in thetheme.jsonfile to specify the external assets — fonts, images, or stylesheets — to be added into the application development bundle, so that they can be used in the application.
This is the default mode.
Front-End Development Server For Easier Debugging
When working with a frontend-heavy project, there can be a front-end development server running for fast compilation and live-reload when the front-end files are changed.
Vaadin uses Vite to speed up front-end development by enabling the client-side live-reload. By doing this, JavaScript/TypeScript changes are immediately updated in the browser. Vite only re-compiles what has actually changed, making hot reloads fast.
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 one development mode.