Attempting to embed vaadin in an existing application, but unable to retrie

Flow
1

Hi,

I’m prototyping use of Vaadin in an existing application. The application has a chrome that is developed primarily in React, and embeds server-side generated content within it - this latter is what I am considering migrating to Vaadin.

The application uses servlets and guice, so I have created a GuiceServletModule to install the VaadinServlet. I have also created a simple component and a WebComponentExporter for it. This has all been created in a new maven jar which will be a dependency of the WAR.

VaadinApplicationServlet and GuiceServletModule:

public class VaadinApplicationServletModule extends ServletModule {


  private static final String VAADIN = "/vaadin/*";


  @Override
  protected void configureServlets() {
    super.configureServlets();

    serve(VAADIN).with(VaadinApplicationServlet.class);
  }


  @Singleton
  public static class VaadinApplicationServlet extends VaadinServlet {}
}

MyComponent

public class MyComponent extends Div {


  public MyComponent() {
    super();

    Paragraph placeholder = new Paragraph();
    placeholder.setText("Vaadin application");

    this.add(placeholder);
  }
}

MyComponentExporter:

public class MyComponentExporter extends WebComponentExporter<MyComponent> {


  public MyComponentExporter() {
    super("my-component");
  }


  @Override
  protected void configureInstance(WebComponent<MyComponent> webComponent, MyComponent component) {

  }
}

My pom includes the following - I’m using production mode as I figured it would be a simpler initial goal as I get set up:

   <properties>
      <vaadin.version>14.3.0</vaadin.version>
      <vaadin.productionMode>true</vaadin.productionMode>
      <vaadin.compatibilityMode>false</vaadin.compatibilityMode>
   </properties>

   <build>
      <plugins>
         <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>${vaadin.version}</version>
            <executions>
               <execution>
                  <goals>
                     <goal>prepare-frontend</goal>
                     <goal>build-frontend</goal>
                  </goals>
               </execution>
            </executions>
         </plugin>
      </plugins>
   </build>

My HTML head includes the following:

<script type='text/javascript'
        src='/context-root/vaadin/VAADIN/build/webcomponentsjs/webcomponents-loader.js'>
</script>

<script type='module'
        src='/context-root/vaadin/web-component/my-component.js'>
</script>

The page successfully loads the webcomponents-loader, but always returns a 404 for my-component.js. When I run a mvn package, I can see that target/frontend/my-component.js is created, and if I inspect the minified JS output I can see reference to my-component there too. I have tried both running with the module open in my IDE (InjelliJ) and installing and resolving from my local maven repository, with the same results.

I’m sure there’s something simple I’ve overlooked, or some minor quirk of my use-case that I haven’t accounted for. A second pair of eyes would be greatly appreciated!

Edit: If I run in debug mode, I get an NPE since the DevModeHandler has not been initialised. This may give some indication as to what I’ve missed/messed.

2

I’ve also tried using web.xml to define the servlet, and I’ve tried changing the script used to:

<script type='text/javascript'
        src='/context-root/vaadin/web-component/my-component.html'>
</script>

The result is largely the same, although if I navigate directly to …/context-root/vaadin/web-component/my-component.html I now get the following returned:

Could not navigate to 'web-component/my-component.html'

Reason: Couldn't find route for 'web-component/my-component.html'
3

So, it seems that for whatever reason the WebComponentConfigurationRegistryInitializer is never called during startup of the application or servlet. Only tried in Jetty, so perhaps I am missing some config or setup required there. Calling it manually as follows ‘fixes’ the problem (though I assume this is not entirely advisable):

public class VaadinApplicationServletModule extends ServletModule {


  private static final String VAADIN = "/vaadin/*";


  @Override
  protected void configureServlets() {
    super.configureServlets();

    try {
      WebComponentConfigurationRegistryInitializer initializer = new WebComponentConfigurationRegistryInitializer();
      initializer.process(Collections.singleton(MyComponentExporter.class), getServletContext());
    } catch (ServletException e) {
      throw new RuntimeException(e);
    }

    serve(VAADIN).with(VaadinApplicationServlet.class);
  }


  @Singleton
  public static class VaadinApplicationServlet extends VaadinServlet {}
}