Custom UIProvider and emedbeding Vaadin app


I need to develop vaadin app that will be embedded in classic html pages. I expect the need for more than one vaadin div inside a single html page - therefore I created a custom UI provider which returns UI class depending on the request path:

String path = event.getRequest().getPathInfo(); if (path == null) { return DefaultUI.class; } else if (path.equals("/something")) { return SomethingUI.class; } else { return DefaultUI.class; } and it worked as a standalone vaadin app.

My Vaadin servlet is configured like this

urlPatterns = {"/webapp/*", "/VAADIN/*"},

Now, when I embed this vaadin app inside a html page, DefaultUI works just fine:

"browserDetailsUrl": "/webapp/",
"serviceUrl": "/webapp/",

However, emebeding other UI, is problematic:

"browserDetailsUrl": "/webapp/something", "serviceUrl": "/webapp/something", In this case, SomethingUI is rendered correctly but button click produces an error because server does not reply with JSON but with HTML page. I cant figure out why the response is suddnely html (when button is clicked).

Waht would be the best parctice for emebding more than one UI in html page? Using path seem to be problematic, and I would like to avoid using headers or request params.

Can anybody please suggest alternative or the best parctice for accessing multiple UIs.


What kind of HTML page is returned when you click a button? Have you tried adding slashes here:

"browserDetailsUrl": "/webapp/something",
"serviceUrl": "/webapp/something",


I did try adding trailing slashes, like “/webapp/something/”. In that case, I see default UI which breaks when the button is clicked. It braks for the same reason: HTML page is resturned instead json.

HTML page that is returned is the same page that is opened in the browser, the one that embeds vaadin. But, urls were altered, for exampe “serviceUrl”: “./…/…” (original src is “serviceUrl”: “/webapp/something”) and “vaadinDir”: “./…/…/…/VAADIN/” (original src is “vaadinDir”: “/VAADIN/”)

Clicking on the button makes POST to http://localhost:8080/webapp/something/UIDL/?v-wsver=7.5.6&v-uiId=2 and i think the problem is it wont work unless it is POSTed to webapp/UIDL.

So, switching UIs using request path probably wont work? What are the other options to embed more than one UI in the single web page?

Maybe try declaring two separate servlets?

I guess I’ve fixed it. It shoul be configured like this

"browserDetailsUrl": "/webapp/something", "serviceUrl": "/webapp/", Vaadin
are bit misleading, it even says “The two parameters are redundant and either may be removed in future.”. As I see, they are both needed and they may need renamning to reflect their purpose.