Documentation versions (currently viewingVaadin 24)

Source Control

Track and manage changes to the source code in a Vaadin project.

In addition to the standard directory layout of typical Java applications, Vaadin projects also include various files and folders related to the front-end tooling. A typical Vaadin application has a directory layout with something like the following content:

frontend                 (1)
└── generated/
└── themes/              (2)
    └── my-theme         (3)
        └── styles.css   (4)
└── index.html           (5)
node_modules/            (6)
└── main                 (7)
    └── java
    └── resources
└── test/                (8)
package.json             (9)
package-lock.json        (10)
pom.xml                  (11)
vite.config.ts           (12)
vite.generated.ts        (13)
tsconfig.json            (14)
types.d.ts               (15)
  1. Front-end resources, including CSS, TypeScript, and JavaScript files, are placed under this folder.

  2. This folder includes custom themes.

  3. Each theme is in its own sub-folder. The name of this folder is provided as a parameter to the @Theme annotation to apply the theme to the application.

  4. styles.css is the theme’s master style sheet that’s automatically loaded when the theme is applied.

  5. index.html is an auto-generated file that defines the outermost structure of the application.

  6. A folder that caches the front-end modules that the project depends upon. This folder is auto-generated based on the contents of package.json and package-lock.json.

  7. Application sources.

  8. Test sources.

  9. package.json defines the version ranges of the front-end dependencies.

  10. package-lock.json defines the exact versions of the front-end dependencies used in this project.

  11. Project and configuration details used by Maven to build the project.

  12. Can optionally be used to customize Vite configuration.

  13. An auto-generated file containing the Vite configuration needed for all applications.

  14. An auto-generated file that defines the configuration for compiling TypeScript code in the project, when needed.

  15. An auto-generated file that defines the TypeScript type definitions used in the project.

Project content may vary

The directory layout shown here may vary depending on the project’s configuration. For example, a project using pnpm instead of npm has a pnpm-lock.yaml file instead of package-lock.json.

The following .gitignore file lists the files and folders that should be excluded from a typical Vaadin project.



# The following files are generated/updated by vaadin-maven-plugin or vaadin-gradle-plugin

# Browser drivers for local integration tests

# Error screenshots generated by TestBench for failed integration tests

# Eclipse and STS

# IntelliJ IDEA

# NetBeans

# VS Code

# Maven wrapper

# The following are auto-generated by Vaadin if missing, but they should be added to source control if customized.