Where should I place my Vaadin 10+ static files? - spring

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?

Answer 1

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,.

Answer 2

#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.

Answer 3

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.

Answer 4

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;
}