# Building Apps

> How to build real-world business applications with Vaadin.

Parent index: [Vaadin Docs](https://vaadin.com/docs/v24/llms.txt)

## Overview

- [Building Apps](https://vaadin.com/docs/v24/building-apps.md): How to build real-world business applications with Vaadin.

## Views & Navigation

- [Views & Navigation](https://vaadin.com/docs/v24/building-apps/views.md): Learn how to build views and navigate between them in Vaadin applications.
- [Add a View](https://vaadin.com/docs/v24/building-apps/views/add-view.md): Learn how to add a view to a Vaadin application.
  - [Flow](https://vaadin.com/docs/v24/building-apps/views/add-view/flow.md): Learn about defining routes, naming conventions, using route aliases, and structuring views into Java packages. Includes a hands-on tutorial to apply key concepts.
  - [Hilla](https://vaadin.com/docs/v24/building-apps/views/add-view/hilla.md): Learn to create, name, and organize views in Hilla - routing conventions, directory structures, route aliases, and best practices for defining explicit routes.
- [Navigate to a View](https://vaadin.com/docs/v24/building-apps/views/navigate.md): Learn how to navigate between the views of a Vaadin application.
  - [Flow](https://vaadin.com/docs/v24/building-apps/views/navigate/flow.md): Learn how to navigate between views in Vaadin Flow using RouterLink and UI.navigate(), and improve code readability by encapsulating navigation logic.
  - [Hilla](https://vaadin.com/docs/v24/building-apps/views/navigate/hilla.md): Learn how to navigate between Hilla views in a Vaadin application.
- [Pass Data to a View](https://vaadin.com/docs/v24/building-apps/views/pass-data.md): Learn how to pass data between the views of a Vaadin application.
  - [Route Parameters](https://vaadin.com/docs/v24/building-apps/views/pass-data/route-parameters.md): Learn how to use route parameters in a Vaadin application.
    - [Flow](https://vaadin.com/docs/v24/building-apps/views/pass-data/route-parameters/flow.md): Learn how to use route parameters in Vaadin Flow to pass data between views, including required, optional, and wildcard parameters for flexible navigation.
    - [Hilla](https://vaadin.com/docs/v24/building-apps/views/pass-data/route-parameters/hilla.md): Learn to use route parameters in Hilla to pass data between views, including required, optional, and wildcard parameters, for dynamic and flexible navigation.
  - [Route Templates](https://vaadin.com/docs/v24/building-apps/views/pass-data/route-templates.md): Learn how to use route templates in Flow.
  - [Query Parameters](https://vaadin.com/docs/v24/building-apps/views/pass-data/query-parameters.md): Learn how to manage state with query parameters in a Vaadin application.
    - [Flow](https://vaadin.com/docs/v24/building-apps/views/pass-data/query-parameters/flow.md): Learn how to access, set, and dynamically update query parameters in Vaadin Flow to manage view state, filters, and sorting in your applications.
    - [Hilla](https://vaadin.com/docs/v24/building-apps/views/pass-data/query-parameters/hilla.md): Learn how to use query parameters in Hilla to manage view state, handle search and filtering, and enhance navigation in Hilla applications.
- [Add a Router Layout](https://vaadin.com/docs/v24/building-apps/views/add-router-layout.md): Learn how to add a router layout to a Vaadin application.
  - [Flow](https://vaadin.com/docs/v24/building-apps/views/add-router-layout/flow.md): Learn to create and apply router layouts in Vaadin Flow, including automatic and explicit layouts, nested layouts, and route prefixes for structured navigation.
  - [Hilla](https://vaadin.com/docs/v24/building-apps/views/add-router-layout/hilla.md): Learn how to create and customize router layouts in Hilla applications, including main layouts and nested layouts.

## Forms & Data

- [Forms & Data](https://vaadin.com/docs/v24/building-apps/forms-data.md): Learn how to create forms and manage data in Vaadin applications.
- [Add a Form](https://vaadin.com/docs/v24/building-apps/forms-data/add-form.md): Learn how to add a form to a Vaadin application.
  - [Fields & Binding](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/fields-and-binding.md): Learn how to compose field components into forms and bind them to Form Data Objects.
    - [Flow](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/fields-and-binding/flow.md): Learn how to create and bind form fields in Vaadin using UI components and the Binder API with JavaBeans and records for data synchronization.
    - [Hilla](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/fields-and-binding/hilla.md): Learn how to build forms in Vaadin Hilla using layout components, input fields, and the useForm hook to bind data with Java-based FDOs.
  - [Form Validation](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/validation.md): Learn how to validate a form in a Vaadin application.
    - [Flow](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/validation/flow.md): Learn how to validate forms and handle validation errors in Vaadin Flow using validators and converters.
    - [Hilla](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/validation/hilla.md): Learn how to validate forms in Vaadin Hilla using built-in and custom validators, the useFormPart hook, and client-side validation best practices.
  - [Loading & Saving](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/loading-and-saving.md): Learn how to load and save a form in a Vaadin application.
    - [Flow](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/loading-and-saving/flow.md): Learn how to load and save forms in Vaadin Flow using either in-memory selection or service-based fetching, and handle both single or split save operations.
    - [Hilla](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/loading-and-saving/hilla.md): Learn how to load and save forms in Vaadin Hilla using either selection or service-based fetching, and handle both single or split save operations.
  - [Dialogs & Drawers](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/dialogs-and-drawers.md): Learn how to show forms in dialogs and drawers.
    - [Flow](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/dialogs-and-drawers/flow.md): Learn how to reuse a form component for both creating and editing items in Vaadin Flow.
    - [Hilla](https://vaadin.com/docs/v24/building-apps/forms-data/add-form/dialogs-and-drawers/hilla.md): Learn how to reuse a form component for both creating and editing items in Vaadin Hilla.
- [Add a Custom Field](https://vaadin.com/docs/v24/building-apps/forms-data/create-custom-field.md): Learn how to create a Custom Field in Vaadin Flow.
- [Add Flyway](https://vaadin.com/docs/v24/building-apps/forms-data/add-flyway.md): Learn how to manage your relational database schema with Flyway.
- [Replace H2](https://vaadin.com/docs/v24/building-apps/forms-data/replace-h2.md): Learn how to replace the H2 database with PostgreSQL.

## Business Logic

- [Business Logic](https://vaadin.com/docs/v24/building-apps/business-logic.md): Learn how to add business logic to a Vaadin application.
- [Add a Service](https://vaadin.com/docs/v24/building-apps/business-logic/add-service.md): Learn how to add an application service to a Vaadin application.
  - [Flow](https://vaadin.com/docs/v24/building-apps/business-logic/add-service/flow.md): Learn how to inject and call application services in Vaadin Flow views. This guide covers constructor injection, service calls on navigation, best practices, and handling lifecycle events.
  - [Hilla](https://vaadin.com/docs/v24/building-apps/business-logic/add-service/hilla.md): Learn how to make Java services browser-callable and call them from Hilla views. This guide covers service annotations, TypeScript client generation, type safety, and best practices.

## Security

- [Security](https://vaadin.com/docs/v24/building-apps/security.md): Learn how to secure Vaadin applications using both Flow and Hilla.
- [Add Login](https://vaadin.com/docs/v24/building-apps/security/add-login.md): Learn how to add user login to a Vaadin application using Spring Security.
  - [Flow](https://vaadin.com/docs/v24/building-apps/security/add-login/flow.md): Learn to create a secure login view in Vaadin Flow using Spring Security. This guide covers authentication setup, in-memory authentication, and best practices.
  - [Hilla](https://vaadin.com/docs/v24/building-apps/security/add-login/hilla.md): Learn how to create a secure login view using Hilla and React in Vaadin. This guide covers Spring Security integration, authentication setup, and best practices.
- [Add Logout](https://vaadin.com/docs/v24/building-apps/security/add-logout.md): Learn how to securely logout users from a Vaadin application using Spring Security.
  - [Flow](https://vaadin.com/docs/v24/building-apps/security/add-logout/flow.md): Learn to implement logout functionality in a Flow application using AuthenticationContext. This guide covers logout, custom redirects and best practices.
  - [Hilla](https://vaadin.com/docs/v24/building-apps/security/add-logout/hilla.md): Learn to implement logout functionality with Hilla views using the useAuth hook. This guide covers logout handling, redirect, and best practices.
- [Protect Views](https://vaadin.com/docs/v24/building-apps/security/protect-views.md): Learn how to protect views in a Vaadin application based on user roles.
  - [Flow](https://vaadin.com/docs/v24/building-apps/security/protect-views/flow.md): Learn how to protect Vaadin Flow views using declarative and programmatic security. This guide covers role-based access control, custom navigation access checkers, and best practices.
  - [Hilla](https://vaadin.com/docs/v24/building-apps/security/protect-views/hilla.md): Learn how to control access to Hilla views using authentication and role-based security. This guide covers client-side access control, user roles, and best practices for securing views.
- [Protect Services](https://vaadin.com/docs/v24/building-apps/security/protect-services.md): Learn how to protect services in a Vaadin application based on user roles.
  - [Flow](https://vaadin.com/docs/v24/building-apps/security/protect-services/flow.md): Protect Flow services using Spring method security. This guide covers enabling method security, securing service methods, and best practices for access control.
  - [Hilla](https://vaadin.com/docs/v24/building-apps/security/protect-services/hilla.md): Secure browser-callable services in Hilla with this guide - authentication, authorization, and best practices for protecting services.

## AI & LLMs

- [AI & LLMs](https://vaadin.com/docs/v24/building-apps/ai.md): Leverage AI in your Vaadin applications with practical use cases and setup options that fit your project.
- [Technical Setup](https://vaadin.com/docs/v24/building-apps/ai/technical-setup.md): Configure API keys and IDE settings so your Vaadin application can connect to hosted or local LLMs.
  - [API Key for your IDE](https://vaadin.com/docs/v24/building-apps/ai/technical-setup/ide.md): instructions how to setup the API License Key in your IDE
    - [IntelliJ IDEA](https://vaadin.com/docs/v24/building-apps/ai/technical-setup/ide/intellij.md): Learn how to configure environment variables and API keys in IntelliJ IDEA so your Vaadin application can access AI and LLM services.
    - [Visual Studio Code](https://vaadin.com/docs/v24/building-apps/ai/technical-setup/ide/vscode.md): Configure environment variables or use a .env file in Visual Studio Code to provide API keys for your Vaadin project.
    - [Eclipse IDE](https://vaadin.com/docs/v24/building-apps/ai/technical-setup/ide/eclipse.md): Configure environment variables or VM arguments in Eclipse IDE to provide API keys for your Vaadin project.
- [Quick Start-Guide](https://vaadin.com/docs/v24/building-apps/ai/quickstart-guide.md): A compact chat view with streaming, correct scrolling, and message context.

## MCP Server

- [MCP Server](https://vaadin.com/docs/v24/building-apps/mcp.md): Learn how to integrate AI assistants with Vaadin documentation using the Model Context Protocol.
- [Setup Guide](https://vaadin.com/docs/v24/building-apps/mcp/supported-tools.md): Configure your AI development tool to use the Vaadin MCP server for enhanced Vaadin documentation access
  - [Claude Code](https://vaadin.com/docs/v24/building-apps/mcp/supported-tools/claude-code.md): Learn how to configure Claude Code to access Vaadin documentation through the Model Context Protocol server
  - [Cursor](https://vaadin.com/docs/v24/building-apps/mcp/supported-tools/cursor.md): Learn how to configure Cursor editor to access Vaadin documentation through the Model Context Protocol server
  - [Windsurf](https://vaadin.com/docs/v24/building-apps/mcp/supported-tools/windsurf.md): Learn how to configure Windsurf IDE to access Vaadin documentation through the Model Context Protocol server
  - [Junie](https://vaadin.com/docs/v24/building-apps/mcp/supported-tools/junie.md): Learn how to configure JetBrains Junie AI assistant to access Vaadin documentation through the Model Context Protocol server
  - [GitHub Copilot](https://vaadin.com/docs/v24/building-apps/mcp/supported-tools/github-copilot.md): Learn how to configure GitHub Copilot in VS Code and JetBrains IDEs to access Vaadin documentation through the Model Context Protocol server
  - [Codex](https://vaadin.com/docs/v24/building-apps/mcp/supported-tools/codex.md): Learn how to configure OpenAI Codex to access Vaadin documentation through the Model Context Protocol server
  - [Gemini CLI](https://vaadin.com/docs/v24/building-apps/mcp/supported-tools/gemini-cli.md): Learn how to configure Google Gemini CLI to access Vaadin documentation through the Model Context Protocol server
  - [Other Tools](https://vaadin.com/docs/v24/building-apps/mcp/supported-tools/other-tools.md): General instructions for configuring any MCP-compatible tool to access Vaadin documentation

## Deep Dives

- [Deep Dives](https://vaadin.com/docs/v24/building-apps/deep-dives.md): In-depth explorations of Vaadin's best practices, architecture, and advanced techniques for building scalable and maintainable business applications.
- [Spring Boot](https://vaadin.com/docs/v24/building-apps/deep-dives/spring-boot.md): The role Spring Boot plays in Vaadin applications.
- [Architecture](https://vaadin.com/docs/v24/building-apps/deep-dives/architecture.md): Learn how to architect business applications with Vaadin.
  - [Design](https://vaadin.com/docs/v24/building-apps/deep-dives/architecture/design.md): Explains how to use the C4 model to design architecture.
  - [System Components](https://vaadin.com/docs/v24/building-apps/deep-dives/architecture/components.md): Learn more about System Components and how to turn them into Java code.
  - [Conceptual Layers](https://vaadin.com/docs/v24/building-apps/deep-dives/architecture/layers.md): Introduces the presentation layer and the application layer in Vaadin apps.
  - [Monoliths](https://vaadin.com/docs/v24/building-apps/deep-dives/architecture/monoliths.md): Essential concepts, as well as advantages and disadvantages of developing and using monolithic applications.
  - [Microservices](https://vaadin.com/docs/v24/building-apps/deep-dives/architecture/microservices.md): How Vaadin fits into microservice-based systems.
- [Project Structure](https://vaadin.com/docs/v24/building-apps/deep-dives/project-structure.md): The basics of structuring and packaging Vaadin projects.
  - [Single-module Projects](https://vaadin.com/docs/v24/building-apps/deep-dives/project-structure/single-module.md): How and when to use single-module projects for Vaadin applications.
  - [Multi-module Projects](https://vaadin.com/docs/v24/building-apps/deep-dives/project-structure/multi-module.md): How and when to use multi-module projects for Vaadin applications.
- [Presentation Layer](https://vaadin.com/docs/v24/building-apps/deep-dives/presentation-layer.md): How to build the presentation layer of Vaadin applications.
  - [Server Push](https://vaadin.com/docs/v24/building-apps/deep-dives/presentation-layer/server-push.md): How to use server push in your user interfaces.
    - [Pushing](https://vaadin.com/docs/v24/building-apps/deep-dives/presentation-layer/server-push/updates.md): How to push updates to a Vaadin Flow user interface.
    - [Threads](https://vaadin.com/docs/v24/building-apps/deep-dives/presentation-layer/server-push/threads.md): How to use threads in a Vaadin Flow user interface.
    - [Callbacks](https://vaadin.com/docs/v24/building-apps/deep-dives/presentation-layer/server-push/callbacks.md): How to use server push with callbacks.
    - [Futures](https://vaadin.com/docs/v24/building-apps/deep-dives/presentation-layer/server-push/futures.md): How to use server push with CompletableFuture.
    - [Hilla Services](https://vaadin.com/docs/v24/building-apps/deep-dives/presentation-layer/server-push/reactive-browser-callable-services.md): How to create reactive browser callable services for a Vaadin Hilla user interface.
    - [Consuming Reactive Streams](https://vaadin.com/docs/v24/building-apps/deep-dives/presentation-layer/server-push/reactive.md): How to use server push with reactive streams.
- [Application Layer](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer.md): How to build the application layer of Vaadin applications.
  - [Application Services](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/application-services.md): How to design application services.
  - [Background Jobs](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/background-jobs.md): How to handle background jobs.
    - [Implementing Jobs](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/background-jobs/jobs.md): How to implement background jobs.
    - [Triggering Jobs](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/background-jobs/triggers.md): How to trigger background jobs.
    - [UI Interaction](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/background-jobs/interaction.md): How to interact with jobs from the user interface.
      - [Callbacks](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/background-jobs/interaction/callbacks.md): How to use callbacks to interact with the user interface.
      - [Futures](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/background-jobs/interaction/futures.md): How to use CompletableFuture to interact with the user interface.
      - [Producing Reactive Streams](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/background-jobs/interaction/reactive.md): How to use reactive streams to interact with the user interface.
  - [Data Consistency](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/consistency.md): How to ensure data consistency in your applications.
    - [Strong Consistency](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/consistency/strong.md): Learn about strong consistency and how to achieve it.
    - [Transactions](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/consistency/transactions.md): Learn about ACID transactions and how to use them in Vaadin applications.
      - [Declarative Transactions](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/consistency/transactions/declarative.md): How to manage transactions declaratively in Vaadin applications.
      - [Programmatic Transactions](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/consistency/transactions/programmatic.md): How to manage transactions programmatically in Vaadin applications.
    - [Validation](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/consistency/validation.md): Learn how to validate your data.
    - [Optimistic Locking](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/consistency/optimistic-locking.md): Learn about optimistic locking and when to use it.
    - [Pessimistic Locking](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/consistency/pessimistic-locking.md): Learn about pessimistic locking and when to use it.
    - [Eventual Consistency](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/consistency/eventual.md): Learn about eventual consistency and how to achieve it.
  - [Domain Primitives](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/domain-primitives.md): Learn what domain primitives are and how to use them in applications.
  - [Persistence](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/persistence.md): How do handle persistence in Vaadin applications.
    - [Repositories](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/persistence/repositories.md): How to use repositories to store and fetch data.
      - [JPA Repositories](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/persistence/repositories/jpa.md): How to implement repositories with JPA and Spring Data.
      - [jOOQ Repositories](https://vaadin.com/docs/v24/building-apps/deep-dives/application-layer/persistence/repositories/jooq.md): How to implement repositories with jOOQ.

## Cookbook

- [Cookbook](https://vaadin.com/docs/v24/building-apps/cookbook.md): Code snippets for common tasks