Source Control
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)
├── components/ (4)
└── styles.css (5)
└── index.html (6)
node_modules/ (7)
src/
└── main (8)
└── java
└── resources
└── test/ (9)
target/
package.json (10)
package-lock.json (11)
pom.xml (12)
vite.config.ts (13)
vite.generated.ts (14)
tsconfig.json (15)
types.d.ts (16)
-
Front-end resources, including CSS, TypeScript, and JavaScript files, are placed under this folder.
-
This folder includes custom themes.
-
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. -
The
components
sub-folder is for component style sheets that target the (local CSS) internals of Vaadin components. -
styles.css
is the theme’s master style sheet that’s automatically loaded when the theme is applied. -
index.html
is an auto-generated file that defines the outermost structure of the application. -
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
andpackage-lock.json
. -
Application sources.
-
Test sources.
-
package.json
defines the version ranges of the front-end dependencies. -
package-lock.json
defines the exact versions of the front-end dependencies used in this project. -
Project and configuration details used by Maven to build the project.
-
Can optionally be used to customize Vite configuration.
-
An auto-generated file containing the Vite configuration needed for all applications.
-
An auto-generated file that defines the configuration for compiling TypeScript code in the project, when needed.
-
An auto-generated file that defines the TypeScript type definitions used in the project.
Note
|
Project content may vary
The directory layout shown here may vary depending on the project’s configuration.
For example, a project using |
The following .gitignore
file lists the files and folders that should be excluded from a typical Vaadin project.
/target/
.gradle
build/
!**/src/main/**/target/
!**/src/test/**/target/
!**/src/main/**/build/
!**/src/test/**/build/
.DS_Store
# The following files are generated/updated by vaadin-maven-plugin or vaadin-gradle-plugin
node_modules/
frontend/generated/
pnpmfile.js
.npmrc
webpack.generated.js
vite.generated.ts
# Browser drivers for local integration tests
drivers/
# Error screenshots generated by TestBench for failed integration tests
error-screenshots/
# Eclipse and STS
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache
# IntelliJ IDEA
.idea
*.iws
*.iml
*.ipr
out/
!**/src/main/**/out/
!**/src/test/**/out/
# NetBeans
/nbproject/private/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/
# VS Code
.vscode/
# Maven wrapper
.mvn/
mvnw
# The following are auto-generated by Vaadin if missing, but they should be added to source control if customized.
tsconfig.json
types.d.ts
index.html
9E89021E-38BA-4ECE-9EA6-8B6AC2DB9C2B