I am currently working on microservices using springboot and Vaadin 8, and I want to use the Embedded UI 2.0 add-on for Vaadin.
I first tried embedding a simple Springboot + Vaadin into a host Vaadin application as shown in the example.
Here’s the result code for the host application :
import org.vaadin.embedded.VaadinUIComponent;
import ...
@Theme(ValoTheme.THEME_NAME)
public class HostUI extends UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
/*My Spring boot application */
VaadinUIComponent ui1 = new VaadinUIComponent("http://localhost:8081/app2/");
ui1.setSizeFull();
/* A simple vaadin application*/
VaadinUIComponent ui2 = new VaadinUIComponent("http://localhost:9020");
HorizontalSplitPanel split = new HorizontalSplitPanel(ui1, ui2);
split.setSizeFull();
setContent(split);
}
But I keep having an issue with VAADIN/* resources loading :
I’m not sure how the path to the resources are resolved, but I know that the
Vaadin directory is supposed to be /app2/VAADIN/* since the widgetsets and other vaadin compiled resources are working just fine and are available when I open the application directly from my browser.
Here are some additional information :
Vaadin version : 8.0.5
Embedded UI add-on version : 2.0
I used ValoTheme for all 3 applications (host and embedded)
vaadin.widgetset.mode is set to
fetch mode
I made sure that CORS is enabled for the applications.
I reproduced the issue with other example of (smaller) applications from Vaadin tutorials and the example applications. They are available
here .
The reported problem is due to missconfiguration of CORS and cookie management in the Spring Boot app. You can use the following in the
TutorialApplication class of your example:
@Bean
public CORSFilter corsFilter() {
return new CORSFilter();
}
@Bean
public ServletContextInitializer sessionCookieConfigListener() {
return context -> context.getSessionCookieConfig().setName("bootapp-session-id");
}
However, that would lead to another problem on the client-side:
“Failed to load widgetset: http://localhost:9030widgetsets/com.vaadin…”
So, something’s wrong with the generated bootstrap JavaScript code. This is due to the different mapping of the Vaadin servlet which causes a malformed URI for the serviceUrl parameter in the generated bootstrap JavaScript. I have already fixed that in
embedded-ui 2.1
Some notes regarding this add-on, though. Please notice that
this is an experimental add-on . Also, keep in mind that there are other approaches that might be more suitable when dealing with microservices. What problems are you trying to solve with a microservices architecture? Is it worth it to increase complexity only to have separate processes running? How are you dealing with resilience? What if one of the “microservices” is down? One of the key aspects of the microservices movement is to foster team independence. Is your application being developed by several teams? Anyway, just keep in mind that this is experimental, so might not be the best thing for a real-life project Happy coding!
First of all I would like to thank you for your help so far, and for the update.
Secondly, would you mind developping a little about what approaches you think would be more suitable for this ?
My goal is to solve the problem of the UI for a microservice architecture.
I have multiple services (spring boot applications), that should be able to run seperately, each with it’s Vaadin UI, and I need to provide a simple and extensive way to embed these UIs into a host (wich would be the gateway) application. I found the Embedded ui addon, and even though it comes with a lot of constraints, I thought that it would be a good start for finding a solution.
Although not related to the “one UI per microservice” problem, I developed a microservices example using the Netflix stack some months ago. You might find it useful as well:
https://github.com/alejandro-du/vaadin-microservices-demo
I just published a demo application using a Microservices architecture with service discovery, externalized configuration, circuit breakers for fault tolerance, replicated HTTP sessions for high availability, and reverse proxy with round-robin and (optional) sticky sessions routing for Vaadin applications. Check it out!
https://vaadin.com/blog/getting-started-with-microservices
I am currently try to use the VaadinUIComponent from a SpringBoot Microservice A inside a SpringBoot Microservice B, but every time i get the Vaadin Notification in top of my browser window
Cookies Disabled: This Application requires cookies to function
Please enable cookies in your browser …
Configured Cors-filter in Application A
@Configuration
public class MyConfiguration {
@Bean
public FilterRegistrationBean<CorsFilter> corsFilter() {
final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
final CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
final FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
}
and the cookie config name:
public class A {
public static void main(final String[] args) {
SpringApplication.run(A.class, args);
}
@Bean
public ServletContextInitializer sessionCookieConfigListener() {
return context -> context.getSessionCookieConfig().setName("addon-sessions-ids");
}
}
In chrome://settings/cookies/detail?site… it displays only the JSESSIONID cookie name from App B
Hard to say the cause. I’d suggest checking that the embedded app is available and that it can be placed in an external HTML document. See whether the custom session cookie is set or not and confirm that CORS is working.
Hard to say the cause. I’d suggest checking that the embedded app is available and that it can be placed in an external HTML document. See whether the custom session cookie is set or not and confirm that CORS is working.
Once i put the embedded App in a BrowserFrame as ExternalResource everything works fine and cookies will be setted…
Additionally if i put the embedded App in the host Application from your GitHub Project it works as well…
