How to Inline js from webjar in a Spring Boot App

Flow
1

The Inline functionality tries to get a resource from the serlvet context classloader.
(BootStrapUtils.getInlineResourceStream)

I fail to load a JavaScript file from a Webjar (META-INF/resources) in my Spring Boot App. I tried many variants nothing works.
for e.g. /META-INF/resources/webjars/webcomponentsjs/custom-elements-es5-adapter.js

In the examples I see files that start with “bowercomponents” how does that magic work with the webjars?

Indeed there is no need to “inline” it at all, is there any way to load the JavaScript from my server side component?

Any hint is very appreciated.

2

Hi,

In order to transparently support static files both from Bower and Bower Webjars, and also support transpiling for IE11 in a sensible way, the resources are setup as following (in a Maven project):

  • /src/main/webapp/frontend is the main folder for all resources which might need transpiling. This is what the Flow Maven plugin processes by default
  • frontend:// is a custom Vaadin protocol which maps to the frontend folder: /frontend. This is what is used by default if you annotate a component class using @JavaScript, @HtmlImport or @StyleSheet and provide a relative URL, e.g. foo.js
  • /src/main/webapp/frontend/bower_components is where you would install your Bower files, if you are using Bower for whatever reason.
  • For webcomponentsjs/custom-elements-es5-adapter.js, the location would thus be /src/main/webapp/frontend/bower_components/webcomponentsjs/custom-elements-es5-adapter.js
  • To load this file whenever a given component class is used for the first time, you would annotate the class with @JavaScript("bower_components/webcomponentsjs/custom-elements-es5-adapter.js") (or prefix with frontend:// but that’s not nencessary)
  • To be able to support the same annotation regardless of whether you are using Bower or webjars, the frontend:// (or actually the /frontend/ URL) also searches /META-INF/resources/webjars so for the annotation @JavaScript("bower_components/webcomponentsjs/custom-elements-es5-adapter.js"), the file will also be found if it is in /META-INF/resources/webjars/webcomponentsjs/custom-elements-es5-adapter.js

Now regarding custom-elements-es5-adapter.js, you should not need to load that as Flow loads the appropriate polyfills depending on the browser in use

3

Thanks for the clarification.
I need the custom-elements-es5-adapter.js because I try to create my component with pure kotlin.js that is ES5 and cannot create a Custom element otherwise.
The idea is to have both sides of the Component written in Kotlin. But the cross platform support of Kotlin is still quite experimental.

4

By the way usually there is no webapp folder in Spring Boot jar deployment. Do you have ideas for that?

5

Flow is using ServletContext to find resources. This includes webapp war projects and META-INF/resources in included jar files by default. Spring Boot has some additional way to define static resources in a jar project if I remember correctly