Static resource URLs and Vaadin's URL mapping

Flow
1

I have an addon Jar to allow embedding a specific font. It has the following content:

  • /META-INF/resources/frontend/font-roboto.css
  • /META-INF/resources/fonts/roboto-*.woff2

The URL paths used in the CSS file are currently of the form: fonts/roboto-xyz.woff2

However, this font path doesn’t work as soon as vaadin.url-mapping is set for the application. I then need to prefix the path with ../, because the base path of the application changes while the actual font URL stays the same. Having to adapt static files to match dynamic configuration isn’t ideal.

I suppose I could use an absolute path like /fonts/roboto-xyz.woff2 instead, but then it will break when setting server.servlet.context-path. For a new (Spring Boot) application there’s admittedly no good reason to do this, but it’s not necessarily easy to change for applications that already do.

Is there are clever, uniform way to solve this, or do I need to provide two CSS files?

2

Did you try it with a customized theme.json? Either directly in your main project or indirectly as parent theme within your add-on? flow/flow-tests/test-themes/src/main/frontend/themes/app-theme/theme.json at b1750a44e98b4ddfac88fd362e76b20d0bab313d · vaadin/flow · GitHub

3

Hmm, you’re right, a custom theme would work to fix the URL problem, as both CSS and fonts would then be below the URL mapping. For this specific case however, without multiple inheritance, having to extend a specific theme just to embed a font seems rather limiting. But that’s definitely an option to keep in mind, thank you.

After reading this documentation and this issue it seems there just isn’t an ideal solution that just works in all cases right now, though plenty of options to solve it for a specific situation. So I’ll probably just add my context to the issue.