@StyleSheet and cache busting?

Flow
1

I’m still struggling with accessing lumo/lumo.css (separate thread)
but another issue I’m having is how to ensure my users get a fresh copy of the styling when we deploy a new version.

How do you guys do it?

  • Do nothing and let the browser/user refresh it when they want?
  • Configure time-to-live in web server / spring boot?
  • Some sort of unique url?

Up until recently, I’ve been in the first camp, but this does some times cause noise, so recently I added our app version to the URL:

    public default void loadCss(String css) {
        // Append version no to css for cache busting
        css = css + "?v=" + SystemProperties.getGitVersion();
        UI ui = UI.getCurrent();
        boolean loaded = ui.getElement().getProperty(css, false);
        if(!loaded) {
            ui.getPage().addStyleSheet(css);
            ui.getElement().setProperty(css, true);
        }
    }

I’d prefer to use @StyleSheet, but there I have a static string, so can’t do that, unless I have a placeholder that gets replaced with verison or checksum while building?

2

How about using @CssImport and put the styles in the frontend bundle instead?

3

Should not be the official solution, when we “praise” the stylesheet annotation everyhwere in our docs and name css import only as a sidekick

4

I avoid the frontend bundle as much as possible. The whole special vaadin dev environment is a pain, at least for my setup. (multi-module maven project building a j2ee ear for deploy to web server)

For my own stuff I prefer plain old resources in src\main\webapp. I save, Eclipse syncs to target and then I refresh in browser. No extra magic that only works some of the time.