Embedded Application Limitations

Some Vaadin features are not available in embedded applications.

Limitations in embedded applications include:

  • Navigation and routing: Both features are not available for embedded applications.

    • There is no point annotating your classes with the@Route annotation, because it is not possible to navigate to the route target.

    • You can also not use the router link, whether via the RouterLink class or in a custom way.

  • Theming: You can only specify one @Theme annotation. See Theming Embedded Applications for more.

  • Push: You can only use one @Push annotation. See Configuring Push Notifications in Embedded Applications for more.

  • Progressive Web Applications: @PWA annotation and all PWAs features are not available in embedded applications.

  • CORS headers: Cross-Origin Resource Sharing (CORS) headers are not defined automatically. If the Vaadin servlet providing the embeddable application is outside of the servlet container that provides the page in which it is embedded, these headers need to be provided.

    The responses from the Vaadin servlet should contain appropriate CORS headers. You can add these by:

    • Configuring the servlet container (see the documentation on adding HTTP headers for responses for your specific container), or

    • Packaging the embeddable application with a custom VaadinServlet.

      Example: Custom VaadinServlet that adds CORS headers

      Java

      1. public class CustomServlet extends VaadinServlet {
      3.     @Override
      4.     public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
      5.         setAccessControlHeaders((HttpServletResponse) res);
      6.         super.service(req, res);
      7.     }
      9.     private void setAccessControlHeaders(HttpServletResponse resp) {
      10.         resp.setHeader("Access-Control-Allow-Origin", "http://localhost:80");
      11.         resp.setHeader("Access-Control-Allow-Methods", "*");
      12.         resp.setHeader("Access-Control-Allow-Headers", "Content-Type");
      13.         resp.setHeader("Access-Control-Allow-Credentials", "true");
      14.     }
      15. }
      • This example assumes that the embedding (host) site is served from the same host mapped to port 80 (be it a servlet container or a custom Python HTTP server). Our servlet container with our Vaadin servlet is bound to, for example, 8080.