Where should I place my Vaadin 10+ static files?

Question

In Vaadin 10-14, where should I place my static files, such as CSS, JavaScript, and Polymer templates? How about static files such as images?

Also, how do I import these files in Vaadin? Is there a difference between Vaadin 14 with npm and Vaadin 10-13 with bower?

Similar: [*Where to put data or config files loaded by my Java code when web app launches in a Vaadin 14 web app driven by Maven*](https://stackoverflow.com/q/59996594/642706) — Basil Bourque, Feb 01 '20 at 01:18

score 52 · Accepted Answer · edited Jan 31 '20 at 00:20

All paths are relative to the project root, e.g. where the pom.xml file is located in a Maven project.

JavaScript imported using @JsModule uses strict mode. Among other things, this means that global variables must be defined on the window object, window.x = ..., instead of just x = ....

Vaadin 14 with npm

Non-Spring Boot projects (war packaging)

CSS files
- @CssImport("./my-styles/styles.css")^[1]
- /frontend/my-styles/styles.css
JavaScript and Polymer templates
- @JsModule("./src/my-script.js")^[1]
- /frontend/src/my-script.js
Static files, e.g. images
- new Image("img/flower.jpg", "A flower")
- /src/main/webapp/img/flower.jpg

Spring Boot projects (jar packaging)

CSS files
- @CssImport("./my-styles/styles.css")^[1]
- /frontend/my-styles/styles.css
JavaScript and Polymer templates
- @JsModule("./src/my-script.js")^[1]
- /frontend/src/my-script.js
Static files, e.g. images
- new Image("img/flower.jpg", "A flower")
- /src/main/resources/META-INF/resources/img/flower.jpg

Add-ons (jar packaging)

CSS files
- @CssImport("./my-styles/styles.css")^[1]
- /src/main/resources/META-INF/resources/frontend/my-styles/styles.css
JavaScript and Polymer templates
- @JsModule("./src/my-script.js")^[1]
- /src/main/resources/META-INF/resources/frontend/src/my-script.js
Static files, e.g. images
- new Image("img/flower.jpg", "A flower")
- /src/main/resources/META-INF/resources/img/flower.jpg

Vaadin 10-13, Vaadin 14 in compatibility mode

Non-Spring Boot projects (war packaging)

CSS files
- @StyleSheet("css/styles.css")^[2]
- /src/main/webapp/frontend/css/styles.css
Polymer templates, custom-style and dom-module styles
- @HtmlImport("src/template.html")
- /src/main/webapp/frontend/src/template.html
JavaScript
- @JavaScript("js/script.js")^[3]
- /src/main/webapp/frontend/js/script.js
Static files, e.g. images
- new Image("img/flower.jpg", "A flower")
- /src/main/webapp/img/flower.jpg

Spring Boot projects and add-ons (jar packaging)

CSS files
- @StyleSheet("css/styles.css")^[2]
- /src/main/resources/META-INF/resources/frontend/css/styles.css
Polymer templates, custom-style and dom-module styles
- @HtmlImport("src/template.html")
- /src/main/resources/META-INF/resources/frontend/src/template.html
JavaScript
- @JavaScript("js/script.js")^[3]
- /src/main/resources/META-INF/resources/frontend/js/script.js
Static files, e.g. images
- new Image("img/flower.jpg", "A flower")
- /src/main/resources/META-INF/resources/img/flower.jpg

Footnotes

^[1] The @JsModule and @CssImport annotations can also be used for importing from an npm package. In this case, the path is defined as @JsModule("@polymer/paper-input") or @CssImport("some-package/style.css"). Paths referring to the local frontend directory should be prefixed with ./

^[2] The @StyleSheet annotation can also be used in Vaadin 14 with npm. The same paths as in V10-V13 can be used, including the context:// protocol @StyleSheet("context://style.css"), which resolves the path relative to the context path of the web application, like other static files. Styles included this way may cause issues with web components.

^[3] The @JavaScript annotation can also be used in Vaadin 14 with npm. The V14 /frontend folder should then be used,.

Is there a list for the file locations regarding a PWA (worker, manifest, etc.)? — Michael Kemmerzell, Sep 27 '19 at 09:29
@mkemmerz At least the service worker is generated on startup. If you want to override it or want more info, check out the documentation https://vaadin.com/docs/v14/flow/pwa/tutorial-pwa-introduction.html. In particular the "PWA Service Worker" and "PWA Web App Manfiest" subpages might be useful to you. — Erik Lumme, Sep 27 '19 at 10:51
Where to store simple data files loaded when the web app launches, such as JSON/XML/CSV files? I mean files that are accessed by my Java code, never served to web browsers. — Basil Bourque, Jan 31 '20 at 00:19
@BasilBourque You can put it in `src/main/resources` and access it e.g. with `getClass().getResourceAsStream("/myfile.txt")`, the leading slash is important. — Erik Lumme, Jan 31 '20 at 06:27

Michael Kemmerzell · Answer 2 · 2021-04-07T06:08:43.840

5

@Tazavoo 's answer has been added to the official Vaadin documentation:

Vaadin Resource Cheat sheet

I just wanted to put it here because I hope this will stay updated in the future. Please forgive me that I don't post the tables here but this answer will run over otherwise.

edited Apr 07 '21 at 06:08

answered Nov 29 '19 at 08:34

Michael Kemmerzell

4,802
4
27
43

2

Reference to `Vaadin 15` should be changed to `Vaadin Latest`, and the link should be https://vaadin.com/docs/latest/flow/advanced/loading-resources#resource-cheat-sheet Vaadin 15 isn't supported anyways and the user will be redirected to latest. – Avec Apr 07 '21 at 05:53

score 2 · Answer 3 · answered Oct 20 '22 at 09:05

While Erik Lumme's answer is basically correct, I would like to share my experience about java script loading in a vaadin23 spring boot project, packaged as war. There are subtle differences about how the path must be indicated.

@JsModule:

path prefixed by "./": The path must be relative to the "frontend" folder
path without prefix: The path must be relative to the "node_modules" folder (maintained by npm).

Loading a java script by Page.addJavaScript(): The path must be relative to the root of the deployed application (in tomcat), rsp. to "src/main/webapp" in the project source.

score 0 · Answer 4 · answered Jun 02 '21 at 18:39

We have shared resources of several Vaadin 14 modules like this:

маke common directory form project root /resources/static

route request there via nginx at prod and via Spring at local dev

public class MvcConfig implements WebMvcConfigurer {

   @Override
   public void addResourceHandlers(ResourceHandlerRegistry registry) {
      registry.addResourceHandler("/static/**")
     .addResourceLocations("file:./resources/static/")
     .setCachePeriod(3600);
     registry.setOrder(Integer.MAX_VALUE);

}

for css remove all

@CssImport("./styles/root/global-styles.css")

and put in MainView (@Route view), see https://vaadin.com/docs/v14/flow/styling/importing-style-sheets:

   @StyleSheet("/static/css/global-styles.css")

for images put it to css

.plus-btn {
   background: url("../static/icons/plus.svg") no-repeat center;
}

Where should I place my Vaadin 10+ static files?

4 Answers4

Vaadin 14 with npm

Non-Spring Boot projects (war packaging)

Spring Boot projects (jar packaging)

Add-ons (jar packaging)

Vaadin 10-13, Vaadin 14 in compatibility mode

Non-Spring Boot projects (war packaging)

Spring Boot projects and add-ons (jar packaging)

Footnotes

Linked