From 0266f9fb94b694461e378420174bd8f95ede605d Mon Sep 17 00:00:00 2001 From: Artur Signell Date: Fri, 12 Jun 2026 20:03:33 +0300 Subject: [PATCH] Document META-INF/frontend as the location for frontend bundle sources The previously documented META-INF/resources location publishes files as static resources. Frontend bundle sources (JS modules, and CSS loaded with @CssImport) belong in META-INF/frontend; stylesheets loaded with @StyleSheet and static resources such as images belong in META-INF/resources. Adds the META-INF/frontend directory with a README explaining this. --- README.md | 2 +- src/main/frontend/README | 9 +++++++-- src/main/resources/META-INF/frontend/README | 13 +++++++++++++ 3 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 src/main/resources/META-INF/frontend/README diff --git a/README.md b/README.md index 88776236..11fb2136 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ If you wish to build and publish an add-on or extension in [Vaadin Directory](ht * TestView.java: A View class that let's you test the component you are building. This and other classes in the test folder will not be packaged during the build. You can add more test view classes in this package. * assembly/: this folder includes configuration for packaging the project into a JAR so that it works well with other Vaadin projects and the Vaadin Directory. There is usually no need to modify these files, unless you need to add JAR manifest entries. -If you are using static resources such as images, JS (e.g. templates) and CSS files the correct location for them is under the `/src/main/resources/META-INF/resources/frontend` directory and is described here [Resource Cheat Sheet](https://vaadin.com/docs/v14/flow/importing-dependencies/tutorial-ways-of-importing.html#resource-cheat-sheet)in more details. +Stylesheets loaded with `@StyleSheet` and static resources such as images go under the `/src/main/resources/META-INF/resources` directory. JS modules (e.g. templates), and CSS files that should be included in the frontend bundle and loaded with `@CssImport`, go under the `/src/main/resources/META-INF/frontend` directory. See the [Resource Cheat Sheet](https://vaadin.com/docs/latest/flow/advanced/loading-resources#resource-cheat-sheet) for more details. ### Deployment diff --git a/src/main/frontend/README b/src/main/frontend/README index f457c138..ad2b1342 100644 --- a/src/main/frontend/README +++ b/src/main/frontend/README @@ -1,6 +1,11 @@ In add-on projects, you should NOT put anything to this directory. Vaadin -tooling might still autogenerate somethign here, but just ignore this. +tooling might still autogenerate something here, but just ignore this. -E.g. Client side resources that should be available for addon users should go to: +Frontend bundle sources (JS modules, and CSS loaded with @CssImport) that +should be available for add-on users should go to: +src/main/resources/META-INF/frontend + +Stylesheets loaded with @StyleSheet, and static resources such as images, +should go to: src/main/resources/META-INF/resources diff --git a/src/main/resources/META-INF/frontend/README b/src/main/resources/META-INF/frontend/README new file mode 100644 index 00000000..4d289491 --- /dev/null +++ b/src/main/resources/META-INF/frontend/README @@ -0,0 +1,13 @@ +Place the add-on's frontend bundle sources in this directory. They are +packaged into the JAR and used as input when the consuming application +builds its frontend bundle. This is the place for JS modules referenced +with @JsModule, and for CSS files that should be included in the bundle +and loaded with @CssImport. + +Use the ./ prefix when referencing the files, e.g. +@JsModule("./my-addon/my-module.js") for +src/main/resources/META-INF/frontend/my-addon/my-module.js + +CSS is typically not bundled: place stylesheets in +src/main/resources/META-INF/resources and load them with @StyleSheet. +Static resources, such as images, also go there.