Development Mode

Vaadin Development Mode makes application development faster by enabling easier debugging with a live-reload, front-end development server, and helpful debugging tools.

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.

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. 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.

Adding any custom JavaScript/TypeScript or add-ons with frontend customizations to the project can trigger the frontend re-compilation using Vite during the next start-up of the application. Any new or missing frontend 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 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 @NpmPackage or directly into package.json;
CSS or JavaScript is added with @CssImport, @JsModule or @JavaScript;
Vaadin add-on with front-end customizations is added;
Custom theme packaged as a JAR dependency 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.css or in the imported stylesheet file located in the theme directory, with the ::part() selector.
Use the assets block in the theme.json file 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 components sub-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.

Vaadin uses Vite to quicken front-end development by enabling the client-side live reload. By doing this, JavaScript/TypeScript changes are updated immediately in the browser. Vite only re-compiles what has 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 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:

vaadin.frontend.hotdeploy=true

Topics

Node.js: Installing and using Node.js locally and in CI servers.
npm/pnpm: 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.

Documentation