20

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?

1

4 Answers 4

52

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

4
  • Is there a list for the file locations regarding a PWA (worker, manifest, etc.)? Commented Sep 27, 2019 at 9:29
  • 1
    @mkemmerz At least the service worker is generated on startup. If you want to override it or want more info, check out the documentation 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
    Commented Sep 27, 2019 at 10:51
  • 1
    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. Commented Jan 31, 2020 at 0:19
  • 3
    @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
    Commented Jan 31, 2020 at 6:27
6

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

1
  • 2
    Reference to Vaadin 15 should be changed to Vaadin Latest, and the link should be vaadin.com/docs/latest/flow/advanced/… Vaadin 15 isn't supported anyways and the user will be redirected to latest.
    – Avec
    Commented Apr 7, 2021 at 5:53
2

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.