Vaadin 12 OSGi

Hi all,

I’m epxerimenting with the new Vaadin 12 in OSGi. I’m following the tutorial found on https://vaadin.com/docs/flow/osgi/tutorial-osgi-basic.html.

I can see text appearing in my browser when creating a page, but no theming or components are loaded. I assume this is a problem with loading the WebJars. At the bottom of the page, they describe repackaging all webjars in the application jar, but I do not have a ‘single’ application jar, my application has multiple jars. Next to that I’m not using Maven, but BNDTools.

Can anyone point me in the correct direction on how to get this up-and-running?

Thanks.

Just to make clear what I tried: I repackaged some webjars into an OSGi jar, with following manifest:

Manifest-Version: 1.0
Bnd-LastModified: 1544109366916
Bundle-ManifestVersion: 2
Bundle-Name: <...>
Bundle-SymbolicName: <...>
Bundle-Version: 1.0.0.201812061516
Created-By: 1.8.0_171 (Oracle Corporation)
Include-Resource: META-INF/resources/frontend/bower_components=resourc
 es/vaadin-button-2.1.0/META-INF/resources/webjars,META-INF/resources/
 frontend/bower_components=resources/vaadin-ordered-layout-1.1.0/META-
 INF/resources/webjars,META-INF/resources/frontend/bower_components=re
 sources/vaadin-lumo-styles-1.3.3/META-INF/resources/webjars,META-INF/
 resources/frontend/bower_components=resources/polymer-2.6.1/META-INF/
 resources/webjars
Require-Capability: osgi.extender;filter:="(&(osgi.extender=osgi.compo
 nent)(version>=1.3.0)(!(version>=2.0.0)))",osgi.ee;filter:="(&(osgi.e
 e=JavaSE)(version=1.8))"
Tool: Bnd-3.5.0.201709291849
Vaadin-OSGi-Extender: true

So, all resources have been packaged into an OSGi compatible jar (and resources itself have been ocpied into META-INF/resources/frontend/bower_components/…), but they don’t get discovered.

There may be several issues:

  • You are using Flow version where themes are not yet OSGi compatible themselves. This ticket has been fixed recently.https://github.com/vaadin/flow/issues/4809. Please make sure you are using version which has this fix.
  • I’m not sure about the way how you repackage the resources. Please make sure that the resources are available via HTTP.

E.g you should be able to get some content if you ask a resource “http://localhost:8080/frontend/bower_components/vaadin-button/theme/lumo/vaadin-button.html”.

You may also check your network tab in Chrome dev tools: which resources are requested and which exist (not 404).

If frontend/bower_components/vaadin-button/theme/lumo/vaadin-button.html is not requested at all then it means your theme jar is just not OSGi compatible most likely.

I’m a bit scared about your Include-Resource header.
META-INF/resources/frontend/bower_components=...

META-INF/resources path in jar are not handled in the Web out of the box for you.
META-INF is a protected folder.

Anyway META-INF/resources won’t work unless you register resources inside it explicitly via OsgiVaadinStaticResource.

Hi Denis,

Thanks for the reply. I added all files in the (repackaged) jars as static resources by implementing OsgiVaadinContributor and this seems to work. However, this list is very long (hundreds of files). Isn’t there a better way?

Next to that, my application seems already ‘more’ styled, but not completely yet (see screenshot, page contains an ‘h1’ and a Vaadin Button). The fonts are correct, but the button is not styled yet as it should. My developer console is not showing any resources it cannot find. Any idea?

Well, we are suggesting another way of handling webjars in OSGi (at least it works with felix-jetty).
Just put all your resources into the bundle root.

See the config starting from here: https://github.com/vaadin/base-starter-flow-osgi/blob/master/pom.xml#L160
(and 60 lines after that).

The result of this config is : frontend becomes a folder inside a bundle root and it’s available via HTTP without more efforts.

I’m not sure about the exact way of your repackaging but if you have one folder with all bower_components in one location then you may just register META-INF/resources/frontend/bower_components folder via OsgiVaadinContributor.

Otherwise it’s a very long list, I agree.

I cannot say anything about styling unfortunately.
The bug related to theme bundles was fixed a few days ago. We had no chance to test it anyhow.

There may be more bugs related to that.

Please just create tickets.

Thanks Denis, I indeed managed to use folder names in the static resources i.s.o. mentioning each file separately.

I have all the latest bundles, but layout is still not showing up completely as it is supposed to be: fonts are loaded, colors e.a. not.