This article won’t go into the structure of the files that must be served. See Deliver react.js from apache karaf and A Java programmers guide to delivering webapp frontends to get an overview of files.
The short story is that the servlet needs to deliver two files:
- An index.html containing the initial DOM tree of the web application (if loaded in a web browser that will be all that’s shown), e.g. like this
The index.html file and the bundle.js files are added as classpath resources in the OSGi bundle containing the servlet.
The index.html file is added by putting it into src/main/resources of the maven project for the OSGi bundle.
The bundle.js file is added to the classpath by letting the frontend-maven-plugin drop the created bundle.js into target/classes/
Everything covered so far is identical to what’s described in the first blog post.
The difference is how much simpler creating the servlet component is.
A web whiteboard DS component for serving a frontend without any routing could look like this:
The LogService service injection is passed to the FrontendServlet base class, where it is used to report problems when serving files.
If the web application has a router that can be used to edit the local part, like e.g. so
then the servlet needs to have matching routes (that’s the setRoutes() call in the constructor):
The paths are used when reloading a subpage, e.g. by pressing F5 in the web browser. All paths will return the index.html file which in turn will load the bundle.js which will navigate to the correct sub-page based on the path.
Note that the react paths have the application web context, while the paths on the java side are without the application web part:
|React routes||Java routes|