Ways to use React in Spring app

There are a lot of examples of use Spring and React in the Internet, but for me when I first wanted to know how to better integrate these frameworks, it was essential to understand how it can work in general. So, as to my humble experience, I wanted to share some examples:

1. Use of React library as CDN inside HTML file
2. Use of frontend-maven-plugin
3. Use of Gradle frontend plugin
4. Use of JS bundler/builder
5. Use of Docker as bundler

1. Use of React library as CDN inside HTML file

*Example *- https://github.com/AndriiMaliuta/sb-kotlin-react_inline

It is the "simplest" example as there is no need to use some other tools and you just add ReactJS library from CDN provider in the HTML file and use React object directly in the HTML file rendered by Spring controller. After you add the CDN link, you now have the access to all the objects/functions of React/ReactDOM.

2. Use of frontend-maven-plugin

*Example *- https://github.com/AndriiMaliuta/springboot-react-eirslett-mvn-plugin

The frontend-maven-plugin is useful to install NodeJS and NPM on the phase of Maven project build. First you add it to POM.xml file:

</plugin>

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>${frontend-maven-plugin.version}</version>

                <configuration>
                    <nodeVersion>${node.version}</nodeVersion>
                    <npmVersion>${npm.version}</npmVersion>
                </configuration>

                <executions>

                    <execution>
                        <id>install-frontend-tools-cats</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <workingDirectory>${catsAppSrcDir}</workingDirectory>
                        </configuration>
                    </execution>

                    <execution>
                        <id>npm-install-cats-app</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <workingDirectory>${catsAppSrcDir}</workingDirectory>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <execution>
                        <id>build-cats-app</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <workingDirectory>${catsAppSrcDir}</workingDirectory>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>

                </executions>

            </plugin>

And now when running the "mvn package" command when compiling the java code, the plugin will install NodeJS and NPM and will translate the JSX code into *.JS where you specify in the plugin config.

3. Use of Gradle frontend plugin

*Example *- https://github.com/AndriiMaliuta/sb-kotlin-react-webpack-gradle

This is the same as use of Front-end plugin or Maven, but Gradle plugin is used to run NodeJS NPM command on Gradle build phase.

4. Use of JS bundler/builder

Example - https://github.com/AndriiMaliuta/sb-kotlin-react-webpack

You can use any bundler like Webpack, Snowpach, Parcel, etc. The main point is to convert the JSX code (or .ts) into .JS.
The Webpack is used to build React app with NPM modules (no Frontend plugin used). When running Maven build Webpack builds bundle.js that is added to .html file in target resources.

Maven org.codehaus.mojo:exec-maven-plugin plugin is used to run npm run build on the build phase.

<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin

Use of Docker as bundler

Docker is very powerful tool for building language/tools agnostic containerized apps. So you do not need any plugin to run NodeJS/NPM or other tools, but you can directly use Dockerfile commands to make necessary operation.

So, for example you add such a code to Dockerfile:

# to convert JS with webpack
FROM node:13-alpine AS NODE
COPY ./ ./
RUN npm run build

FROM maven:3.6-jdk-8-alpine AS MAVEN_BUILD
COPY --from=NODE ./ ./
RUN mvn clean package -DskipTests

FROM openjdk:8-alpine
COPY --from=MAVEN_BUILD ./target/*.jar ./app.jar
RUN ls -a
#ENTRYPOINT ["java","-jar", "./target/app.jar"]
CMD ["/bin/sh", "-c", "java -jar cloud*.jar"]

First you use Node image to build the JSX as JS, then with Maven image you build JAR file and then with openjdk:8-alpine you run the app.

I did not dig into details not to overwhelm with information, please share your feedback if it would e useful to add some other details or guides like this.

Thanks!