Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion articles/flow/advanced/loading-resources.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ Imported dependency files of the same type load in the order they are defined in

The loading order of imported dependencies is only guaranteed for one file type, in one class. Specifically, loading order isn't guaranteed between classes: annotations on class `A` could be imported before or after annotations on class `B`.

Frontend resources bundled by Vite also have a type group ordering. JavaScript files loaded by the `@JsModule` annotation always come before JavaScript files loaded by `@JavaScript`, and both of those come before CSS files loaded by `@CssImport`. The exception to this rule is the `@JsModule` annotations of files annotated with `@Theme`. All JavaScript modules found on such classes are imported before other file types. This covers the `Lumo` theme, as well as custom themes created by the developer.
Frontend resources bundled by Vite also have a type group ordering. JavaScript files loaded by the `@JsModule` annotation always come before JavaScript files loaded by `@JavaScript`, and both of those come before CSS files loaded by `@CssImport`.

For example, you could have multiple imported dependencies of different file types in a single class, as follows:

Expand Down
6 changes: 4 additions & 2 deletions articles/flow/configuration/live-reload/index.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,11 @@ From a deployment and reloading point of view, there are two types of files in a
Hot deploy and live reload are only used during development. They are disabled in production builds.


== Frontend Changes
== Changes to Stylesheets and Other Frontend Resources

Vaadin Flow uses a pre-built frontend bundle by default. The only frontend files that are handled by the fast live reload feature are the theme files in the `frontend/themes/<themename>` folder. Changes to these files are automatically picked up and the browser is reloaded. Changes to any other files inside the `frontend` folder cause a new frontend bundle to be built, a process which might take several minutes.
Changes to stylesheets in the `src/main/resources/META-INF/resources/` folder are automatically hot-reloaded. Adding and removing other files in the folder trigger a page-reload.

In development mode, Vaadin Flow uses a pre-built frontend bundle by default. Changes to files in the `frontend` folder cause a new frontend bundle to be built, which might take several minutes. The exception to this are files in the `frontend/themes/<themename>` folder, used for styling in V24, which are updated automatically in the browser through a fast live reload.

To develop the frontend files actively, you can enable the hot deploy mode (see <<{articles}/flow/configuration/properties#,Configuration Properties>>). In this mode, all JavaScript, TypeScript, and CSS files inside the `frontend` folder are handled by the frontend build tool and bundler. Adding, modifying, or removing a file in this folder triggers a rebuild of the frontend resources and a browser reload.

Expand Down
47 changes: 22 additions & 25 deletions articles/flow/configuration/source-control.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -17,37 +17,34 @@ src/
└── main <2>
└── frontend <3>
└── generated/
└── themes/ <4>
└── my-theme <5>
└── styles.css <6>
└── index.html <7>
└── index.html <4>
└── java
└── resources
└── test/ <8>
└── META-INF
└── resources <5>
└── test/ <6>
target/
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>
package.json <7>
package-lock.json <8>
pom.xml <9>
vite.config.ts <10>
vite.generated.ts <11>
tsconfig.json <12>
types.d.ts <13>
----
<1> A folder that caches the frontend modules upon which the project depends.
<2> Application sources. This folder is auto-generated based on the contents of [filename]`package.json` and [filename]`package-lock.json`.
<3> Frontend resources -- including CSS, TypeScript, and JavaScript files -- are placed in this folder.
<4> This folder includes custom themes.
<5> Each theme is in its own sub-folder. The name of this folder is provided as a parameter to the [annotationname]`@Theme` annotation to apply the theme to the application.
<6> [filename]`styles.css` is the theme's master style sheet that's loaded automatically when the theme is applied.
<7> [filename]`index.html` is an auto-generated file that defines the outermost structure of the application.
<8> Test sources.
<9> [filename]`package.json` defines the version ranges of the frontend dependencies.
<10> [filename]`package-lock.json` defines the exact versions of the frontend 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.
<3> Frontend resources, like TypeScript, and JavaScript files, are placed in this folder.
<4> [filename]`index.html` is an auto-generated file that defines the outermost structure of the application.
<5> Stylesheets are placed in this folder, for loading with the `@StyleSheet` annotation.
<6> Test sources.
<7> [filename]`package.json` defines the version ranges of the frontend dependencies.
<8> [filename]`package-lock.json` defines the exact versions of the frontend dependencies used in this project.
<9> Project and configuration details used by Maven to build the project.
<10> Can optionally be used to customize Vite configuration.
<11> An auto-generated file containing the Vite configuration needed for all applications.
<12> An auto-generated file that defines the configuration for compiling TypeScript code in the project, when needed.
<13> An auto-generated file that defines the TypeScript type definitions used in the project.

.Project Content May Vary
[NOTE]
Expand Down