reactjsspring-bootwebpackmaven-3

How to integrate a React webapp inside a spring boot Application with jar packaging


We have a react webapp and a spring boot application(built with maven) in development.
The React app(on npm) and boot app are running separately but time has come to now integrate them and put it into QA/staging.
We are using webpack for bundling the react application.
The boot app is a single module with REST API(consumed by the react front-end) with hibernate for database persistence.

Questions

  1. What should be the directory structure for both react and boot app? We want to deploy the whole app(front-end and back-end) as a .jar (spring boot uberjar)
  2. What is the react app development workflow ? A workflow without having to run maven and run java -jar every time a small css, html or .js change is made.

I found resources on web where both the react and the boot applications were on separate repos/directories without any integration, which is not optimal; I am yet to find a resource where both webapp resources and boot resources are in the same directory tree which also accounts for development lifecycle and production lifecycle.

Bonus : The react developers know only html/js/css. Is it possible that they have only the react app resources in their vscode/webstorm project ?


Solution

  • I would suggest creating multimodule maven project, where one module will be spring-boot app and second one react app. To make it into uber jar, pack react app into webjar build by maven. Building can be done also by maven with proper plugin.

    So:

    1. Create normal react app (build by npm and so on) in sub directory of you project
    2. Add to this app pom.xml which will compile javascript on maven compile and pack it into proper webjar structure
    3. In spring-boot module add react one as normal maven dependency. Check out this tutorial

    This will allow you to have everything as one uber jar app. On the other hand, front-end people can work with react module as with any other react application.